:root {
  color-scheme: light dark;
  --background: light-dark(#FFADD6, black); 
  --text: light-dark(black, white);
  --rounding: 25px;
}

@media (prefers-color-scheme: light) {
  :root {
    --text: #1e0611;
    --background: #FFADD6;
    --primary: #7b194a;
    --secondary: #520029;
    --accent: #ff2b95;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #f9e1ec;
    --background: #290918;
    --primary: #e684b5;
    --secondary: #ffadd6;
    --accent: #FF7BFF;
  }
}

body {
  background: linear-gradient(#FF61B0 0vh, #b24dff 50vh, #E70073 100vh, #FFF 100%); /*-- light mode
 * background: linear-gradient(#880044 0vh, #58009b 50vh, #850042 100vh, #000 100%) -- dark mode*/
  font-family: Comic Neue, Chalkboard, Comic Sans MS;
/*  background: #ffd1e8; /* ff61b0 */
/*  background: #ff389c; /* dark mode */
  margin: 0px;
}

h1 {
  color: var(--primary);

}

h2 {
  color: var(--secondary);
}

a {
  color: var(--primary);
  text-decoration: underline 1px wavy var(--accent);
}

b {
  color: var(--accent);
}

i {
  color: var(--primary);
}

#content {
  width: calc(100vw - 50px);
  height: calc(100vh - 50px);

  display: flex;
  margin: 25px;
}

#content > * {
  border-radius: var(--rounding);

  background: var(--background);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

#bg-overlay {
  min-width: 50vw;
  margin-left: 12px;
  max-width: 100vw;
  flex-grow: 1;
  padding: 12px;
}

header h1 {
  writing-mode: vertical-lr;
  text-orientation: mixed;

  font-size: 7vh;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0.3em
}

nav {
  display: flex;
  flex-direction: column;
}

nav > a {
  width: inherit;
  padding: 0.5em;
  filter: grayscale(1) ;
  text-decoration: none;
  height: 2.5em;

  background-size: cover;
  background-repeat: no-repeat;

  transition-duration: 0.5s;
}

nav > a:hover {
  filter: grayscale(0);
  transform: translateX(10px);
}

nav > a > p {
  backdrop-filter: blur(10px);
  color: light-dark(var(--text), var(--background));
  width: fit-content;
  padding: 0.2em;
  border-radius: 20%;
  margin: 0 0 0 0;
}