@import url(https://fonts.bunny.net/css?family=raleway:100);

:root {
  --cta: chartreuse; /*steelblue*/
  --mouse-color: var(--cta);
  --first-word-color: var(--cta);
  --circle-size: 26vw;
  --radius: calc(var(--circle-size) / 2);
  --letter-spacing: 2ch;
  --letter-angle-delta: 48deg; 
}

html, body, div, main, header, footer, h1, h6 {
  margin: 0;
  padding: 0;
}

html {
  font-family: "Flavors",  'Arial', sans-serif;
  font-size: 3em;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
  color: white;
  background: #222;
}

body {
  background-image: url("../images/bg3-tall.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 800svh;  
  width: 100%;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 24px;
  left: 50%;
  translate: -50%;
}

section {
}

#flagbtn {
  position: fixed;
  right: 30px;
  top: 30px;
  > img {
    width: 40px;
  }
  z-index: 1;
}

#bucket {
  position: fixed;
  left: 24px;
  top: 24px;
  z-index: 1;
  cursor: pointer;
  > img {
    width: 56px;
  }
}

/************ spiral navigation ***************/
.mouse {
  position: fixed;
  top:50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
  width: 50px;
  height: 50px;
  opacity: 1;
  color:var(--mouse-color);
    display: none;
  animation-name: mouse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-timeline: scroll(root block);
  @supports  (animation-timeline: scroll()) {
    display: block;
  }
}

@keyframes mouse {
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
  
ul {
  --count: sibling-count();
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 50%;
  transform: rotate(calc(var(--rotate) * 360deg));
  animation: --scroll-rotate;
  animation-timeline: scroll(root block);
  > li {
    --i: sibling-index();
    position: absolute;
    inset: 50%;
    transform: rotate(calc(360deg / var(--count) * (var(--i) - 1)));
    &:first-child a {
      color: var(--first-word-color);
      :hover {
        color: white;
      }
    }
    > a > span {
      --i: sibling-index();
      --letter-rotate: var(--rotate);
      /* calculate initial offset for each letter  */
      --letter-scramble-angle: calc(var(--i) * var(--letter-angle-delta));
      --letter-angle: calc(var(--letter-scramble-angle) * (1 - var(--letter-rotate)));
    
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: 0 0;
      display: inline-block;
      font-size: clamp(1rem, 3.5vw + .065rem,  1.2rem);
      transform: 
        rotate(var(--letter-angle))
        translateX(var(--radius))
        translateX(calc((var(--i) - 1) * var(--letter-spacing)));
    }
  }
}
  
@keyframes --scroll-rotate {
  100%{
    --rotate: 1;
  }
}
/*************** end spiral navigation **************/

footer {
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  font-size: 24px;
  font-weight: 100;
  line-height: 1;
  Font-family: "Raleway", Helvetica, sans-serif;

}

li > a {
  color: white;
}
li > a:hover {
  color: chartreuse;
}

#coffee-btn, #neocities {
  width: 96px;
  height: 28px;
  margin-top: 8px;
}

/********** under construction sign ************/
#ucsign {
    height: 8vh;
}

.letter {
    fill: none;
    stroke: rgb(255, 208, 0);
    stroke-miterlimit: 7;
    stroke-width: 8px;
    animation: letter 2.5s ease-in-out infinite alternate;
}

.rect {
    fill: none;
    stroke: white;
    stroke-miterlimit: 10;
    stroke-width: 8px;
    animation: rect 8s infinite alternate, 
    stroke-color 3s infinite alternate;
}

@keyframes letter {
    0% {
        stroke-dasharray: 678px 678px;
        stroke-dashoffset: 678px;
    }  
    10% {
        stroke-dasharray: 678px 678px;
        stroke-dashoffset: 678px;
    }
    70% {
        stroke-dasharray: 678px 678px;
        stroke-dashoffset: 0px;
    }
}

@keyframes rect {
    5% {
        stroke-dasharray: 3588px 3588px;
        stroke-dashoffset: 0px;
    }
    100% {
        stroke-dasharray: 200px 150px;
        stroke-dashoffset: 3588px;
    }
}

@keyframes stroke-color {
    0% {
        stroke: rgb(255, 94, 0);
    }
    100% {
        stroke: crimson;
    }
}
/********** end under construction sign ************/