:root {
  --green: #009e00;
  --white: #e9dcafeb;
  --black: #000000;
  --blue: #053aad;

  --svgColorLgt: invert(21%) sepia(86%) saturate(3390%) hue-rotate(218deg) brightness(83%) contrast(113%);
  --svgColorDrk: invert(37%) sepia(57%) saturate(3722%) hue-rotate(99deg) brightness(96%) contrast(102%);
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.list {
  list-style: square;
}

.menuBackground {
  background-color: var(--bg);
  border: none;
}

.name {
  height: 50%;
  width: 50%;
  filter: var(--menuFontColor);
}

.topBar {
  display: flex;
  padding: 10px;
}

.menu {
  height: 50px;
  width: 50px;
  filter: var(--menuFontColor);
}

.theme-btn {
  height: 50px;
  width: 50px;
  filter: var(--menuFontColor);
}
  
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
  --menuFontColor: var(--svgColorDrk);
}

.light-theme {
  --bg: var(--white);
  --fontColor: var(--blue);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
  --menuFontColor: var(--svgColorLgt);
}

  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
} 

.Row {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}
.Column {
  flex: 1 1 0px;
  border: 1px dashed var(--fontColor);
  text-align: center;
}

.box-label {
  font-size: 30px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--fontColor);
}

.page {
  display: flex;
  justify-content: center;
  border: 1px dashed var(--fontColor);
  margin-bottom: 2rem;
}

.big-div {
  height: 40%;
  width: 50%;
  font-size : 1rem;
  float: left;
  word-wrap: break-word;
}

.div-parent {
  display: flex;
  flex-direction: column;
  width: 50%;
  overflow: hidden;
  white-space: nowrap;
}

.top-div {
  border-bottom: 1px dashed var(--fontColor);
  border-left: 1px dashed var(--fontColor);
  word-wrap: break-word;
}

.bottom-div {
  border-left: 1px dashed var(--fontColor);
  word-wrap: break-word;
}

.hobbyList {
  float: left;
  padding-left: 2rem;
}

.hobbyListItem {
  margin-bottom: 1rem;
}

.staticBox {
  float: right;
  padding-left: 4px;
  border-left: 1px dashed var(--fontColor);
}

.image {
  height: 30rem;
  width: auto;
}

.text {
  padding: 5px;
  text-align: center;
}

.lists {
  list-style: none;
}

.lists li:before {
  content: "#";
  padding-right: 5px;
}