/*
The default theme is dark.
SCSS variables (`$black`) are not affected by scripts. (Inside code blocks, ...)
CSS variables (`var(--black)`) are affected by scripts. (Everywhere else.)
*/
:root {
  --black: #000000;
  --black-compl: #ffffff;
  --black-trans: #00000060;
  --black-compl-trans: #ffffff60;
  --dark: #404040;
  --dark-compl: #bfbfbf;
  --dark-trans: #40404060;
  --dark-compl-trans: #bfbfbf60;
  --gray: #808080;
  --gray-compl: #7f7f7f;
  --gray-trans: #80808060;
  --gray-compl-trans: #7f7f7f60;
  --lightgray: #c0c0c0;
  --lightgray-compl: #3f3f3f;
  --lightgray-trans: #c0c0c060;
  --lightgray-compl-trans: #3f3f3f60;
  --white: #ffffff;
  --white-compl: #000000;
  --white-trans: #ffffff60;
  --white-compl-trans: #00000060;
  --red: #c02020;
  --red-compl: #3fdfdf;
  --red-trans: #c0202060;
  --red-compl-trans: #3fdfdf60;
  --green: #20c020;
  --green-compl: #df3fdf;
  --green-trans: #20c02060;
  --green-compl-trans: #df3fdf60;
  --slateblue: #4040c0;
  --slateblue-compl: #bfbf3f;
  --slateblue-trans: #4040c060;
  --slateblue-compl-trans: #bfbf3f60;
  --blue: #2020c0;
  --blue-compl: #dfdf3f;
  --blue-trans: #2020c060;
  --blue-compl-trans: #dfdf3f60;
  --aqua: #40c0ff;
  --aqua-compl: #bf3f00;
  --aqua-trans: #40c0ff60;
  --aqua-compl-trans: #bf3f0060;
  --emerald: #40c040;
  --emerald-compl: #bf3fbf;
  --emerald-trans: #40c04060;
  --emerald-compl-trans: #bf3fbf60;
  --turquoise: #40ffc0;
  --turquoise-compl: #bf003f;
  --turquoise-trans: #40ffc060;
  --turquoise-compl-trans: #bf003f60;
  --seagreen: #20c0c0;
  --seagreen-compl: #df3f3f;
  --seagreen-trans: #20c0c060;
  --seagreen-compl-trans: #df3f3f60;
  --violet: #c040ff;
  --violet-compl: #3fbf00;
  --violet-trans: #c040ff60;
  --violet-compl-trans: #3fbf0060;
  --pink: #ff40c0;
  --pink-compl: #00bf3f;
  --pink-trans: #ff40c060;
  --pink-compl-trans: #00bf3f60;
  --grassgreen: #c0ff40;
  --grassgreen-compl: #3f00bf;
  --grassgreen-trans: #c0ff4060;
  --grassgreen-compl-trans: #3f00bf60;
  --gold: #ffc040;
  --gold-compl: #003fbf;
  --gold-trans: #ffc04060;
  --gold-compl-trans: #003fbf60;
  --brown: #c08020;
  --brown-compl: #3f7fdf;
  --brown-trans: #c0802060;
  --brown-compl-trans: #3f7fdf60;
}

:root {
  --sidebar-width: min(450px, 60%);
}

@media print {
  nav {
    display: none;
  }
}
nav {
  background-color: var(--black-trans);
  transition: background-color 0.5s ease-out;
  border: 0.143rem solid var(--gray);
  z-index: 1;
  position: fixed;
  right: 1%;
  bottom: 5%;
  font-size: 1.571rem;
}
nav p {
  padding: 0;
  margin: 0;
}
nav a {
  cursor: pointer;
  color: var(--white-trans);
  text-decoration: none;
  transition: color 0.5s ease-out;
  padding: 0.571rem;
}
nav a:hover {
  color: var(--white);
  transition: color 0.5s ease-out;
}
nav ::selection {
  background-color: #0000;
}
nav div#settingsmenubg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}
nav div#settingsmenu {
  background-color: var(--black);
  font-size: 1rem;
  color: var(--white);
}
nav div#settingsmenu .align-right {
  text-align: right;
}
nav div#settingsmenu .align-left {
  text-align: left;
}
nav div#settingsmenu .size-giant {
  font-size: 1.571rem;
}
nav div#settingsmenu table {
  border: none;
  border-collapse: collapse;
}
nav div#settingsmenu table th {
  background-color: var(--gray);
  text-align: right;
}
nav div#settingsmenu table td {
  padding: 0.571rem;
}

nav:hover {
  background-color: var(--black);
  transition: background-color 0.5s ease-out;
}