@font-face {
  font-family: "Daydream";
  src: url(/assets/fonts/DaydreamDEMO.otf);
}
@font-face {
  font-family: "PixelOperator-Mono";
  src: url(/assets/fonts/PixelOperatorMono8-Bold.ttf);
}
@font-face {
  font-family: "PixelOperator";
  src: url(/assets/fonts/PixelOperator8-Bold.ttf);
}
:root {
  --web: #000000;
  --text_color: #ffffff;
  --text_shadow: #000000;
  --star_background: url("/assets/images/ui/StarTextBackground.png");
}

.dreamlike {
  --web_background: #ffcdbd;
  --web_background_image: url("/assets/images/ui/WebBackground_Dreamlike.png");
  --web_border: #d56c33;
  --web_button: #fd9ee4;
  --web_button_2: #ffb4c9;
  --web_button_highlight: #aa96d0;
  --web_button_shadow: #c1508d;
  --theme_image: url("/assets/images/ui/ThemeSelector_Moon.png");
  --content_background_image: linear-gradient(rgb(120 75 63 / 0.7), rgb(120 75 63 / 0.7)), var(--star_background);
  --content_background: rgb(119 77 52 / 0.23);
  --content_border: 6px #da6e5a solid ;
}

.starry {
  --web_background: #000000;
  --web_background_image: url("/assets/images/ui/WebBackground_Starry.png");
  --web_border: #151a6e;
  --web_button: #130851;
  --web_button_2: #340d77;
  --web_button_highlight: #aa96d0;
  --web_button_shadow: #151a6e;
  --theme_image: url("/assets/images/ui/ThemeSelector_Sun.png");
  --content_background_image: linear-gradient(rgb(87 52 119 / 0.9), rgb(87 52 119 / 0.9)), var(--star_background);
  --content_background: rgb(110 52 119 / 0.23);
  --content_border: 6px #ba90e3 solid ;
}

html, body, div, button {
  margin: 0;
  border-width: 0;
}

body, div, button {
  color: var(--text_color);
  font-family: "Daydream", sans-serif;
  font-size: 16px;
}

body {
  background-color: var(--web_background);
  background-image: var(--web_background_image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-attachment: fixed;
}

header {
  margin: 0 auto;
  width: 85%;
}

nav {
  display: flex;
  width: 100%;
  height: 54px;
}

nav > * {
  flex-grow: 1;
}

nav > div:first-child {
  border-radius: 15px 0 0 15px;
  min-width: 16px;
}

nav > div:last-child {
  border-radius: 0 15px 15px 0;
  min-width: 16px;
}

.shiny, nav > * {
  background-color: var(--web_button);
  background-image: linear-gradient(var(--web_button_2) 50%, var(--web_button) 75%, var(--web_button_2));
  box-shadow: inset 0 0 10px var(--web_button_shadow);
  color: white;
  text-shadow: 1px 1px black;
  text-align: center;
  display: block;
  align-content: center;
  user-select: none;
}

.shiny:hover, nav > a:hover {
  background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.1) 20%, transparent), linear-gradient(var(--web_button_2) 50%, var(--web_button) 75%, var(--web_button_2));
}

.shiny:active, nav > a:active {
  background-image: linear-gradient(var(--web_button) 50%, var(--web_button_2) 75%, var(--web_button));
}

.vr {
  width: 2px;
  flex-grow: 0;
  background-color: var(--web_border);
  background-image: none;
}

main {
  margin: 16px auto;
  width: 85%;
  display: flex;
}

.content {
  background-color: var(--content_background);
  background-image: var(--content_background_image);
  background-size: 64px;
  image-rendering: crisp-edges;
  border: var(--content_border);
  margin: 16px 8px;
  padding: 8px;
}

.vcontainter {
  display: flex;
  flex-direction: column;
}

.focus {
  flex-grow: 2;
  max-width: 60%;
}

.side {
  flex-grow: 1;
  max-width: 20%;
}

.content > h1 {
  text-shadow: 2px 2px black;
  font-size: 16px;
}

.content > h2 {
  text-shadow: 2px 2px black;
  font-size: 14px;
}

.content > p {
  font-family: "PixelOperator", sans-serif;
  font-size: 12px;
  text-shadow: 1px 1px black;
}

footer {
  height: 60px;
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--web_background);
  justify-content: center;
  padding-top: 5px;
  text-shadow: 1px 1px black;
}

.theme_selector {
  border-radius: 48px;
  height: 48px;
  width: 48px;
}

.theme_selector > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/*# sourceMappingURL=main.css.map */