:root {
  color-scheme: light dark;
  --rounding: 3rem;
  --padding: 1.5rem;
  --inner-gaps:     3rem;
  --outer-gaps:     10rem;
  --animation-time: 0.5s;

  --text: #1e0611;
  --accent: #B04873;
  --accent-title: #ff6fab;
  --background: #ffc8e3;
  --border-color: black;
  --container-background: #FFAED6;

  --sidebar-width: 11vh;
  --sidebar-background: #ff88ba;
  --landing-header-height: 100vh;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #cdd6f4;
    --accent: #cba6f7;
    --accent-title: #cba6f7;
    --background: #1e1e2e;
    --border-color: #45475a;
    --container-background: #313244;
    --sidebar-background: #181825;
  }
}

body {
  font-family: Comic Neue, Chalkboard, Comic Sans MS;
  margin: 0px;
  margin-left: calc(var(--sidebar-width) + calc(var(--outer-gaps) / 2)); /* split gaps var in half as thats how css uses the margin */
  margin-right: calc(var(--outer-gaps) / 2);
  margin-top: calc(var(--outer-gaps) / 2);

  background-color: var(--background);
}

h1 {
  color: var(--accent-title);
  -webkit-text-stroke: 0.05em black;
}

h2 {
  color: var(--accent-title);
  -webkit-text-stroke: 0.05em black;
}

p {
  color: var(--text);
}

a {
  color: var(--accent);
  text-decoration: underline 1px wavy var(--accent);
  transition-duration: var(--animation-time);
}

button {
  border: 3px var(--border-color) solid;
  border-radius: var(--rounding);
  background-color: var(--background);
  color: var(--text);
  padding: 1em;
}

button:hover {
  border: 3px var(--border-color) dashed;
}

a:hover {
  color: var(--accent);
  background-color: var(--text);
  border-radius: var(--rounding);

  transform: scale(125%);
  padding: 0.4em;
  margin: -0.4em;
  display: inline-block;

}

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

/* zola's code blocks */
.giallo {
  padding: var(--padding);
  border-radius: var(--rounding);

  overflow: scroll;
}

.container {
  max-width: calc(100vw - var(--outer-gaps));
  min-height: calc(20vh - var(--outer-gaps));
  margin: calc(var(--inner-gaps) / 2 );
  padding: var(--padding);
  border-radius: var(--rounding);

  background: var(--container-background);
  border: var(--border-color) 0.2rem solid;
}

/*
 * falling leaf looking things
 */

.leafthingy {
  position: fixed;
  display: block;
  animation: leafthingy infinite linear;
  z-index: 1;

  top: -100%;
  height: random(0.5rem, 8rem);
  left: random(0%, 100%);
  width: auto;
}

/*
 * python script to use to generate random values, since css
 * random() is implemented only in safari rn

#!/bin/env python3
import random

for i in range(30):
    print(f".leafthingy:nth-of-type({i}) {{ left: {random.randint(0, 100)}%; animation-delay: {random.randint(0, 100)/10}s; animation-duration: {random.randint(10, 30)}s; height: {random.randint(1, 8)}rem; }}")

 */

.leafthingy:nth-of-type(1) { left: 50%; animation-delay: 8.4s; animation-duration: 29s; height: 4rem; }
.leafthingy:nth-of-type(2) { left: 50%; animation-delay: 0.4s; animation-duration: 25s; height: 5rem; }
.leafthingy:nth-of-type(3) { left: 83%; animation-delay: 2.2s; animation-duration: 24s; height: 6rem; }
.leafthingy:nth-of-type(4) { left: 30%; animation-delay: 4.1s; animation-duration: 22s; height: 2rem; }
.leafthingy:nth-of-type(5) { left: 87%; animation-delay: 5.1s; animation-duration: 18s; height: 3rem; }
.leafthingy:nth-of-type(6) { left: 87%; animation-delay: 2.2s; animation-duration: 28s; height: 1rem; }
.leafthingy:nth-of-type(7) { left: 17%; animation-delay: 6.6s; animation-duration: 29s; height: 1rem; }
.leafthingy:nth-of-type(8) { left: 14%; animation-delay: 2.4s; animation-duration: 24s; height: 1rem; }
.leafthingy:nth-of-type(9) { left: 16%; animation-delay: 0.9s; animation-duration: 30s; height: 5rem; }
.leafthingy:nth-of-type(10) { left: 52%; animation-delay: 8.9s; animation-duration: 15s; height: 1rem; }
.leafthingy:nth-of-type(11) { left: 37%; animation-delay: 5.3s; animation-duration: 28s; height: 4rem; }
.leafthingy:nth-of-type(12) { left: 40%; animation-delay: 3.9s; animation-duration: 18s; height: 7rem; }
.leafthingy:nth-of-type(13) { left: 14%; animation-delay: 2.4s; animation-duration: 17s; height: 8rem; }
.leafthingy:nth-of-type(14) { left: 43%; animation-delay: 8.8s; animation-duration: 18s; height: 5rem; }
.leafthingy:nth-of-type(15) { left: 47%; animation-delay: 0.9s; animation-duration: 16s; height: 7rem; }
.leafthingy:nth-of-type(16) { left: 25%; animation-delay: 4.8s; animation-duration: 23s; height: 8rem; }
.leafthingy:nth-of-type(17) { left: 11%; animation-delay: 0.5s; animation-duration: 22s; height: 7rem; }
.leafthingy:nth-of-type(18) { left: 97%; animation-delay: 5.9s; animation-duration: 25s; height: 1rem; }
.leafthingy:nth-of-type(19) { left: 78%; animation-delay: 0.7s; animation-duration: 27s; height: 3rem; }
.leafthingy:nth-of-type(20) { left: 60%; animation-delay: 9.3s; animation-duration: 20s; height: 5rem; }
.leafthingy:nth-of-type(21) { left: 83%; animation-delay: 8.2s; animation-duration: 28s; height: 3rem; }
.leafthingy:nth-of-type(22) { left: 16%; animation-delay: 7.2s; animation-duration: 12s; height: 3rem; }
.leafthingy:nth-of-type(23) { left: 78%; animation-delay: 6.6s; animation-duration: 18s; height: 1rem; }
.leafthingy:nth-of-type(24) { left: 53%; animation-delay: 6.6s; animation-duration: 22s; height: 5rem; }
.leafthingy:nth-of-type(25) { left: 57%; animation-delay: 2.9s; animation-duration: 16s; height: 5rem; }
.leafthingy:nth-of-type(26) { left: 8%; animation-delay: 3.7s; animation-duration: 21s; height: 8rem; }
.leafthingy:nth-of-type(27) { left: 85%; animation-delay: 0.6s; animation-duration: 12s; height: 2rem; }
.leafthingy:nth-of-type(28) { left: 32%; animation-delay: 3.4s; animation-duration: 19s; height: 3rem; }
.leafthingy:nth-of-type(29) { left: 38%; animation-delay: 9.3s; animation-duration: 19s; height: 8rem; }
.leafthingy:nth-of-type(30) { left: 8%; animation-delay: 9.2s; animation-duration: 30s; height: 2rem; }

@keyframes leafthingy {
  0% {
    top: -20%;
    transform: translateX(0px);
    display:block;
  }

  10% { transform: translateX(10px); }
  20% { transform: translateX(-10px); }
  30% { transform: translateX(20px); }
  40% { transform: translateX(-5px); }
  50% { transform: translateX(10px); }
  60% { transform: translateX(-60px); }
  70% { transform: translateX(0px); }
  80% { transform: translateX(-40px); }
  90% { transform: translateX(30px); }

  100% {
    top: 100%;
    transform: translateX(10px);
  }
}


/*
 * header
 */

header {
  padding: 0px !important;
  background-color: transparent !important;
  border-width: 0px !important;

  #header-content {
    background-color: var(--container-background);
    border: var(--border-color) 0.2rem solid;
    border-radius: var(--rounding);

    font-size: 2em;
    margin: auto;

    width: fit-content;
    height: calc(var(--landing-header-height) * 0.375);
    margin-top: calc(var(--landing-header-height) * 0.3125);
    margin-bottom: calc(var(--landing-header-height) * 0.3125);

  }

  #header-astolfo {
    float: left;
    height: 60vh;
    transform: translateY(calc(var(--landing-header-height) * -0.09375)) scale(125%);

    animation: float infinite linear 5s;
  }

  h1 {
    * {
      animation: bounce 0.5s linear;
      display: inline-block;
    }
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-50px) scale(120%);
  }
  100% {
    transform: translateY(0px) scale(100%);
  }
}

@keyframes float {
  0% {
    transform: translateY(calc(var(--landing-header-height) * -0.09375)) scale(125%);
  }
  33% {
    transform: translateY(calc(var(--landing-header-height) * -0.09375 + 20px)) scale(125%);
  }
  66% {
    transform: translateY(calc(var(--landing-header-height) * -0.09375 - 20px)) scale(125%);
  }
  100% {
    transform: translateY(calc(var(--landing-header-height) * -0.09375)) scale(125%);
  }
}

/*
 * footer
 */

footer {
  margin-bottom: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  min-height: 2em !important;
  height: auto;
  border-bottom: 0px !important;
}


/*
 * side navbar
 */

nav {
  background-color: var(--sidebar-background);
  display: flex;
  flex-direction: column;
  border-radius: var(--rounding);
  border: var(--border-color) 0.2rem solid;

  position: fixed;
  top: calc(var(--outer-gaps) / 2);
  left: calc(var(--outer-gaps) / 2);
  height: calc(100vh - var(--outer-gaps));
  width: var(--sidebar-width);

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

    color: var(--accent-title);
    -webkit-text-stroke: 0px black;

    font-size: calc(var(--sidebar-width) / 2);
    margin-left: 0px;
    margin-right: 0px;
    padding: 0.3em
  }

  #nav-home {
    color: inherit;
    text-decoration: inherit;
    height: fit-content;
    all: unset;
  }
}

#nav-links {
  display: flex;
  flex-direction: column;

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

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

    transition-duration: var(--animation-time);

    p {
      background-color: var(--sidebar-background);
      color: var(--text);
      width: fit-content;
      padding: 0.2em;
      border-radius: 20%;
      margin: 0 0 0 0;
    }
  }

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

/*
 * content
 */

#content {
  min-height: 30vh;

  border-radius: var(--rounding);
  padding: var(--padding);
  flex-grow: 1;
}

/* 
 * mobile support
 */

@media (max-width: 60rem) {
  :root {
    --rounding: 2rem;
    --outer-gaps:     2rem;
    --inner-gaps:     2rem;
    --sidebar-width: 5rem;
  }

  body {
    margin-right: 0px;
  }

  header {
    height: calc(100vh - var(--outer-gaps));

    #header-content {
      all: unset;
      display: flex;
      flex-direction: column;
      max-width: calc(100vw - var(--outer-gaps) - var(--sidebar-width) - var(--inner-gaps));
      height: calc(100vh - var(--outer-gaps));

      margin: 0px;

      align-content: center;
    }

    #header-text {
      margin-top: auto !important;
      margin-left: calc(var(--inner-gaps) / 2 );

      h1 {
        -webkit-text-stroke: 0.05em black;
      }

      /* stolen from .container class */
      max-width: calc(100vw - var(--outer-gaps));
      min-height: calc(20vh - var(--outer-gaps));
      padding: var(--padding);
      border-radius: var(--rounding);
      background: var(--container-background);
      border: var(--border-color) 0.2rem solid;
    }

    #header-astolfo {
      margin-top: auto;
      object-fit: contain;
      transform: none;
    }
  }

  @keyframes float {
    0% { transform: translateY(0px); }
    33% { transform: translateY(20px);} 
    66% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
  }

}