/* --- Custom CSS --- */

/* https://fonts.google.com/specimen/Ubuntu+Sans */
@font-face {
  font-family: "Ubuntu Sans";
  src: url("../fonts/UbuntuSans.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wdth" 100;

  /* Default (light) theme */
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: gainsboro;
  --accent: #7ebae4;
  --accent-hover: #5277c3;
  --accent-text: var(--bg);
  --code: crimson;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
  --glow: #20b286;
  --glow-duration: 0.2s;
}

/* Dark theme */
body:has(#theme-switch:checked) {
  color-scheme: dark;
  --bg: #212121;
  --accent-bg: #2b2b2b;
  --text: #dcdcdc;
  --text-light: #ababab;
  --border: #5d5d5d;
  --accent: #5277c3;
  --accent-hover: #7ebae4;
  --accent-text: var(--bg);
  --code: #ed365b;
  --preformatted: #ccc;
  --disabled: #111;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.8s;

  & > footer {
    height: auto;
    padding-block: 0;
    margin-block: 0;
  }
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  & > section {
    width: 100%;
    text-align: left;
    border-bottom: none;
    padding: 0;
    margin: 0;
  }
}

h1 {
  font-size: 3em;
  margin-block: 0;
}

h2 {
  font-size: 1.5em;
  margin-block: 0;
}

blockquote {
  color: var(--text-light);
  font-style: italic;
  border-left: solid;
  padding-left: 1em;
  margin-left: 1em;
}

svg {
  overflow: visible; /* prevent clipping around edges */
}

svg,
a {
  outline: none;
}

svg,
.pointless.socials > li > a {
  vertical-align: middle;
  transition:
    fill var(--glow-duration),
    color var(--glow-duration),
    filter var(--glow-duration);

  &:is(:hover, :active, :focus-visible) {
    fill: var(--glow);
    color: var(--glow);
    filter: drop-shadow(0 0 16px var(--glow));
  }
}

img#watermelon {
  position: fixed;
  top: 5px;
  right: 5px;
  width: 60px;
  height: 51px;
}

.nametag {
  color: var(--text-light);
}

.pointless {
  list-style-type: none;
  padding: 0;

  & > li {
    display: inline;
    margin-right: 1.5em;

    & > a:is(:hover, :active, :focus-visible) {
      text-shadow: 0 0 16px var(--accent-hover);
      color: var(--accent-hover);
    }
  }
}

.pointless.links > li > a,
#copyright > a,
label[for="theme-switch"] {
  &:is(:hover, :active, :focus-visible) {
    text-shadow: 0 0 16px var(--code);
    color: var(--code);
    --glow: var(--code);
  }
}

.pointless > li > a,
#copyright > a,
label[for="theme-switch"] {
  color: var(--preformatted);
  transition:
    text-shadow var(--glow-duration),
    color var(--glow-duration);
}

.webring {
  & > li {
    &:nth-child(1),
    &:nth-last-child(1) {
      display: block;
      margin-block: 0.5em;
    }
  }
}

/* Red glow breathing animation */
@keyframes breathing {
  from {
    text-shadow: 0 0 0px var(--code);
  }
  to {
    text-shadow: 0 0 16px var(--code);
  }
}
.breathing {
  animation-name: breathing;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#bar {
  color: var(--code);
}

#lambda {
  text-shadow: 0 0 2px var(--code);
}

label[for="theme-switch"] {
  cursor: pointer;
}

/* hide checkbox and label text */
#theme-switch,
label[for="theme-switch"] > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* theme switch */
#copyright {
  /* in light mode... */
  #theme-switch + label {
    .bi.bi-moon-stars-fill {
      /* show moon */
      display: initial;
    }
    .bi.bi-sun-fill {
      /* hide sun */
      display: none;
    }
  }

  /* in dark mode... */
  #theme-switch:checked + label {
    .bi.bi-moon-stars-fill {
      /* hide moon */
      display: none;
    }
    .bi.bi-sun-fill {
      /* show sun */
      display: initial;
    }
  }

  /*glow effect when Tab-selected */
  &:has(#theme-switch:is(:active, :hover, :focus-visible)) {
    label[for="theme-switch"] {
      transition:
        fill var(--glow-duration),
        color var(--glow-duration),
        filter var(--glow-duration);

      --glow: var(--code);
      fill: var(--glow);
      color: var(--glow);
      filter: drop-shadow(0 0 16px var(--glow));
    }
  }
}

@media (min-width: 480px) {
  main {
    justify-content: center;

    & > section {
      max-width: 45ch;
    }
  }

  .webring > li {
    &:nth-child(1),
    &:nth-last-child(1) {
      display: inline;
    }
  }
}

@media (min-width: 624px) {
  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 2em;
  }

  .pointless.socials > li > a {
    font-size: 1.25em;
  }
}

/* Blog/Gallery Pages */

.gl,
.bl,
.bp {
  &:is(h1) {
    font-size: 2em;
  }
  &:is(h2) {
    margin-block: 1em;
    font-size: medium;
    color: var(--text-light);
  }
  &:is(hr) {
    margin-block: 1rem;
  }
}

/* Error Page */

section.error {
  & > h1 > span {
    color: var(--code);
    text-shadow: 0 0 3px var(--code);
  }
  & > h2 {
    color: var(--glow);
    font-style: italic;
  }
}