@font-face {
  font-family: KROIGS;
  src: url("/assets/fonts/KROIGS-Regular.woff2");
}

@font-face {
  font-family: KROIGS;
  font-style: italic;
  src: url("/assets/fonts/KROIGS-Slant.woff2");
}

@font-face {
  font-family: 'KROIGS Outline';
  src: url("/assets/fonts/KROIGS-Outline.woff2");
}

@font-face {
  font-family: 'Bad Unicorn';
  src: url("/assets/fonts/BadUnicorn.ttf");
}

:root {
  --font-size: 16px;

  --body: #222;
  --body-gradient: #222;

  --border-radius: 1em;

  --content-wrapper-min-width: 24em;
  --content-wrapper-min-height: 20em;
  --content-about-picture-size: 10em;

  --nav-height: 1.5em;
}

* {
  box-sizing: border-box;

  z-index: 1;
  position: relative;
}

html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
  font-family: sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(-69deg, var(--background1), var(--background2));
}

#dither {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-image: url("/assets/bluenoise64.png");
  background-size: auto;
  background-repeat: repeat;
  transition: opacity 1s ease-in;
  pointer-events: none;
  z-index: 0;
}

#wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;

  min-width: var(--content-wrapper-min-width);
  width: 40vw;
  max-width: 92vw;

  min-height: var(--content-wrapper-min-height);
  padding-bottom: 4em;

  transition: border-radius 0.5s ease-in;
}

.card {
  display: flex;
  align-items: center;
  border-radius: var(--border-radius);
  padding: var(--border-radius);

  background: linear-gradient(135deg, var(--foreground) 80%, var(--foreground-darker));
}

.separator {
  background-color: var(--background);
  opacity: 0.5;
}
.separator.horizontal {
  width: 80%;
  height: 1px;
  margin: 1em 0;
}
.separator.vertical {
  width: 1px;
  height: 80%;
  margin: 0 1em;
}

#about-area {
  flex: 1;
  display: flex;
  gap: var(--border-radius);

  width: 100%;
  min-width: var(--content-wrapper-min-width);
  min-height: calc(var(--border-radius) * 2);
  height: 16em;

  .profile {
    display: flex;
    flex: 1;
    height: 100%;
    align-items: center;

    > img {
      width: var(--content-about-picture-size);
      height: var(--content-about-picture-size);
      border-radius: calc(var(--content-about-picture-size) / 2);
    }

    .description {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1em;

      .name {
        font-family: KROIGS;
        font-size: 2em;
        font-style: italic;
        letter-spacing: 0.25rem;

        color: var(--color6);
        text-shadow: 2px 2px 0 var(--color1),
          4px 4px 0 var(--color2),
          6px 6px 0 var(--color3),
          8px 8px 0 var(--color4),
          10px 10px 0 var(--color5),
          0.25em 0.25em 0.5em var(--foreground-darker);
      }
      .name:hover { animation: description-name 1s; }

      .title {
        font-family: 'Bad Unicorn';
        font-size: 1.5em;
        letter-spacing: 0.25em;
        color: var(--background);
        opacity: 0.8;
      }
    }
  }

  .menu {
    display: block;
    flex: 0.5;
    height: 100%;
  }

  .links {
    display: flex;
    flex-direction: column;
    justify-content: center;

    > span {
      font-family: 'Bad Unicorn';
      font-size: 1.75em;
      letter-spacing: 0.25em;
      text-align: center;
      color: var(--background);
      opacity: 0.8;
    }

    .icons {
      flex: 1;
      margin-top: 1em;
      width: 100%;
      height: 100%;
      align-items: center;
      display: flex;
      gap: 1em;

      a {
        flex: 1;
        text-align: center;
      }

      img {
        height: 2em;
      }

      .invert {
        filter: invert(var(--toggles-invert));
      }
    }
  }
}

@keyframes description-name {
  0% {
    text-shadow: 2px 2px 0 var(--color1),
      4px 4px 0 var(--color2),
      6px 6px 0 var(--color3),
      8px 8px 0 var(--color4),
      10px 10px 0 var(--color5),
      0.25em 0.25em 0.5em var(--foreground-darker);
  }
  17% {
    color: var(--color1);
    text-shadow: 2px 2px 0 var(--color2),
      4px 4px 0 var(--color3),
      6px 6px 0 var(--color4),
      8px 8px 0 var(--color5),
      10px 10px 0 var(--color6),
      0.25em 0.25em 0.5em var(--foreground-darker);
  }
  34% {
    color: var(--color2);
    text-shadow: 2px 2px 0 var(--color3),
      4px 4px 0 var(--color4),
      6px 6px 0 var(--color5),
      8px 8px 0 var(--color6),
      10px 10px 0 var(--color1),
      0.25em 0.25em 0.5em var(--foreground-darker);
  }
  51% {
    color: var(--color3);
    text-shadow: 2px 2px 0 var(--color4),
      4px 4px 0 var(--color5),
      6px 6px 0 var(--color6),
      8px 8px 0 var(--color1),
      10px 10px 0 var(--color2),
      0.25em 0.25em 0.5em var(--foreground-darker);
  }
  68% {
    color: var(--color4);
    text-shadow: 2px 2px 0 var(--color5),
      4px 4px 0 var(--color6),
      6px 6px 0 var(--color1),
      8px 8px 0 var(--color2),
      10px 10px 0 var(--color3),
      0.25em 0.25em 0.5em var(--foreground-darker);
  }
  85% {
    color: var(--color5);
    text-shadow: 2px 2px 0 var(--color6),
      4px 4px 0 var(--color1),
      6px 6px 0 var(--color2),
      8px 8px 0 var(--color3),
      10px 10px 0 var(--color4),
      0.25em 0.25em 0.5em var(--foreground-darker);
  }
  100% {
    color: var(--color6);
    text-shadow: 2px 2px 0 var(--color1),
      4px 4px 0 var(--color2),
      6px 6px 0 var(--color3),
      8px 8px 0 var(--color4),
      10px 10px 0 var(--color5),
      0.25em 0.25em 0.5em var(--foreground-darker);
  }
}

#about-area nav {
  flex: 1;
  display: flex;
  align-items: center;
  height: 5em;

  a {
    flex: 1;
    font-family: 'Bad Unicorn';
    font-size: 2em;
    text-align: center;
    text-decoration: none;

    color: var(--background);
  }
  a.selected { text-decoration: underline; }
}

#about-area .toggles {
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: right;

  filter: invert(var(--toggles-invert));
}

#about-area .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;

  .picture {
    margin-top: 3em;
    width: var(--content-about-picture-size);
    height: var(--content-about-picture-size);
  }

  .picture img {
    width: var(--content-about-picture-size);
    border-radius: calc(var(--content-about-picture-size) / 2);
    border: 1em solid var(--content-background);
  }

  .details {
    width: 100%;
    padding: 1em 0em;
    
    .name {
      display: block;
      width: 100%;
      text-align: center;
      font-family: 'KROIGS', sans-serif;
      font-style: italic;
      font-size: 1.5em;

      color: #a76b91;
      text-shadow: 0.2em 0em 0em #eed2fc,
      0em 0.2em 0em #fbf3b9;
    }

    .description {
      display: block;
      width: 100%;
      text-align: center;
    }
  }

  .links {
    margin-top: 2em;
    display: flex;
    width: 100%;
    filter: invert(var(--toggles-invert));
  }

  .links a {
    display: block;
    flex: 1;
    text-align: center;
  }

  .links a img {
    width: 2em;
    height: 2em;
  }
}

#dither-controls { height: var(--nav-height); }
#dither-controls input[type="checkbox"] { display: none; }
#dither-controls input[type="checkbox"]:checked + label { opacity: 1; }
#dither-controls input[type="checkbox"] + label {
  display: inline-block;
  width: var(--nav-height);
  height: var(--nav-height);
  background: url("/assets/dither128.png");
  background-size: contain;

  opacity: 0.5;
  transition: opacity 0.25s ease-in;
  cursor: pointer;
}

#theme-controls input[type="checkbox"] { display: none; }
#theme-controls input[type="checkbox"] + label {
  display: inline-block;
  width: var(--nav-height);
  height: var(--nav-height);
  background: url("/assets/theme128.png");
  background-size: contain;

  transition: opacity 0.25s ease-in;
  cursor: pointer;
}

#banners {
  margin-top: 1em;
  width: 100%;

  * {
    border-radius: var(--border-radius);
  }

  .vket {
    display: block;
    width: 100%;
    height: 8em;
    background: url("/assets/vketsummer2025.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

#content-area {
  width: 100%;
  min-height: 3em;
  height: max-content;

  color: var(--background);
}

@media only screen and (max-width: 1920px) {
  #wrapper {
    min-width: auto;
    width: 92vw;
    max-width: 100vw;
  }
}

@media only screen and (max-width: 1024px) {
  #dither { display: none }
  #dither-controls { display: none }
  #dither-toggle { display: none }

  #wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;

    min-width: auto;
    width: 100vw;
    max-width: 100vw;

    min-height: 100%;
    max-height: auto;
    padding-bottom: 0;

    box-shadow: none;
  }

  .card {
    border-radius: 0;
    background: var(--foreground);
  }

  #banners {
    margin-top: 0;

    * {
      border-radius: 0;
    }
  }

  #about-area {
    display: block;
    height: auto;

    .profile {
      display: block;
      margin-top: 2em;
      margin-bottom: 1em;

      > img {
        display: none;
      }

      .description {
        span {
          text-align: center;
        }
      }
    }
  }

  #about-area .toggles {
    position: absolute;
    top: -8em;
    right: 0;
  }
}

/* Github Markdown Alert */

.markdown-alert {
  padding: 0.25em 0.5em;
  margin-bottom: 1em;
  border-left: 0.25em solid var(--background);
  width: auto;
}

.markdown-alert-title {
  display: flex;
  gap: 0.25em;
  align-items: center;
  line-height: 1;
  font-weight: bold;
}

.octicon {
  display: inline-block;
  fill: currentColor;
}

.markdown-alert-note {
  border-left-color: rgb(31, 111, 235);
  background-color: rgba(31, 111, 235, 0.15);
  .markdown-alert-title {
    color: rgb(31, 111, 235);
  }
}
.markdown-alert-tip {
  border-left-color: rgb(35, 134, 54);
  background-color: rgba(35, 134, 54, 0.15);
  .markdown-alert-title {
    color: rgb(35, 134, 54);
  }  
}
.markdown-alert-important {
  border-left-color: rgb(137, 87, 229);
  background-color: rgba(137, 87, 229, 0.15);
  .markdown-alert-title {
    color: rgb(137, 87, 229);
  }  
}
.markdown-alert-warning {
  border-left-color: rgb(158, 106, 3);
  background-color: rgba(158, 106, 3, 0.15);
  .markdown-alert-title {
    color: rgb(158, 106, 3);
  }  
}
.markdown-alert-caution {
  border-left-color: rgb(218, 54, 51);
  background-color: rgba(218, 54, 51, 0.15);
  .markdown-alert-title {
    color: rgb(218, 54, 51);
  }  
}