/* ==============================
   CSS VARIABLES (THEME SYSTEM)
   ============================== */
:root {
  /* Base dark theme (white accents) */
  --CornerColor: #a3a3a3;
  --BorderColor: #212121;
  --accentColor: #0f0f0f;
  --BackgroundColor: #050505;
  --ButtonColor: #0f0f0f;
  --ButtonHoverColor: #212121;
  --TextColor: #f1f1f1;
  --TextGlowColor: #777777;
  --CommOpenColor: #f00;
  --CommCloseColor: #f00;
  --ButtonCount: 1;
}

/* ==============================
   BASE & RESET
   ============================== */
* {
  overflow: hidden;
  box-sizing: border-box;
  font-family: "proFont";
  text-transform: uppercase;
  text-shadow: var(--TextGlowColor) 0 0 1vh;
  color: var(--TextColor);
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  scrollbar-width: none;
}

body {
  height: 100svh;
  margin: 0;
  border: 1svh solid var(--BackgroundColor);
  outline: 1px solid white;
  position: relative;
  background-color: var(--BackgroundColor);
}

html {
  background-color: var(--BackgroundColor);
}

/* ==============================
   TYPOGRAPHY & LINKS
   ============================== */
a {
  text-decoration: none;
  color: #8f8;
}

h1 {
  all: unset;
  font-size: 10vh;
  text-align: center;
}

h2 {
  all: unset;
  font-size: 3vh;
  padding: 1vh;
  text-align: center;
}

h3 {
  all: unset;
  font-size: 2.5vh;
  text-align: center;
  background-color: var(--accentColor);
  height: 3.5vh;
  padding-top: 0.5vh;
}

::selection {
  background: var(--TextColor);
  color: var(--BackgroundColor);
}

.selectable {
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ==============================
   UTILITY CLASSES
   ============================== */
.hidden {
  display: none !important;
}

.shown {
  animation: flicker_frames 0.2s;
}

.outlined {
  border: 1px solid var(--BorderColor);
  background:
    linear-gradient(to right, var(--CornerColor) 1px, transparent 1px) 0 0,
    linear-gradient(to right, var(--CornerColor) 1px, transparent 1px) 0 100%,
    linear-gradient(to left, var(--CornerColor) 1px, transparent 1px) 100% 0,
    linear-gradient(to left, var(--CornerColor) 1px, transparent 1px) 100% 100%,
    linear-gradient(to bottom, var(--CornerColor) 1px, transparent 1px) 0 0,
    linear-gradient(to bottom, var(--CornerColor) 1px, transparent 1px) 100% 0,
    linear-gradient(to top, var(--CornerColor) 1px, transparent 1px) 0 100%,
    linear-gradient(to top, var(--CornerColor) 1px, transparent 1px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 4px 4px;
}

.bright_outlined {
  border: 1px solid white;
}

/* ==============================
   CRT EFFECT
   ============================== */
.crt {
  transform-origin: 50% 50%;
  content: "";
}

.crt::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  z-index: 2;
  pointer-events: none;
}

#crt_scan_fx {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(white, black, white);
  background-size: 100% 200%;
  mix-blend-mode: overlay;
  opacity: 0.2;
  pointer-events: none;
  animation: scan_scroll 7s linear infinite;
}

/* ==============================
   LANDING PAGE
   ============================== */
#landing {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 3vh;
  gap: 2vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--BackgroundColor);
}

#enter_button {
  width: 40vh;
  height: 6.4vh;
  background-color: var(--ButtonColor);
  text-align: center;
  vertical-align: middle;
  user-select: none;
  font-size: 5vh;
  cursor: pointer;
  pointer-events: all !important;
}

#enter_button:hover {
  background-color: var(--ButtonHoverColor);
}

/* ==============================
   UNFIT MESSAGE
   ============================== */
#display_unfit_message {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--BackgroundColor);
}

#display_unfit_message h1 {
  font-size: 9vw;
}

#display_unfit_message h2 {
  font-size: 3vw;
}

/* ==============================
   CONTROL PANEL (header)
   ============================== */
#control_panel {
  height: 100%;
  width: 60vh;
  display: flex;
  gap: 1vh;
}

#volume_slider_wrapper {
  padding: 1vh;
  height: 100%;
  flex: 1;
}

#volume_slider {
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--BackgroundColor);
  overflow: hidden;
  cursor: pointer;
}

#volume_slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 1vh;
  background-color: var(--accentColor);
}

#volume_slider::-moz-range-progress {
  width: 100%;
  height: 1vh;
  background-color: var(--TextColor);
}

#volume_slider::-moz-range-track {
  width: 100%;
  height: 1vh;
  background-color: var(--accentColor);
}

#volume_slider::-webkit-slider-thumb {
  appearance: none;
  width: 1vh;
  height: 3vh;
  margin-top: -1vh;
  background-color: var(--TextColor);
}

#volume_slider::-moz-range-thumb {
  width: 1vh;
  height: 3vh;
  border: 0;
  border-radius: 0;
  background-color: var(--TextColor);
}

/* Toggle buttons */
input[type=checkbox] {
  all: unset;
  height: 100%;
  aspect-ratio: 1;
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  outline: 1px solid var(--BorderColor);
  outline-offset: -1px;
  cursor: pointer;
}

#music_toggle {
  background-image: url("../img/button/music_off.svg");
}
#music_toggle:checked {
  background-image: url("../img/button/music_on.svg");
}

#crt_toggle {
  background-image: url("../img/button/crt_off.svg");
}
#crt_toggle:checked {
  background-image: url("../img/button/crt_on.svg");
}

#theme_toggle {
  background-image: url("../img/button/theme.png");
  background-size: 45% 45%;
}

.toggle:hover {
  background-color: var(--ButtonHoverColor);
}

.toggle:active {
  background-color: var(--CornerColor);
}

/* ==============================
   MAIN LAYOUT (grid)
   ============================== */
#wrapper {
  width: 100%;
  height: 100%;
  padding: 2vh;
  padding-top: 1vh;
  display: grid;
  grid-template-columns: 22.5vh auto;
  grid-template-rows: 6vh auto;
  grid-template-areas:
    "header header"
    "nav main";
  column-gap: 2vh;
  row-gap: 1vh;
  animation: wrapper_appear cubic-bezier(0,1,0,1) 1s;
}

@keyframes wrapper_appear {
  0% {
    background-color: white;
    filter: blur(6vh);
  }
  100% {
    filter: none;
  }
}

/* Header */
header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 2vh;
}

#site_title {
  font-size: 7vh;
}

#page_title {
  font-size: 5vh;
  flex: 2;
}

/* Main content area */
main {
  grid-area: main;
  position: relative;
  padding: 1vh;
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

#context {
  height: 5vh;
  padding: 1vh;
  padding-top: 0.2vh;
  flex-shrink: 0;
  font-size: 3.5vh;
  background-color: var(--accentColor);
}

.page {
  width: 100%;
  flex-grow: 1;
}

/* ==============================
   SIDEBAR (navigation)
   ============================== */
nav {
  grid-area: nav;
  display: flex;
  padding: 1vh;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
}

nav > div {
  width: 100%;
}

#nav_rose {
  aspect-ratio: 1;
  cursor: help;
}

#nav_rose::after {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/rose/head.gif");
  background-size: 100% 100%;
  background-position-x: 50%;
  content: "";
}

#nav_update {
  padding: 1vh;
  width: 100%;
  font-size: 1.8vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

#nav_comm_status {
  border: 1px solid #f00;
  background-color: #200;
  color: #f00;
  text-shadow: #f00 0 0 1vh;
  flex-grow: 1;
  text-align: center;
  padding: 0.5vh;
}

#nav_comm_status span {
  color: inherit;
  text-shadow: inherit;
  font-size: 3.2vh;
}

.nav_button {
  height: 3.8vh;
  padding-left: 0.5vh;
  padding-top: 0.3vh;
  text-align: left;
  font-size: 2.5vh;
  background-color: var(--ButtonColor);
  pointer-events: all !important;
  cursor: pointer;
  transition: all 0.03s ease-out;
  image-rendering: pixelated;
}

.nav_button:hover {
  background-color: var(--ButtonHoverColor);
  padding-left: 1.5vh;
}

.nav_button:active {
  background-color: var(--CornerColor);
}

/* ==============================
   PAGE: ABOUT
   ============================== */
#about {
  display: grid;
  grid-template-columns: auto 35vh;
  grid-template-rows: 66.5% auto;
  grid-template-areas:
    "greeting headshot"
    "greeting description";
  gap: 1vh;
}

#about_greeting {
  grid-area: greeting;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#about_greeting span {
  user-select: text;
}

#about_headshot {
  grid-area: headshot;
  width: 35vh;
}

#about_headshot::after {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/rose/profile.gif");
  background-size: auto 100%;
  background-position-x: 50%;
  content: "";
}

#about_description {
  grid-area: description;
  padding: 1vh;
  padding-top: 0.7vh;
  font-size: 2.5vh;
}

#about_description > li {
  width: 100%;
  text-align: right;
}

#about_description > li::before {
  float: left;
  content: attr(label) ":";
}

/* ==============================
   PAGE: GALLERY
   ============================== */
#gallery {
  position: relative;
}

#gallery_masonry {
  padding: 1vh;
  max-height: 100%;
  overflow: scroll;
  background-color: var(--accentColor);
}

#gallery_columns {
  display: flex;
  gap: 1vh;
}

.gallery_column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  overflow: visible;
}

.gallery_item_wrapper {
  perspective: 10vh;
  perspective-origin: 50% 50%;
  overflow: visible;
}

.gallery_item {
  transition: transform 0.1s ease-out;
  position: relative;
  flex-shrink: 0;
  padding: 1vh;
  cursor: pointer;
  transform-origin: center center;
  animation:
    gallery_appear_glow 2s cubic-bezier(0,1,0,1) forwards,
    gallery_appear 0.5s cubic-bezier(0,1,0,1) forwards;
  opacity: 0;
}

.gallery_thumbnail {
  width: 100%;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  filter: grayscale();
  transition: filter 1s ease-out;
}

.gallery_item:hover {
  background-color: var(--ButtonHoverColor);
  border: 1px solid white;
  transition: none;
}

.gallery_item:hover > .gallery_title {
  background-color: var(--ButtonHoverColor);
}

.gallery_item:hover > .gallery_thumbnail {
  filter: none;
  transition: none;
  border: 1px solid white;
}

.gallery_title {
  min-height: 4vh;
  margin-top: 1vh;
  padding: 0.5vh 0 0.5vh 1vh;
  font-size: 1.3vw;
  background-color: var(--ButtonColor);
  text-transform: none;
  text-align: center;
}

#gallery_mask {
  position: absolute;
  width: calc(100% - 2vh);
  height: calc(100% - 2px);
  top: 1px;
  left: 1vh;
  background-image: linear-gradient(to bottom,
      var(--accentColor),
      transparent 2%,
      transparent 98%,
      var(--accentColor));
  pointer-events: none;
}

/* ==============================
   ART VIEWER (overlay)
   ============================== */
#art_viewer {
  width: 100%;
  height: 100%;
  position: absolute;
  background: repeating-conic-gradient(#000000ee 0 25%, #0e0e0e88 0 50%) 50% / 4px 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--BorderColor);
}

#art_viewer_piece {
  width: auto;
  height: 80vh;
  image-rendering: pixelated;
  user-select: none;
  cursor: grab;
  outline: 1px solid white;
  outline-offset: 5px;
  box-shadow: rgba(0,0,0,0.8) 0 0 32px 32px;
  animation: art_viewer_pulse 1.0s cubic-bezier(0,1,0,1);
  background-color: rgba(0,0,0,0.7);
  background-size: 100% 100%;
  z-index: 5;
}

#art_viewer_piece:active {
  cursor: grabbing;
}

#art_viewer_directions {
  position: absolute;
  width: 100%;
  height: 20vh;
  text-align: center;
  top: 1vh;
  font-size: 3vh;
  background-image: linear-gradient(rgba(0,0,0,0.5), transparent);
  pointer-events: none;
}

#art_viewer_details {
  text-shadow: red 0 0 1vh !important;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: auto;
  bottom: 1vh;
  pointer-events: none;
  animation: art_viewer_pulse 1.0s cubic-bezier(0,1,0,1);
}

#art_viewer_title {
  font-size: 4vh;
  flex-shrink: 0;
  user-select: text;
  pointer-events: all;
  padding: 0 2vh;
}

/* ==============================
   PAGE: COMMISSION
   ============================== */
#commission {
  display: grid;
  grid-template-rows: 4vh auto 20vh;
  grid-template-columns: 70% calc(30% - 1vh);
  grid-template-areas:
    "status status"
    "selection info"
    "examples info";
  gap: 1vh;
}

#comm_status {
  grid-area: status;
  width: 100%;
  height: 4vh;
  border: 1px solid var(--CommOpenColor);
  background-color: color-mix(in srgb, var(--CommOpenColor), #000 90%);
  color: var(--CommOpenColor) !important;
  font-size: 3vh;
  text-align: center;
  text-shadow: #f00 0 0 1vh;
}

#comm_selection {
  grid-area: selection;
  padding: 1vh;
  display: flex;
  flex-direction: row;
  gap: 1vh;
  flex: 1;
}

#comm_info {
  grid-area: info;
  height: 100%;
  font-size: 2vh;
  display: flex;
  gap: 1vh;
  flex-direction: column;
}

.comm_info_box {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 1vh;
}

.comm_info_box::before {
  content: attr(label);
  text-align: center;
  font-size: 2.5vh;
  height: 3.4vh;
  color: var(--TextColor);
  text-shadow: var(--TextGlowColor) 0 0 1vh;
  background-color: var(--accentColor);
}

.comm_type {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  image-rendering: pixelated;
  background-position: center center;
  font-size: 3vw;
  text-align: center;
  padding-top: 4vh;
  filter: grayscale() brightness(0.2);
  flex: 1;
  text-shadow: #000 0 0 1vh;
  outline: 1px solid white;
  position: relative;
  transition: all 0.2s ease-out;
}

.comm_type::before {
  content: attr(commtype);
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  margin-bottom: 10vh;
}

.comm_type[commtype="aliased"] { background-image: url("../img/art/original/mariner.png"); }
.comm_type[commtype="sketched"] { background-image: url("../img/art/original/bug_sketch.png"); }
.comm_type[commtype="painted"] { background-image: url("../img/art/original/isabelle.png"); }

#comm_description {
  text-transform: none;
  flex-grow: 1;
}

#comm_pricing {
  text-align: left;
  font-size: 2.5vh;
  display: flex;
  flex-direction: column;
}

#comm_pricing span {
  flex-grow: 1;
  text-align: right;
  font-size: 5vh;
  color: var(--CommOpenColor);
  text-shadow: #f00 0 0 2vh;
}

#comm_pricing div {
  font-size: 3vh;
  display: flex;
  align-items: center;
}

#comm_contact {
  grid-area: contact;
  text-align: center;
  font-size: 4.5vh;
  color: var(--CommOpenColor);
  text-shadow: #f00 0 0 1vh;
}

#comm_examples {
  padding: 1vh 0;
  overflow-y: hidden;
  position: relative;
  pointer-events: none;
}

#comm_examples_scroller {
  display: flex;
  padding: 0 1.5vh;
  align-items: center;
  gap: 2vh;
  overflow-x: scroll;
  height: 100%;
  align-self: start;
  pointer-events: all;
  scroll-behavior: smooth;
}

#comm_examples_scroller img {
  width: auto;
  height: 94%;
  outline: 1px solid var(--ButtonHoverColor);
  outline-offset: 3px;
  flex-shrink: 0;
  cursor: pointer;
  filter: grayscale();
  transition: filter 0.5s ease-out, outline-color 2s cubic-bezier(0,1,0,1);
  animation:
    example_appear_glow 2s cubic-bezier(0,1,0,1) forwards,
    gallery_appear 0.5s cubic-bezier(0,1,0,1) forwards;
  transform: scaleY(0);
}

#comm_examples_scroller img:hover {
  filter: none;
  outline-color: white;
  transition: none;
}

#comm_examples_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, black, transparent 2%, transparent 98%, black);
}

.unavailable::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 112%;
  content: "UNAVAILABLE";
  align-content: center;
  font-size: 4vh;
  background-color: rgba(0,0,0,0.5);
}

/* ==============================
   PAGE: BLOG
   ============================== */
#blog {
  position: relative;
}

#blog_list {
  padding: 1vh;
  height: 100%;
  overflow: scroll;
}

.blog_item {
  width: 100%;
  height: auto;
  display: grid;
  padding: 1vh;
  animation: blog_appear_glow 3s cubic-bezier(0,1,0,1);
}

.blog_item_header {
  background-color: var(--accentColor);
  font-size: 3vh;
  padding: 0.5vh 0;
  display: flex;
}

.blog_item_title {
  flex-grow: 1;
  padding: 0 1vh;
  user-select: text;
}

.blog_item_date {
  padding: 0 1vh;
  user-select: text;
}

.blog_item_body {
  font-size: 2vh;
  text-transform: none;
  padding: 0.5vh;
  user-select: text;
}

/* ==============================
   PAGE: LINKS
   ============================== */
#links {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.link {
  width: 100%;
  padding: 3vh;
  background-color: var(--ButtonColor);
  display: flex;
  align-items: center;
  flex: 1;
  cursor: pointer;
  transform: scaleY(0);
  animation:
    link_appear 0.1s ease-out forwards,
    link_appear_glow 2s cubic-bezier(0,1,0,1);
  transition: background-color 0.5s ease-out;
}

.link:hover {
  background-color: var(--ButtonHoverColor) !important;
  transition: background-color 0s;
}

.link_icon {
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.link_title {
  padding: 0 2vh;
  font-size: 3vh;
}

.link_handle {
  text-align: right;
  font-size: 3vh;
  flex-grow: 1;
}

/* ==============================
   PAGE: CHRONICLE
   ============================== */
#chronicle_container {
  display: flex;
  height: 100%;
  width: 100%;
  gap: 1vh;
  padding: 1vh;
  background-color: var(--accentColor);
}

#chronicle_sidebar {
  width: 20%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  overflow-y: auto;
  padding-right: 0.5vh;
}

.chronicle_button {
  background-color: var(--ButtonColor);
  padding: 1.5vh 1vh;
  text-align: center;
  font-size: 2.2vh;
  cursor: pointer;
  transition: background-color 0.1s;
  flex-shrink: 0;
}

.chronicle_button:hover {
  background-color: var(--ButtonHoverColor);
}

.chronicle_button.active {
  background-color: var(--CornerColor);
  border-color: white;
}

#chronicle_content {
  flex: 1;
  background-color: #000;
  border: 1px solid var(--BorderColor);
}

#chronicle_iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: #111;
}

/* ==============================
   ANIMATIONS
   ============================== */
@keyframes link_appear {
  0% { transform: scaleY(0); width: 0%; }
  100% { transform: none; width: 100%; }
}

@keyframes link_appear_glow {
  0% { filter: contrast(0) brightness(3) blur(0.7vh); background-color: var(--CornerColor); }
  100% { filter: none; background-color: var(--ButtonColor); }
}

@keyframes blog_appear_glow {
  0% { filter: contrast(0) brightness(3) blur(0.7vh); background-color: var(--CornerColor); }
  100% { filter: none; background-color: none; }
}

@keyframes gallery_appear_glow {
  0% { filter: contrast(0) brightness(3) blur(4vh); background-color: var(--CornerColor); }
  100% { filter: none; background-color: var(--BackgroundColor); }
}

@keyframes gallery_appear {
  0% { opacity: 1; transform: scaleX(1) scaleY(0.04); }
  100% { opacity: 1; transform: none; }
}

@keyframes example_appear_glow {
  0% { filter: grayscale() contrast(0) brightness(3) blur(1vh); background-color: var(--CornerColor); }
  100% { filter: grayscale(); background-color: var(--BackgroundColor); }
}

@keyframes scan_scroll {
  0% { background-position-y: 0vh; }
  100% { background-position-y: 200vh; }
}

@keyframes flicker_frames {
  0% { filter: brightness(4); opacity: 0.0; }
  20% { opacity: 1; }
  40% { opacity: 0.5; }
  60% { opacity: 1; }
  80% { opacity: 0.7; }
  100% { filter: none; opacity: unset; }
}

@keyframes art_viewer_pulse {
  0% { outline-width: 80px; outline-offset: 50px; filter: brightness(10) blur(16px); }
  100% { outline-width: 1px; outline-offset: 5px; filter: none; }
}

/* ==============================
   FONTS
   ============================== */
@font-face {
  font-family: "proFont";
  src: local("proFont"), url("../font/proFont.woff2") format("woff2");
}/* ==============================
   CSS VARIABLES (THEME SYSTEM)
   ============================== */
:root {
	/* Base dark theme (white accents) */
	--CornerColor: #a3a3a3;
	--BorderColor: #212121;
	--accentColor: #0f0f0f;
	--BackgroundColor: #050505;
	--ButtonColor: #0f0f0f;
	--ButtonHoverColor: #212121;
	--TextColor: #f1f1f1;
	--TextGlowColor: #777777;
	--CommOpenColor: #f00;
	--CommCloseColor: #f00;
	--ButtonCount: 1;
  }
  
  /* ----- Theme Variations (background stays black) ----- */
  body.theme-white {
    --CornerColor: #a1a1aa;
    --BorderColor: #2a2a2e;
    --accentColor: #18181b;
    --ButtonColor: #141417;
    --ButtonHoverColor: #1c1c21;
    --TextColor: #e4e4e7;
    --TextGlowColor: rgba(255,255,255,0.18);
    --CommOpenColor: #f87171;
  }
  body.theme-red {
    --CornerColor: #b91c1c;
    --BorderColor: #3b1f1f;
    --accentColor: #7f1d1d;
    --ButtonColor: #1a1111;
    --ButtonHoverColor: #251515;
    --TextColor: #fca5a5;
    --TextGlowColor: rgba(239,68,68,0.22);
    --CommOpenColor: #ef4444;
  }
  body.theme-blue {
    --CornerColor: #14b8a6;
    --BorderColor: #1f3a3a;
    --accentColor: #0f766e;
    --ButtonColor: #0b1c1c;
    --ButtonHoverColor: #123232;
    --TextColor: #99f6e4;
    --TextGlowColor: rgba(20,184,166,0.22);
    --CommOpenColor: #2dd4bf;
  }
  body.theme-yellow {
    --CornerColor: #ca8a04;
    --BorderColor: #3f3314;
    --accentColor: #854d0e;
    --ButtonColor: #1f1a10;
    --ButtonHoverColor: #2a2213;
    --TextColor: #fde68a;
    --TextGlowColor: rgba(234,179,8,0.22);
    --CommOpenColor: #facc15;
  }
  body.theme-green {
    --CornerColor: #16a34a;
    --BorderColor: #1f3a2a;
    --accentColor: #166534;
    --ButtonColor: #0f1f17;
    --ButtonHoverColor: #163324;
    --TextColor: #86efac;
    --TextGlowColor: rgba(34,197,94,0.22);
    --CommOpenColor: #4ade80;
  }
  body.theme-purple {
    --CornerColor: #8b5cf6;
    --BorderColor: #2e1f45;
    --accentColor: #5b21b6;
    --ButtonColor: #140f1f;
    --ButtonHoverColor: #1d1530;
    --TextColor: #c4b5fd;
    --TextGlowColor: rgba(139,92,246,0.22);
    --CommOpenColor: #a78bfa;
  }
  
  /* ==============================
	 BASE & RESET
	 ============================== */
  * {
	overflow: hidden;
	box-sizing: border-box;
	font-family: "proFont";
	text-transform: uppercase;
	text-shadow: var(--TextGlowColor) 0 0 1vh;
	color: var(--TextColor);
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	scrollbar-width: none;
  }
  
  body {
	height: 100svh;
	margin: 0;
	border: 1svh solid var(--BackgroundColor);
	outline: 1px solid white;
	position: relative;
	background-color: var(--BackgroundColor);
  }
  
  html {
	background-color: var(--BackgroundColor);
  }
  
  /* ==============================
	 TYPOGRAPHY & LINKS
	 ============================== */
  a {
	text-decoration: none;
	color: #8f8;
  }
  
  h1 {
	all: unset;
	font-size: 10vh;
	text-align: center;
  }
  
  h2 {
	all: unset;
	font-size: 3vh;
	padding: 1vh;
	text-align: center;
  }
  
  h3 {
	all: unset;
	font-size: 2.5vh;
	text-align: center;
	background-color: var(--accentColor);
	height: 3.5vh;
	padding-top: 0.5vh;
  }
  
  ::selection {
	background: var(--TextColor);
	color: var(--BackgroundColor);
  }
  
  .selectable {
	-moz-user-select: text;
	-khtml-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;
  }
  
  /* ==============================
	 UTILITY CLASSES
	 ============================== */
  .hidden {
	display: none !important;
  }
  
  .shown {
	animation: flicker_frames 0.2s;
  }
  
  .outlined {
	border: 1px solid var(--BorderColor);
	background:
	  linear-gradient(to right, var(--CornerColor) 1px, transparent 1px) 0 0,
	  linear-gradient(to right, var(--CornerColor) 1px, transparent 1px) 0 100%,
	  linear-gradient(to left, var(--CornerColor) 1px, transparent 1px) 100% 0,
	  linear-gradient(to left, var(--CornerColor) 1px, transparent 1px) 100% 100%,
	  linear-gradient(to bottom, var(--CornerColor) 1px, transparent 1px) 0 0,
	  linear-gradient(to bottom, var(--CornerColor) 1px, transparent 1px) 100% 0,
	  linear-gradient(to top, var(--CornerColor) 1px, transparent 1px) 0 100%,
	  linear-gradient(to top, var(--CornerColor) 1px, transparent 1px) 100% 100%;
	background-repeat: no-repeat;
	background-size: 4px 4px;
  }
  
  .bright_outlined {
	border: 1px solid white;
  }
  
  /* ==============================
	 CRT EFFECT
	 ============================== */
  .crt {
	transform-origin: 50% 50%;
	content: "";
  }
  
  .crt::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background:
	  linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
	  linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	background-size: 100% 2px, 3px 100%;
	z-index: 2;
	pointer-events: none;
  }
  
  #crt_scan_fx {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(white, black, white);
	background-size: 100% 200%;
	mix-blend-mode: overlay;
	opacity: 0.2;
	pointer-events: none;
	animation: scan_scroll 7s linear infinite;
  }
  
  /* ==============================
	 LANDING PAGE
	 ============================== */
  #landing {
	display: flex;
	width: 100%;
	height: 100%;
	font-size: 3vh;
	gap: 2vh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: var(--BackgroundColor);
  }
  
  #enter_button {
	width: 40vh;
	height: 6.4vh;
	background-color: var(--ButtonColor);
	text-align: center;
	vertical-align: middle;
	user-select: none;
	font-size: 5vh;
	cursor: pointer;
	pointer-events: all !important;
  }
  
  #enter_button:hover {
	background-color: var(--ButtonHoverColor);
  }
  
  /* ==============================
	 UNFIT MESSAGE
	 ============================== */
  #display_unfit_message {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--BackgroundColor);
  }
  
  #display_unfit_message h1 {
	font-size: 9vw;
  }
  
  #display_unfit_message h2 {
	font-size: 3vw;
  }
  
  /* ==============================
	 CONTROL PANEL (header)
	 ============================== */
  #control_panel {
	height: 100%;
	width: 60vh;
	display: flex;
	gap: 1vh;
  }
  
  #volume_slider_wrapper {
	padding: 1vh;
	height: 100%;
	flex: 1;
  }
  
  #volume_slider {
	appearance: none;
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: var(--BackgroundColor);
	overflow: hidden;
	cursor: pointer;
  }
  
  #volume_slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 1vh;
	background-color: var(--accentColor);
  }
  
  #volume_slider::-moz-range-progress {
	width: 100%;
	height: 1vh;
	background-color: var(--TextColor);
  }
  
  #volume_slider::-moz-range-track {
	width: 100%;
	height: 1vh;
	background-color: var(--accentColor);
  }
  
  #volume_slider::-webkit-slider-thumb {
	appearance: none;
	width: 1vh;
	height: 3vh;
	margin-top: -1vh;
	background-color: var(--TextColor);
  }
  
  #volume_slider::-moz-range-thumb {
	width: 1vh;
	height: 3vh;
	border: 0;
	border-radius: 0;
	background-color: var(--TextColor);
  }
  
  /* Toggle buttons */
  input[type=checkbox] {
	all: unset;
	height: 100%;
	aspect-ratio: 1;
	background-size: 60% 60%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	outline: 1px solid var(--BorderColor);
	outline-offset: -1px;
	cursor: pointer;
  }
  
  #music_toggle {
	background-image: url("../img/button/music_off.svg");
  }
  #music_toggle:checked {
	background-image: url("../img/button/music_on.svg");
  }
  
  #crt_toggle {
	background-image: url("../img/button/crt_off.svg");
  }
  #crt_toggle:checked {
	background-image: url("../img/button/crt_on.svg");
  }
  
  #theme_toggle {
	background-image: url("../img/button/theme.png");
  }
  
  .toggle:hover {
	background-color: var(--ButtonHoverColor);
  }
  
  .toggle:active {
	background-color: var(--CornerColor);
  }
  
  /* ==============================
	 MAIN LAYOUT (grid)
	 ============================== */
  #wrapper {
	width: 100%;
	height: 100%;
	padding: 2vh;
	padding-top: 1vh;
	display: grid;
	grid-template-columns: 22.5vh auto;
	grid-template-rows: 6vh auto;
	grid-template-areas:
	  "header header"
	  "nav main";
	column-gap: 2vh;
	row-gap: 1vh;
	animation: wrapper_appear cubic-bezier(0,1,0,1) 1s;
  }
  
  @keyframes wrapper_appear {
	0% {
	  background-color: white;
	  filter: blur(6vh);
	}
	100% {
	  filter: none;
	}
  }
  
  /* Header */
  header {
	grid-area: header;
	display: flex;
	align-items: center;
	gap: 2vh;
  }
  
  #site_title {
	font-size: 7vh;
  }
  
  #page_title {
	font-size: 5vh;
	flex: 2;
  }
  
  /* Main content area */
  main {
	grid-area: main;
	position: relative;
	padding: 1vh;
	flex-grow: 2;
	display: flex;
	flex-direction: column;
	gap: 1vh;
  }
  
  #context {
	height: 5vh;
	padding: 1vh;
	padding-top: 0.2vh;
	flex-shrink: 0;
	font-size: 3.5vh;
	background-color: var(--accentColor);
  }
  
  .page {
	width: 100%;
	flex-grow: 1;
  }
  
  /* ==============================
	 SIDEBAR (navigation)
	 ============================== */
  nav {
	grid-area: nav;
	display: flex;
	padding: 1vh;
	flex-direction: column;
	align-items: center;
	gap: 1vh;
  }
  
  nav > div {
	width: 100%;
  }
  
  #nav_rose {
	aspect-ratio: 1;
	cursor: help;
  }
  
  #nav_rose::after {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../img/rose/head.gif");
	background-size: 100% 100%;
	background-position-x: 50%;
	content: "";
  }
  
  #nav_update {
	padding: 1vh;
	width: 100%;
	font-size: 1.8vh;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 1vh;
  }
  
  #nav_comm_status {
	border: 1px solid #f00;
	background-color: #200;
	color: #f00;
	text-shadow: #f00 0 0 1vh;
	flex-grow: 1;
	text-align: center;
	padding: 0.5vh;
  }
  
  #nav_comm_status span {
	color: inherit;
	text-shadow: inherit;
	font-size: 3.2vh;
  }
  
  .nav_button {
	height: 3.8vh;
	padding-left: 0.5vh;
	padding-top: 0.3vh;
	text-align: left;
	font-size: 2.5vh;
	background-color: var(--ButtonColor);
	pointer-events: all !important;
	cursor: pointer;
	transition: all 0.03s ease-out;
	image-rendering: pixelated;
  }
  
  .nav_button:hover {
	background-color: var(--ButtonHoverColor);
	padding-left: 1.5vh;
  }
  
  .nav_button:active {
	background-color: var(--CornerColor);
  }
  
  /* ==============================
	 PAGE: ABOUT
	 ============================== */
  #about {
	display: grid;
	grid-template-columns: auto 35vh;
	grid-template-rows: 66.5% auto;
	grid-template-areas:
	  "greeting headshot"
	  "greeting description";
	gap: 1vh;
  }
  
  #about_greeting {
	grid-area: greeting;
	display: flex;
	flex-direction: column;
	justify-content: center;
  }
  
  #about_greeting span {
	user-select: text;
  }
  
  #about_headshot {
	grid-area: headshot;
	width: 35vh;
  }
  
  #about_headshot::after {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../img/rose/profile.gif");
	background-size: auto 100%;
	background-position-x: 50%;
	content: "";
  }
  
  #about_description {
	grid-area: description;
	padding: 1vh;
	padding-top: 0.7vh;
	font-size: 2.5vh;
  }
  
  #about_description > li {
	width: 100%;
	text-align: right;
  }
  
  #about_description > li::before {
	float: left;
	content: attr(label) ":";
  }
  
  /* ==============================
	 PAGE: GALLERY
	 ============================== */
  #gallery {
	position: relative;
  }
  
  #gallery_masonry {
	padding: 1vh;
	max-height: 100%;
	overflow: scroll;
	background-color: var(--accentColor);
  }
  
  #gallery_columns {
	display: flex;
	gap: 1vh;
  }
  
  .gallery_column {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 1vh;
	overflow: visible;
  }
  
  .gallery_item_wrapper {
	perspective: 10vh;
	perspective-origin: 50% 50%;
	overflow: visible;
  }
  
  .gallery_item {
	transition: transform 0.1s ease-out;
	position: relative;
	flex-shrink: 0;
	padding: 1vh;
	cursor: pointer;
	transform-origin: center center;
	animation:
	  gallery_appear_glow 2s cubic-bezier(0,1,0,1) forwards,
	  gallery_appear 0.5s cubic-bezier(0,1,0,1) forwards;
	opacity: 0;
  }
  
  .gallery_thumbnail {
	width: 100%;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	filter: grayscale();
	transition: filter 1s ease-out;
  }
  
  .gallery_item:hover {
	background-color: var(--ButtonHoverColor);
	border: 1px solid white;
	transition: none;
  }
  
  .gallery_item:hover > .gallery_title {
	background-color: var(--ButtonHoverColor);
  }
  
  .gallery_item:hover > .gallery_thumbnail {
	filter: none;
	transition: none;
	border: 1px solid white;
  }
  
  .gallery_title {
	min-height: 4vh;
	margin-top: 1vh;
	padding: 0.5vh 0 0.5vh 1vh;
	font-size: 1.3vw;
	background-color: var(--ButtonColor);
	text-transform: none;
	text-align: center;
  }
  
  #gallery_mask {
	position: absolute;
	width: calc(100% - 2vh);
	height: calc(100% - 2px);
	top: 1px;
	left: 1vh;
	background-image: linear-gradient(to bottom,
		var(--accentColor),
		transparent 2%,
		transparent 98%,
		var(--accentColor));
	pointer-events: none;
  }
  
  /* ==============================
	 ART VIEWER (overlay)
	 ============================== */
  #art_viewer {
	width: 100%;
	height: 100%;
	position: absolute;
	background: repeating-conic-gradient(#000000ee 0 25%, #0e0e0e88 0 50%) 50% / 4px 4px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--BorderColor);
  }
  
  #art_viewer_piece {
	width: auto;
	height: 80vh;
	image-rendering: pixelated;
	user-select: none;
	cursor: grab;
	outline: 1px solid white;
	outline-offset: 5px;
	box-shadow: rgba(0,0,0,0.8) 0 0 32px 32px;
	animation: art_viewer_pulse 1.0s cubic-bezier(0,1,0,1);
	background-color: rgba(0,0,0,0.7);
	background-size: 100% 100%;
	z-index: 5;
  }
  
  #art_viewer_piece:active {
	cursor: grabbing;
  }
  
  #art_viewer_directions {
	position: absolute;
	width: 100%;
	height: 20vh;
	text-align: center;
	top: 1vh;
	font-size: 3vh;
	background-image: linear-gradient(rgba(0,0,0,0.5), transparent);
	pointer-events: none;
  }
  
  #art_viewer_details {
	text-shadow: red 0 0 1vh !important;
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	height: auto;
	bottom: 1vh;
	pointer-events: none;
	animation: art_viewer_pulse 1.0s cubic-bezier(0,1,0,1);
  }
  
  #art_viewer_title {
	font-size: 4vh;
	flex-shrink: 0;
	user-select: text;
	pointer-events: all;
	padding: 0 2vh;
  }
  
  /* ==============================
	 PAGE: COMMISSION
	 ============================== */
  #commission {
	display: grid;
	grid-template-rows: 4vh auto 20vh;
	grid-template-columns: 70% calc(30% - 1vh);
	grid-template-areas:
	  "status status"
	  "selection info"
	  "examples info";
	gap: 1vh;
  }
  
  #comm_status {
	grid-area: status;
	width: 100%;
	height: 4vh;
	border: 1px solid var(--CommOpenColor);
	background-color: color-mix(in srgb, var(--CommOpenColor), #000 90%);
	color: var(--CommOpenColor) !important;
	font-size: 3vh;
	text-align: center;
	text-shadow: #f00 0 0 1vh;
  }
  
  #comm_selection {
	grid-area: selection;
	padding: 1vh;
	display: flex;
	flex-direction: row;
	gap: 1vh;
	flex: 1;
  }
  
  #comm_info {
	grid-area: info;
	height: 100%;
	font-size: 2vh;
	display: flex;
	gap: 1vh;
	flex-direction: column;
  }
  
  .comm_info_box {
	display: flex;
	flex-direction: column;
	gap: 1vh;
	padding: 1vh;
  }
  
  .comm_info_box::before {
	content: attr(label);
	text-align: center;
	font-size: 2.5vh;
	height: 3.4vh;
	color: var(--TextColor);
	text-shadow: var(--TextGlowColor) 0 0 1vh;
	background-color: var(--accentColor);
  }
  
  .comm_type {
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	image-rendering: pixelated;
	background-position: center center;
	font-size: 3vw;
	text-align: center;
	padding-top: 4vh;
	filter: grayscale() brightness(0.2);
	flex: 1;
	text-shadow: #000 0 0 1vh;
	outline: 1px solid white;
	position: relative;
	transition: all 0.2s ease-out;
  }
  
  .comm_type::before {
	content: attr(commtype);
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	margin-bottom: 10vh;
  }
  
  .comm_type[commtype="aliased"] { background-image: url("../img/art/original/mariner.png"); }
  .comm_type[commtype="sketched"] { background-image: url("../img/art/original/bug_sketch.png"); }
  .comm_type[commtype="painted"] { background-image: url("../img/art/original/isabelle.png"); }
  
  #comm_description {
	text-transform: none;
	flex-grow: 1;
  }
  
  #comm_pricing {
	text-align: left;
	font-size: 2.5vh;
	display: flex;
	flex-direction: column;
  }
  
  #comm_pricing span {
	flex-grow: 1;
	text-align: right;
	font-size: 5vh;
	color: var(--CommOpenColor);
	text-shadow: #f00 0 0 2vh;
  }
  
  #comm_pricing div {
	font-size: 3vh;
	display: flex;
	align-items: center;
  }
  
  #comm_contact {
	grid-area: contact;
	text-align: center;
	font-size: 4.5vh;
	color: var(--CommOpenColor);
	text-shadow: #f00 0 0 1vh;
  }
  
  #comm_examples {
	padding: 1vh 0;
	overflow-y: hidden;
	position: relative;
	pointer-events: none;
  }
  
  #comm_examples_scroller {
	display: flex;
	padding: 0 1.5vh;
	align-items: center;
	gap: 2vh;
	overflow-x: scroll;
	height: 100%;
	align-self: start;
	pointer-events: all;
	scroll-behavior: smooth;
  }
  
  #comm_examples_scroller img {
	width: auto;
	height: 94%;
	outline: 1px solid var(--ButtonHoverColor);
	outline-offset: 3px;
	flex-shrink: 0;
	cursor: pointer;
	filter: grayscale();
	transition: filter 0.5s ease-out, outline-color 2s cubic-bezier(0,1,0,1);
	animation:
	  example_appear_glow 2s cubic-bezier(0,1,0,1) forwards,
	  gallery_appear 0.5s cubic-bezier(0,1,0,1) forwards;
	transform: scaleY(0);
  }
  
  #comm_examples_scroller img:hover {
	filter: none;
	outline-color: white;
	transition: none;
  }
  
  #comm_examples_mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	background-image: linear-gradient(90deg, black, transparent 2%, transparent 98%, black);
  }
  
  .unavailable::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 112%;
	content: "UNAVAILABLE";
	align-content: center;
	font-size: 4vh;
	background-color: rgba(0,0,0,0.5);
  }
  
  /* ==============================
	 PAGE: BLOG
	 ============================== */
  #blog {
	position: relative;
  }
  
  #blog_list {
	padding: 1vh;
	height: 100%;
	overflow: scroll;
  }
  
  .blog_item {
	width: 100%;
	height: auto;
	display: grid;
	padding: 1vh;
	animation: blog_appear_glow 3s cubic-bezier(0,1,0,1);
  }
  
  .blog_item_header {
	background-color: var(--accentColor);
	font-size: 3vh;
	padding: 0.5vh 0;
	display: flex;
  }
  
  .blog_item_title {
	flex-grow: 1;
	padding: 0 1vh;
	user-select: text;
  }
  
  .blog_item_date {
	padding: 0 1vh;
	user-select: text;
  }
  
  .blog_item_body {
	font-size: 2vh;
	text-transform: none;
	padding: 0.5vh;
	user-select: text;
  }
  
  /* ==============================
	 PAGE: LINKS
	 ============================== */
  #links {
	display: flex;
	flex-direction: column;
	gap: 1vh;
  }
  
  .link {
	width: 100%;
	padding: 3vh;
	background-color: var(--ButtonColor);
	display: flex;
	align-items: center;
	flex: 1;
	cursor: pointer;
	transform: scaleY(0);
	animation:
	  link_appear 0.1s ease-out forwards,
	  link_appear_glow 2s cubic-bezier(0,1,0,1);
	transition: background-color 0.5s ease-out;
  }
  
  .link:hover {
	background-color: var(--ButtonHoverColor) !important;
	transition: background-color 0s;
  }
  
  .link_icon {
	height: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
  }
  
  .link_title {
	padding: 0 2vh;
	font-size: 3vh;
  }
  
  .link_handle {
	text-align: right;
	font-size: 3vh;
	flex-grow: 1;
  }
  
  /* ==============================
	 PAGE: CHRONICLE
	 ============================== */
  #chronicle_container {
	display: flex;
	height: 100%;
	width: 100%;
	gap: 1vh;
	padding: 1vh;
	background-color: var(--accentColor);
  }
  
  #chronicle_sidebar {
	width: 20%;
	display: flex;
	flex-direction: column;
	gap: 1vh;
	overflow-y: auto;
	padding-right: 0.5vh;
  }
  
  .chronicle_button {
	background-color: var(--ButtonColor);
	padding: 1.5vh 1vh;
	text-align: center;
	font-size: 2.2vh;
	cursor: pointer;
	transition: background-color 0.1s;
	flex-shrink: 0;
  }
  
  .chronicle_button:hover {
	background-color: var(--ButtonHoverColor);
  }
  
  .chronicle_button.active {
	background-color: var(--CornerColor);
	border-color: white;
  }
  
  #chronicle_content {
	flex: 1;
	background-color: #000;
	border: 1px solid var(--BorderColor);
  }
  
  #chronicle_iframe {
	width: 100%;
	height: 100%;
	border: none;
	background-color: #111;
  }
  
  /* ==============================
	 ANIMATIONS
	 ============================== */
  @keyframes link_appear {
	0% { transform: scaleY(0); width: 0%; }
	100% { transform: none; width: 100%; }
  }
  
  @keyframes link_appear_glow {
	0% { filter: contrast(0) brightness(3) blur(0.7vh); background-color: var(--CornerColor); }
	100% { filter: none; background-color: var(--ButtonColor); }
  }
  
  @keyframes blog_appear_glow {
	0% { filter: contrast(0) brightness(3) blur(0.7vh); background-color: var(--CornerColor); }
	100% { filter: none; background-color: none; }
  }
  
  @keyframes gallery_appear_glow {
	0% { filter: contrast(0) brightness(3) blur(4vh); background-color: var(--CornerColor); }
	100% { filter: none; background-color: var(--BackgroundColor); }
  }
  
  @keyframes gallery_appear {
	0% { opacity: 1; transform: scaleX(1) scaleY(0.04); }
	100% { opacity: 1; transform: none; }
  }
  
  @keyframes example_appear_glow {
	0% { filter: grayscale() contrast(0) brightness(3) blur(1vh); background-color: var(--CornerColor); }
	100% { filter: grayscale(); background-color: var(--BackgroundColor); }
  }
  
  @keyframes scan_scroll {
	0% { background-position-y: 0vh; }
	100% { background-position-y: 200vh; }
  }
  
  @keyframes flicker_frames {
	0% { filter: brightness(4); opacity: 0.0; }
	20% { opacity: 1; }
	40% { opacity: 0.5; }
	60% { opacity: 1; }
	80% { opacity: 0.7; }
	100% { filter: none; opacity: unset; }
  }
  
  @keyframes art_viewer_pulse {
	0% { outline-width: 80px; outline-offset: 50px; filter: brightness(10) blur(16px); }
	100% { outline-width: 1px; outline-offset: 5px; filter: none; }
  }
  
  /* ==============================
	 FONTS
	 ============================== */
  @font-face {
	font-family: "proFont";
	src: local("proFont"), url("../font/proFont.woff2") format("woff2");
  }