*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: "Nothing You Could Do", cursive;
}

:root {
  --monk-color: #f53900;
  --render-opacity: 0.5;
  --bg-daylight: linear-gradient(
    0deg,
    rgba(255, 167, 81, 1) 0%,
    rgba(255, 226, 89, 1) 100%
  );
  --bg-night: linear-gradient(
    0deg,
    rgba(153, 100, 49, 1) 0%,
    rgba(153, 136, 53, 1) 100%
  );
  --bg-opacity: 0;
  --bg-transition-duration: 0.5s;
  --going-to-sleep: 2000; /* in Milliseconds */
  --pupils-opacity: 0;
  --fly-opacity: 0;
  --fly-opacity-transition-duration: 0.5s;
  --fly-width: 20;
  --fly-height: 20;

  --pointer-x: 0;
  --pointer-y: 0;
  --my-x: 40;
  --my-y: 40;

  --eyesize: clamp(4px, 3.5vw, 26px);
  --eye-clip-path: ellipse(100% 5% at 0% 50%);
  --eye-right-rotate: rotate(180deg);
  --eye-bg-color: var(--monk-color);
  --eye-bg-transition-duration: 0.18s;

  /* Variables for calculation */
  --calculation: atan2(
    calc(
      var(--pointer-x) - var(--my-x) - (var(--fly-width) / 2) +
        var(--eye-correction-without-unit)
    ),
    calc(var(--pointer-y) - var(--my-y) - (var(--fly-height) / 2) + 0) * -1
  );
  --fly-x: calc(var(--my-x) * 1px);
  --fly-y: calc(var(--my-y) * 1px);
  --eye-correction: clamp(1px, 1vw, 80px);
  --eye-correction-without-unit: 0; /* => --eye-correction without units (for calculation purposes), set in javascript.js */
  --pupil-size: calc(var(--eyesize) / 2);
  --pupil-size-without-unit: 0;
  --pupilDegree: 0deg;
}

[data-theme="daylight"] {
  --old-bg-primary: linear-gradient(
    0deg,
    rgba(140, 120, 10, 1) 0%,
    rgba(251, 255, 0, 1) 100%
  );
  --bg-opacity: 1;
  --fly-opacity: 1;
  --fly-opacity-transition-duration: 0s;
  --render-opacity: 1;
  --pupils-opacity: var(--render-opacity);
  --eye-bg-color: white;
  --eye-clip-path: ellipse(100% 100% at 0% 50%);
  --eye-right-rotate: rotate(0deg);
  --eye-bg-transition-duration: 0s;
}

body {
  width: 100vw;
  height: 100svh;
}

.wrapper {
  display: grid;
  grid-template-rows: minmax(min-content, 12vw) 1fr min-content;
  overflow-x: clip;
  overflow-clip-margin: 40px;
  height: 100%;
  width: 100%;
  position: relative;
  background-image: var(--bg-night);
  z-index: 1;
  transition: background-image var(--bg-transition-duration) linear;
  container-type: inline-size;
  container-name: wrapper;

  & header {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: var(--render-opacity);

    & h1 {
      padding: 2.5rem 1.5rem;
      font-size: clamp(1.8rem, calc(1rem + 2.5vw), 4.6rem);
      margin-top: calc(140px - 10vw);
      text-align: center;
      line-height: 1.12;
    }
  }

  & .monk-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    & .monk {
      width: min(600px, 80vw);
      position: relative;
      color: var(--monk-color);

      & .my-monk-body {
        width: 100%;
        height: 100%;
        opacity: var(--render-opacity);
        transition: opacity var(--fly-opacity-transition-duration) linear;
      }

      & .my-monk-eye {
        position: absolute;
        top: calc(14% + (var(--eyesize) / 2));
        right: calc(50% - (var(--eyesize) / 2));
        z-index: 10;
        background-color: var(--eye-bg-color);
        width: var(--eyesize);
        height: var(--eyesize);
        border-radius: 50%;
        clip-path: var(--eye-clip-path);
        transition: background-color var(--eye-bg-transition-duration) linear,
          clip-path var(--eye-bg-transition-duration) linear;

        &:nth-of-type(1) {
          translate: calc(var(--eyesize) * -1) calc(var(--eye-correction) * -1);
        }

        &:nth-of-type(2) {
          translate: calc(var(--eyesize) * 1) calc(var(--eye-correction) * -1);
          transform: var(--eye-right-rotate);
        }

        & .pupil {
          position: absolute;
          top: calc(var(--eyesize) / 2 - var(--pupil-size) / 2);
          left: calc(var(--eyesize) / 2 - var(--pupil-size) / 2);
          width: var(--pupil-size);
          height: var(--pupil-size);
          z-index: 20;
          border-radius: 50%;
          background-color: var(--monk-color);
          --multiplier: calc(var(--eyesize) - (var(--pupil-size) * 1.5));
          translate: calc(cos(var(--pupilDegree)) * var(--multiplier))
            calc(sin(var(--pupilDegree)) * var(--multiplier));
          opacity: var(--pupils-opacity);
        }
      }
    }
  }

  & #my-fly {
    position: absolute;
    width: clamp(8px, 7cqw, 40px);
    top: 0;
    left: 0;
    translate: var(--fly-x) var(--fly-y);
    color: black;
    rotate: var(--calculation);
    z-index: 10;
    transition: translate 0.2s linear;
    opacity: var(--fly-opacity);
    transition: opacity var(--fly-opacity-transition-duration) linear;
  }

  &::before {
    z-index: -1;
    position: absolute;
    content: "";
    background-image: var(--bg-daylight);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: var(--bg-opacity);
    transition: opacity var(--bg-transition-duration) linear;
  }

  & footer {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    color: var(--monk-color);
    margin: 0 0.4rem 0.8rem;
    font-family: monospace, sans-serif;

    & h2 {
      font-size: 0.6rem;
      color: var(--monk-color);
      text-align: center;
      text-decoration: underline;
      margin-bottom: 0.5rem;
    }

    & .footer-container {
      font-size: 0.8rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      grid-template-rows: repeat(3, min-content);
      list-style-type: none;
      gap: 1rem;

      & li {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;

        & a {
          color: inherit;
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.5);
          transition: background-color 0.2s linear;
          padding: 0.4rem 0.8rem;
          border-radius: 10px;
          cursor: pointer;

          &:hover {
            background-color: rgba(255, 255, 255, 0.85);
          }
        }
      }
    }
  }
}