$background-color: oklch(22.49% 0.008 297.21);
$foreground-color: oklch(98.51% 0 0);
$primary-color: oklch(82.67% 0.096 307.5);
$secondary-color: oklch(from $primary-color l c 240);

@import "syntax";

:root {
  font-size: 16px; // acts as a sort of scale because everything uses rem.
}

* {
  box-sizing: border-box;
  transition: 0.1s ease-in-out;
  /* outline: 1px solid rgba(255, 1, 0, 0.2); */
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  $opacity: 25%;
  background-color: black;
  // prettier-ignore
  background-image:
    url("/images/noise.png"),
    radial-gradient(circle at center center, oklch(22.49% 0.008 297.21), transparent),
    radial-gradient(circle at bottom left, #27577D, transparent),
    radial-gradient(circle at top right, #952EA4 0%, transparent),
    radial-gradient(circle at center right, #6949A5 0%, transparent),
    radial-gradient(circle at top center, #336BA0 0%, transparent);
  background-attachment: fixed;
  color: white;
  color: $foreground-color;
  $gaps: 1rem;
  padding: $gaps;
  padding-top: 5rem;
  gap: $gaps;

  overflow-x: hidden;

  &>* {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: $background-color;
    width: 100%;
    max-width: 50rem;
    padding: 1.5rem 2.5rem;
    outline: 0.2rem solid $background-color;
    outline-offset: 0.2rem;
  }
}

// --- NAVIGATION BAR ---
// This whole navbar section needs refactoring, because I'm already confused by it
nav {
  display: flex;
  width: unset;
  padding: 1rem;
  position: fixed;
  top: 1rem; // TODO: actually have this floating next to the side like the old site
  right: 1rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  height: fit-content;

  svg {
    fill: $foreground-color;
    $size: 2rem;
    width: $size;
    height: $size;
  }

  a {
    display: flex;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    text-decoration: none;
    justify-content: center;
    color: $foreground-color;
  }

  hr {
    width: 100%;
  }
}

// --- STANDARD ELEMENTS ---
a {
  color: mediumpurple;
  color: $primary-color;

  &:hover {
    filter: brightness(0.75);
  }
}

@mixin std-style {
  display: block;
  margin: 0;
}

p {
  @include std-style;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-type: none;
  margin: 0;
  padding: 0;

  &>li:before {
    content: "~";
    color: oklch(82.67% 0.087 180);
    padding-left: 0.5rem;
    padding-right: 0.25rem;
  }
}

@for $i from 1 through 6 {
  h#{$i} {
    @include std-style;
    padding-top: 0.5rem;

    &:before {
      $hashes: "";

      @for $_ from 1 through $i {
        $hashes: $hashes + "#";
      }

      content: "#{$hashes} ";
      color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40});
    }
  }
}

@for $i from 1 through 15 {
  ul>li:nth-child(n+#{$i}):before {
    color: oklch(82.67% 0.087 #{100 + ($i - 1) * 80});
  }
}

img {
  user-select: none;
  pointer-events: none;
}

hr {
  $color: oklch(from $foreground-color 0.45 c h);
  // Not a single platform can decide which way to set the color of a `hr`.
  background-color: $color;
  color: $color;
  border-color: $color;
}

.playlist {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

// FONTS!!!!!!!!!!!!!!!!! TODO: split up
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap");

* {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-optical-sizing: auto;
  text-transform: lowercase;
}


p,
ul,
span {
  text-align: justify;
  font-size: 1.25rem;
}

code {
  font-family: "Atkinson Hyperlegible Mono", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.75rem;
}

address {
  opacity: 0.5;
  text-align: right;
  width: auto;
  margin-top: -2.1lh; // TODO: i can fix this when it becomes a problem :)
  margin-bottom: 0.5rem; // SO HACKY
}

footer {
  gap: 0;
}

footer>* {
  text-align: center;
  font-size: 1rem;
  opacity: 0.5;
}

// SYNTAX!!!!!!!
div.sourceCode {
  // prettier-ignore
  background-image:
    url("/images/noise.png"),
    radial-gradient(circle at center center, oklch(22.49% 0.008 297.21), transparent),
    radial-gradient(circle at bottom left, #27577D, transparent),
    radial-gradient(circle at top right, #952EA4 0%, transparent),
    radial-gradient(circle at center right, #6949A5 0%, transparent),
    radial-gradient(circle at top center, #336BA0 0%, transparent);
  background-attachment: fixed;
  padding: 0.2rem;
  overflow: hidden;

  &>* {
    background-color: $background-color;
    background-attachment: fixed;
    padding: 1.2rem;
    overflow: scroll;
  }
}