:root {
  --button-padding: 0.5em;
  --line-chart-axis-value-padding: 5px;
  --header-inner-size: 68px;
  --primary-font: "Poppins", Verdana;
  --hover-color-transition: linear 0.15s;
}

@keyframes fade-up {
  from {
    top: 30px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
:root {
  --primary-bg-color: #FFF;
  --secondary-bg-color: #EEE;
  --accent-bg-color: #BBB;
  --accent-bg-color-hover: #AAA;
  --accent-color: #000;
  --text-color: #000;
  --light-text-color: #333;
  --very-light-text-color: #666;
  --invert-text-color: #fff;
  /* primary-accent-color: dark */
  --primary-accent-color: #0000C8;
  /* secondary-accent-color: light */
  --secondary-accent-color: #ffbb00;
  /* tertiary-accent-color: dark */
  --tertiary-accent-color: #f70174;
  /* success-color: dark */
  --success-color: #006b1b;
  /* warn-color: light */
  --warn-color: #ffe600;
  /* reject-color: dark */
  --reject-color: #8d0000;
}

@keyframes fade-up {
  from {
    top: 30px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --primary-bg-color: #111;
    --secondary-bg-color: #222;
    --accent-bg-color: #444;
    --accent-bg-color-hover: #555;
    --accent-color: #fff;
    --text-color: #fff;
    --light-text-color: #ddd;
    --very-light-text-color: #aaa;
    --invert-text-color: #333;
    /* primary-accent-color: light */
    --primary-accent-color: #00eeff;
    /* secondary-accent-color: dark */
    --secondary-accent-color: #000;
    /* tertiary-accent-color: light */
    --tertiary-accent-color: #ff0077;
    /* success-color: dark */
    --success-color: #04af12;
    /* reject-color: dark */
    --reject-color: #d10000;
  }
}
:root.dark {
  --primary-bg-color: #111;
  --secondary-bg-color: #222;
  --accent-bg-color: #444;
  --accent-bg-color-hover: #555;
  --accent-color: #fff;
  --text-color: #fff;
  --light-text-color: #ddd;
  --very-light-text-color: #aaa;
  --invert-text-color: #333;
  /* primary-accent-color: light */
  --primary-accent-color: #00eeff;
  /* secondary-accent-color: dark */
  --secondary-accent-color: #000;
  /* tertiary-accent-color: light */
  --tertiary-accent-color: #ff0077;
  /* success-color: dark */
  --success-color: #04af12;
  /* reject-color: dark */
  --reject-color: #d10000;
}

@keyframes fade-up {
  from {
    top: 30px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
nav#desktop-header {
  background-color: var(--primary-bg-color);
  border-bottom: 5px var(--primary-accent-color) solid;
  box-shadow: 0 0 6px 1px #0088;
  color: var(--text-color);
  height: var(--header-inner-size);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  /* dropdowns */
}
nav#desktop-header #header-inner-bounds {
  display: flex;
  max-width: 980px;
  margin: auto;
  position: relative;
}
nav#desktop-header #header-logo {
  height: 52px;
  padding: 8px;
  float: left;
}
nav#desktop-header #header-left {
  display: inline-block;
}
nav#desktop-header #header-title {
  padding: 0 0.5em;
  margin: 0;
  display: inline-block;
  height: var(--header-inner-size);
  color: var(--primary-accent-color);
}
nav#desktop-header #header-title .inner {
  height: var(--header-inner-size);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
nav#desktop-header #header-title .name {
  margin: 0;
  line-height: 26px;
  font-size: 26px;
}
nav#desktop-header #header-title .github-io {
  margin: 0;
  font-size: 12px;
}
nav#desktop-header .dark-mode-toggle#left-nav-toggle {
  display: none;
  position: relative;
  margin: 0 10px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 1100px) {
  nav#desktop-header .dark-mode-toggle#left-nav-toggle {
    display: inline-block;
  }
}
nav#desktop-header .dark-mode-toggle#right-nav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  margin: 24px;
}
@media only screen and (max-width: 1100px) {
  nav#desktop-header .dark-mode-toggle#right-nav-toggle {
    display: none;
  }
}
nav#desktop-header #side-menu-opener {
  margin: 12px;
  width: 44px;
  height: 44px;
  transition: opacity 0.5s;
  cursor: pointer;
  padding: 0;
  display: none;
  opacity: 1;
  background: none;
  border: none;
  position: absolute;
  right: 0;
  top: 0;
}
nav#desktop-header #side-menu-opener img {
  width: 100%;
  height: 100%;
}
nav#desktop-header #side-menu-opener.hidden {
  opacity: 0;
}
nav#desktop-header #header-menu {
  margin: 0;
  padding: 0;
  height: var(--header-inner-size);
  color: var(--accent-color);
}
nav#desktop-header #header-menu {
  position: absolute;
  right: 0;
  display: flex;
  justify-content: flex-end;
}
nav#desktop-header .header-menu-item-container {
  display: inline-block;
  position: relative;
}
nav#desktop-header .header-menu-item-container:hover, nav#desktop-header .header-menu-item-container:focus-within {
  color: var(--primary-accent-color);
  cursor: pointer;
}
nav#desktop-header .header-menu-item-container:hover .header-dropdown-body, nav#desktop-header .header-menu-item-container:focus-within .header-dropdown-body {
  display: block;
}
nav#desktop-header .header-menu-item-container .header-menu-item {
  height: var(--header-inner-size);
  line-height: var(--header-inner-size);
  display: inline-block;
  padding: 0 24px;
  color: var(--text-color);
}
nav#desktop-header .header-menu-item-container .header-menu-item:focus .header-link, nav#desktop-header .header-menu-item-container .header-menu-item:hover .header-link {
  color: var(--primary-accent-color);
}
nav#desktop-header .header-menu-item-container .header-menu-item:focus #header-resume-button, nav#desktop-header .header-menu-item-container .header-menu-item:hover #header-resume-button {
  background-color: var(--secondary-accent-color);
  color: var(--text-color);
}
nav#desktop-header .header-menu-item-container .header-dropdown-body {
  background-color: var(--secondary-bg-color);
  color: var(--text-color);
  position: absolute;
  min-width: 200px;
  padding: 0;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  left: 0;
  display: none;
}
nav#desktop-header .header-menu-item-container .header-dropdown-body:hover {
  display: block;
}
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item.header-item,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:link.header-item,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:visited.header-item {
  background-color: var(--secondary-bg-color);
  color: var(--text-color);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item.header-item:hover, nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item.header-item:focus-within,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:link.header-item:hover,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:link.header-item:focus-within,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:visited.header-item:hover,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:visited.header-item:focus-within {
  background-color: var(--secondary-bg-color);
  color: var(--primary-accent-color);
  cursor: pointer;
}
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item.header-item.dropdown,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:link.header-item.dropdown,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:visited.header-item.dropdown {
  position: relative;
  cursor: auto;
}
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item.header-item.dropdown:hover .header-dropdown-body,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:link.header-item.dropdown:hover .header-dropdown-body,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:visited.header-item.dropdown:hover .header-dropdown-body {
  display: block;
}
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item.header-item.dropdown .header-dropdown-body,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:link.header-item.dropdown .header-dropdown-body,
nav#desktop-header .header-menu-item-container .header-dropdown-body .header-item:visited.header-item.dropdown .header-dropdown-body {
  display: none;
  left: 100%;
  position: absolute;
  top: 0;
}
nav#desktop-header .header-menu-item-container .header-link {
  color: var(--text-color);
  text-decoration: none;
  height: 100%;
}
nav#desktop-header .header-menu-item-container #header-resume-button {
  background-color: var(--primary-accent-color);
  border-radius: 6px;
  color: var(--invert-text-color);
  padding: 7px 16px;
  transition: var(--hover-color-transition);
}
nav#desktop-header .header-menu-item-container #header-resume-button .header-link {
  text-decoration: none !important;
}
@media only screen and (max-width: 820px) {
  nav#desktop-header #side-menu-opener {
    display: block;
  }
  nav#desktop-header #header-menu {
    display: none;
  }
}
@media only screen and (max-width: 440px) {
  nav#desktop-header #header-logo {
    display: none;
  }
  nav#desktop-header #header-title {
    font-size: 0.8em;
  }
}

@keyframes fade-up {
  from {
    top: 30px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
nav#side-menu {
  width: 0;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  overflow-x: hidden;
  transition: 0.5s;
  background-color: var(--primary-bg-color);
  text-align: right;
  color: var(--primary-accent-color);
}
@media (min-width: 820px) {
  nav#side-menu {
    display: none;
  }
}
nav#side-menu #side-menu-content {
  position: absolute;
  width: calc(100vw - 1em);
  font-weight: 300;
}
nav#side-menu #side-menu-content h1 {
  margin: auto;
  line-height: var(--header-inner-size);
  font-size: 26px;
  color: var(--primary-accent-color);
  text-align: right;
  padding-right: 20px;
  height: var(--header-inner-size);
  border-bottom: 5px solid var(--primary-accent-color);
}
nav#side-menu #side-menu-content .side-menu-top-level-item {
  position: relative;
  display: block;
  width: 100%;
}
nav#side-menu #side-menu-content .side-menu-top-level-item .side-menu-top-level-button {
  margin: auto;
  display: block;
  width: 100%;
  position: relative;
  background-color: var(--primary-bg-color);
  border: none;
  outline: none;
  font-size: 1.2em;
  font-weight: 300;
  font-family: inherit;
  color: var(--primary-accent-color);
  cursor: pointer;
  text-align: right;
  padding: 1em 0;
  padding-right: 25px;
}
nav#side-menu #side-menu-content .side-menu-top-level-item .side-menu-top-level-button.active {
  background-color: var(--primary-accent-color);
}
nav#side-menu #side-menu-content .side-menu-top-level-item .side-menu-top-level-button > div {
  padding: 0.5em 0 0.5em 0;
  border-bottom: 2px solid var(--primary-accent-color);
}
nav#side-menu #side-menu-content .side-menu-top-level-item a.side-menu-top-level-button {
  width: calc(100% - 25px);
}
nav#side-menu #side-menu-content .side-menu-item {
  display: none;
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  background-color: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: 0.4s;
  text-decoration: none;
}
nav#side-menu #side-menu-content .side-menu-item a {
  display: block;
  padding: 11px;
  text-decoration: none;
  overflow: hidden;
  font-size: 1.1em;
  color: var(--text-color);
  cursor: pointer;
  text-align: right;
  padding-right: 34px;
}
nav#side-menu #side-menu-content .side-menu-item a:visited, nav#side-menu #side-menu-content .side-menu-item a:link {
  color: var(--text-color);
}
nav#side-menu #side-menu-content .side-menu-item a:hover {
  color: var(--primary-accent-color);
}
nav#side-menu #side-menu-content .side-menu-dropdown {
  display: none;
}
nav#side-menu #side-menu-content .side-menu-dropdown a {
  margin-right: 20px;
  border-right: 3px solid var(--primary-accent-color);
}
nav#side-menu #side-menu-content #side-menu-end-button {
  margin: auto;
  margin-top: 10px;
  display: block;
  padding: 0;
  background-color: transparent;
  outline: 0;
  position: relative;
  padding: 20px 0;
  border: none;
  cursor: pointer;
  max-width: 100px;
}
nav#side-menu #side-menu-content #side-menu-end-button img {
  display: block;
  max-height: 100px;
  filter: invert(10%) sepia(100%) saturate(6520%) hue-rotate(247deg) brightness(71%) contrast(135%);
}
nav#side-menu .dark-mode-container {
  width: 100%;
  text-align: center;
  margin: 40px 0;
}
nav#side-menu .dark-mode-container .dark-mode-toggle {
  margin: auto;
}
nav#side-menu.open {
  width: 100%;
}

body {
  margin: 0;
  font-family: var(--primary-font);
}

input {
  font-family: var(--primary-font);
  outline: none;
}
input:focus-visible {
  outline: initial;
}

button {
  background: inherit;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

a {
  text-decoration: none;
}

canvas.pointer {
  cursor: pointer;
}

#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-bg-color);
  z-index: 90000000;
  transition: opacity 0.3s, background-color 0.2s;
}

#loadingScreen img {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  width: 100px;
}

#loadingScreen.hiding {
  opacity: 0;
}

#loadingScreen.hidden {
  display: none;
}

#menuTitle {
  cursor: pointer;
}

/* Div IDs */
#main {
  height: calc(100vh - 73px);
  transition: width 0.5s ease;
  margin-top: calc(64px + 0.5em);
  color: var(--text-color);
}

/* GENERAL */
.horizontal-grid {
  display: grid;
  grid-auto-flow: column;
}

.vertical-grid {
  display: grid;
  grid-auto-flow: row;
}

.content {
  margin: auto;
  max-width: 980px;
  padding: 2em 2em 0 2em;
}
@media (max-width: 500px) {
  .content {
    padding: 1em;
  }
}

.content h1 {
  max-width: 980px;
  margin: auto;
}

.primary-bg {
  background-color: var(--primary-bg-color);
}

.math {
  font-family: math;
}

.arial {
  font-family: Arial, Helvetica, sans-serif;
}

.input {
  background-color: var(--secondary-bg-color);
  color: var(--text-color);
}

.inputBottomLine {
  border-top: none;
  border-left: none;
  border-right: none;
  border-width: 1px;
  background-color: inherit;
  border-color: var(--light-text-color);
  outline: none;
  font-size: inherit;
  font-family: inherit;
}

.smallInputBottomLine {
  border-top: none;
  border-left: none;
  border-right: none;
  border-width: 1px;
  background-color: inherit;
  border-color: var(--light-text-color);
  outline: none;
  font-size: inherit;
  font-family: inherit;
  width: 2em;
}

.button {
  margin: auto;
  width: 120px;
  min-width: 100px;
  padding: var(--button-padding);
  background-color: var(--primary-accent-color);
  color: var(--invert-text-color);
  cursor: pointer;
  transition: var(--hover-color-transition);
  text-align: center;
}

.button:hover {
  background-color: var(--secondary-accent-color);
  color: var(--text-color);
}

.button-success {
  color: white !important;
  background-color: var(--success-color) !important;
}

.button-reject {
  color: white !important;
  background-color: var(--reject-color) !important;
}

.button-warn {
  color: black !important;
  background-color: var(--warn-color) !important;
}

.button-disabled,
.button-disabled:hover {
  background-color: var(--accent-bg-color) !important;
  color: var(--light-text-color) !important;
  cursor: default;
}

.textButton:hover {
  cursor: pointer;
  color: var(--primary-accent-color);
}

.lightButton {
  background-color: var(--secondary-bg-color);
  color: var(--text-color);
}

.lightButton:hover {
  cursor: pointer;
}

.basic-table {
  width: 100%;
}

.basic-table td {
  padding: 1em;
}

td.cell-reject {
  border: 1px solid var(--reject-color) !important;
  /* !important for matrices page */
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.round-outline {
  border: 1px solid;
  border-radius: 20px;
}

.invisible {
  visibility: hidden;
}

div.dark-mode-toggle {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  appearance: none;
  position: relative;
  background-color: var(--accent-bg-color);
}
div.dark-mode-toggle .slider {
  background-color: var(--primary-accent-color);
  height: 100%;
  width: 50%;
  border-radius: 50%;
  right: 50%;
  position: absolute;
  transition: 0.25s;
}
div.dark-mode-toggle > input[type=checkbox] {
  position: absolute;
  height: calc(100% + 40px);
  width: calc(100% + 40px);
  top: -20px;
  left: -20px;
  z-index: 2;
  margin: 0;
  appearance: none;
  cursor: pointer;
  background: none;
  padding: 8px;
}
div.dark-mode-toggle > input[type=checkbox]:focus-visible {
  border: 2px solid var(--accent-color);
}
div.dark-mode-toggle input:checked ~ .slider {
  right: 0;
}

.dark-only {
  display: none;
}

.mobile-only {
  display: none;
}

.input-reject {
  border: 1px solid var(--reject-color) !important;
}

.line-chart-container {
  width: calc(100% - 24px);
  margin-bottom: 1em;
  background-color: var(--secondary-bg-color);
  display: grid;
  padding-right: 24px;
  grid-auto-columns: auto 1fr;
}
.line-chart-container .line-chart-title-container {
  grid-column: 1/span 2;
  grid-row: 1;
}
.line-chart-container .line-chart-x-axis {
  grid-column: 2;
  grid-row: 3;
  position: relative;
}
.line-chart-container .line-chart-y-axis {
  grid-column: 1;
  grid-row: 2;
  position: relative;
}
.line-chart-container .line-chart-x-axis-division {
  text-align: center;
  position: absolute;
  top: 0;
  transform: translate(-50%, 0);
  padding-top: var(--line-chart-axis-value-padding);
  white-space: nowrap;
}
.line-chart-container .line-chart-y-axis-division {
  text-align: right;
  position: absolute;
  right: 0;
  transform: translate(0, 50%);
  padding-right: var(--line-chart-axis-value-padding);
  white-space: nowrap;
}
.line-chart-container .line-chart-title {
  margin: 0;
  padding: 0.5em;
  text-align: center;
}
.line-chart-container canvas {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 500px;
  background-color: var(--secondary-bg-color);
  border: 1px solid var(--accent-bg-color);
}

@media only screen and (max-width: 770px) {
  #hamImage {
    display: block;
  }

  .mobile-only {
    display: inherit;
  }

  .desktop-only {
    display: none !important;
  }

  .horizontal-grid.squash-mobile {
    display: block;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* HAM MENU & HEADER COMPLETE */
    /* SPECIFIC - index.html */
    /* SPECIFIC - Vectors.html */
    /* GENERAL */
    /* General dark inverting */
  }
  :root:not(.light) nav#desktop-header {
    color: var(--accent-color);
    background-color: var(--primary-bg-color);
  }
  :root:not(.light) nav#desktop-header a:hover {
    text-decoration-color: white;
  }
  :root:not(.light) nav#desktop-header #header-logo {
    filter: invert(1);
  }
  :root:not(.light) nav#desktop-header #header-resume-button {
    border: 1px solid var(--primary-accent-color);
  }
  :root:not(.light) nav#desktop-header #header-title {
    color: var(--text-color);
  }
  :root:not(.light) nav#side-menu #side-menu-content .side-menu-category-button {
    background-color: var(--accent-bg-color);
    color: white;
  }
  :root:not(.light) nav#side-menu #side-menu-content .side-menu-category-button.active {
    background-color: var(--accent-bg-color-hover);
  }
  :root:not(.light) nav#side-menu #side-menu-content .side-menu-category-button:hover {
    background-color: var(--accent-bg-color-hover);
  }
  :root:not(.light) nav#side-menu #side-menu-content .side-menu-item a:hover {
    color: var(--tertiary-accent-color);
  }
  :root:not(.light) nav#side-menu #side-menu-content #side-menu-end-button > img {
    filter: invert(10%) saturate(6520%) hue-rotate(247deg) brightness(71%) contrast(135%);
  }
  :root:not(.light) .image-container .image.site-logo {
    filter: invert(1);
  }
  :root:not(.light) body {
    background-color: var(--primary-bg-color);
  }
  :root:not(.light) #loadingScreen img {
    filter: invert(1);
  }
  :root:not(.light) a:link {
    color: var(--primary-accent-color);
  }
  :root:not(.light) a:visited {
    color: var(--light-text-color);
  }
  :root:not(.light) #main {
    color: var(--text-color);
  }
  :root:not(.light) #side-menu {
    background-color: var(--secondary-bg-color);
    color: var(--accent-color);
  }
  :root:not(.light) #side-menu h1 {
    color: var(--text-color);
  }
  :root:not(.light) #side-menu a:hover {
    text-decoration-color: white;
  }
  :root:not(.light) #side-menu-opener > img {
    filter: brightness(100);
  }
  :root:not(.light) .showcase-item-container {
    background-color: var(--secondary-bg-color) !important;
    color: var(--text-color) !important;
  }
  :root:not(.light) .calculation p.clickable {
    color: var(--primary-accent-color) !important;
  }
  :root:not(.light) .content {
    color: var(--text-color);
  }
  :root:not(.light) .content h1 {
    max-width: 980px;
    margin: auto;
    color: var(--text-color);
  }
  :root:not(.light) .content table td {
    color: var(--text-color);
  }
  :root:not(.light) #main {
    background-color: var(--primary-bg-color);
  }
  :root:not(.light) input {
    background-color: inherit;
    border-color: var(--accent-color);
    color: inherit;
  }
  :root:not(.light) .button {
    color: var(--invert-text-color);
    background-color: var(--primary-accent-color);
    border: 1px solid var(--accent-color);
  }
  :root:not(.light) .button:hover {
    background-color: var(--secondary-accent-color);
    color: var(--text-color);
  }
  :root:not(.light) .dark-invert {
    color: var(--text-color) !important;
  }
  :root:not(.light) .dark-invert:hover {
    color: var(--secondary-accent-color) !important;
  }
  :root:not(.light) .dark-only {
    display: unset;
  }
  :root:not(.light) .dark-none {
    display: none !important;
  }
  :root:not(.light) .dark-invert-filter {
    filter: invert(1);
  }
  :root:not(.light) #side-menu-end-button {
    filter: invert(1);
  }
  :root:not(.light) .popup-body {
    box-shadow: 0 0 10000px 10000px #000b !important;
  }
  :root:not(.light) .experience-image.dark-none {
    display: none;
  }
  :root:not(.light) .experience-image.dark-only {
    display: block !important;
  }
  :root:not(.light) .emwaves-main #electric-field-dropdown:hover {
    color: #00eeff;
  }
}
:root.dark {
  /* HAM MENU & HEADER COMPLETE */
  /* SPECIFIC - index.html */
  /* SPECIFIC - Vectors.html */
  /* GENERAL */
  /* General dark inverting */
}
:root.dark nav#desktop-header {
  color: var(--accent-color);
  background-color: var(--primary-bg-color);
}
:root.dark nav#desktop-header a:hover {
  text-decoration-color: white;
}
:root.dark nav#desktop-header #header-logo {
  filter: invert(1);
}
:root.dark nav#desktop-header #header-resume-button {
  border: 1px solid var(--primary-accent-color);
}
:root.dark nav#desktop-header #header-title {
  color: var(--text-color);
}
:root.dark nav#side-menu #side-menu-content .side-menu-category-button {
  background-color: var(--accent-bg-color);
  color: white;
}
:root.dark nav#side-menu #side-menu-content .side-menu-category-button.active {
  background-color: var(--accent-bg-color-hover);
}
:root.dark nav#side-menu #side-menu-content .side-menu-category-button:hover {
  background-color: var(--accent-bg-color-hover);
}
:root.dark nav#side-menu #side-menu-content .side-menu-item a:hover {
  color: var(--tertiary-accent-color);
}
:root.dark nav#side-menu #side-menu-content #side-menu-end-button > img {
  filter: invert(10%) saturate(6520%) hue-rotate(247deg) brightness(71%) contrast(135%);
}
:root.dark .image-container .image.site-logo {
  filter: invert(1);
}
:root.dark body {
  background-color: var(--primary-bg-color);
}
:root.dark #loadingScreen img {
  filter: invert(1);
}
:root.dark a:link {
  color: var(--primary-accent-color);
}
:root.dark a:visited {
  color: var(--light-text-color);
}
:root.dark #main {
  color: var(--text-color);
}
:root.dark #side-menu {
  background-color: var(--secondary-bg-color);
  color: var(--accent-color);
}
:root.dark #side-menu h1 {
  color: var(--text-color);
}
:root.dark #side-menu a:hover {
  text-decoration-color: white;
}
:root.dark #side-menu-opener > img {
  filter: brightness(100);
}
:root.dark .showcase-item-container {
  background-color: var(--secondary-bg-color) !important;
  color: var(--text-color) !important;
}
:root.dark .calculation p.clickable {
  color: var(--primary-accent-color) !important;
}
:root.dark .content {
  color: var(--text-color);
}
:root.dark .content h1 {
  max-width: 980px;
  margin: auto;
  color: var(--text-color);
}
:root.dark .content table td {
  color: var(--text-color);
}
:root.dark #main {
  background-color: var(--primary-bg-color);
}
:root.dark input {
  background-color: inherit;
  border-color: var(--accent-color);
  color: inherit;
}
:root.dark .button {
  color: var(--invert-text-color);
  background-color: var(--primary-accent-color);
  border: 1px solid var(--accent-color);
}
:root.dark .button:hover {
  background-color: var(--secondary-accent-color);
  color: var(--text-color);
}
:root.dark .dark-invert {
  color: var(--text-color) !important;
}
:root.dark .dark-invert:hover {
  color: var(--secondary-accent-color) !important;
}
:root.dark .dark-only {
  display: unset;
}
:root.dark .dark-none {
  display: none !important;
}
:root.dark .dark-invert-filter {
  filter: invert(1);
}
:root.dark #side-menu-end-button {
  filter: invert(1);
}
:root.dark .popup-body {
  box-shadow: 0 0 10000px 10000px #000b !important;
}
:root.dark .experience-image.dark-none {
  display: none;
}
:root.dark .experience-image.dark-only {
  display: block !important;
}
:root.dark .emwaves-main #electric-field-dropdown:hover {
  color: #00eeff;
}