@import '../global.css';

/* https://fontlibrary.org/en/font/aegyptus-nilus */
@font-face {
  font-family: 'Nilus';
      src: url('../fonts/Nilus.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #BCC3CD;
  color: #573703;
}

::selection {
  background: #ffd100;
  color: #573703;
}

a:hover {
  text-decoration-style: double;
}

header {
  display: flex;
  align-items: end;
  margin-top: 1rem;
  /*color: #ffd100;*/

  @media (width < 660px) {
    align-items: center;
    justify-content: flex-start;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    gap: 1ch;
  }
  @media (width < 500px) {
    flex-direction: column;
    align-items: start;
    margin-bottom: 3rem;
  }

  img {
    transform: rotate(-35deg);
    margin-bottom: -1.5rem;
    margin-left: 1rem;
    z-index: 2;
    width: 120px;
    height: 120px;

    @media (width < 660px) {
      width: 60px;
      height: 60px;
      margin-bottom: unset;
      margin-left: unset;
    }
    @media (width < 500px) {
      flex-direction: column;
    }
  }

  h1 {
    display: inline-block;
    font-size: 40px;
    font-family: 'Nilus';
    margin-bottom: 0rem;
    max-width: calc(100% - 300px);

    @media (width < 660px) {
      font-size: 32px;
      /*text-align: center;*/
      max-width: calc(100% - 200px);
    }
    @media (width < 500px) {
      font-size: 24px;
      max-width: unset;
    }
  }
}


.map-container {
  width: calc(100% - 4rem);
  height: 70vh;
  border: 5px solid #573703;
  background: #BCC3CD;
  margin: 0 2rem;
}
#map {
  width: 100%;
  height: 100%;
}
.map-container > .maplibregl-map {
  overflow: visible !important;
}

.maplibregl-ctrl-minimap {
  border: 5px solid #573703;
  margin-top: -50px !important;
  margin-right: -2rem !important;
  border-radius: 50%;
  z-index: 2;

  div {
    cursor: default !important;
  }
}

.cite {
  text-align: right;
  text-wrap: balance;
  padding-right: 2rem;
  margin-bottom: 2rem;
}

.about {
  margin-bottom: 4rem;
}

p {
  max-width: 80ch;
  font-size: 1.2em;
  /*font-family: 'Noto Sans', sans-serif;*/
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 1rem;
}

/* Adapted falling icons: https://codepen.io/siddharth-nalwaya/pen/wvXZqbq */
.falling {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;

  .leaf img {
    width: 20px;
    height: 20px;
    transform: rotate(33deg);
    filter: drop-shadow(1px 0px 1px rgba(87, 55, 3, 0.25));
  }

  .leaf-control {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1rem;
    padding-right: 2rem;
    background: #BCC3CD;
    pointer-events: all;
    display: flex;
    gap: 1ch;
    align-items: center;
    justify-content: center;

    @media (width < 660px) {
      border-left: 1px solid #573703;
      border-top: 1px solid #573703;
      padding-right: 1rem;
    }
  }
}

.falling > .leaf {
  position: absolute;
  top: -5vh;
  transition: opacity 200ms;
  opacity: 0;
}

.falling:has(input:checked) {
  .leaf {
    opacity: 1;
  }
}

@keyframes falling {
  0% {
    transform: translate3d(var(--left-ini), 0, 0);
  }

  100% {
    transform: translate3d(var(--left-end), 110vh, 0);
  }
}

.falling {
  .leaf:nth-child(2n) {
    /*filter: blur(1px);*/
    img {
      width: 25px;
      height: 25px;
      transform: rotate(200deg);
    }
  }

  .leaf:nth-child(3n) {
    img {
      transform: scaleY(-1);
    }
  }

  .leaf:nth-child(10n) {
    img {
      transform: rotate(120deg);
    }
  }

  .leaf:nth-child(1) {
    --size: 0.8vw;
    --left-ini: 0vw;
    --left-end: -1vw;
    left: 70vw;
    animation: falling 16s linear infinite;
    animation-delay: -1s;
  }

  .leaf:nth-child(2) {
    --size: 0.2vw;
    --left-ini: -7vw;
    --left-end: 10vw;
    left: 65vw;
    animation: falling 15s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(3) {
    --size: 0.2vw;
    --left-ini: -3vw;
    --left-end: 9vw;
    left: 88vw;
    animation: falling 14s linear infinite;
    animation-delay: -5s;
  }

  .leaf:nth-child(4) {
    --size: 1vw;
    --left-ini: 6vw;
    --left-end: 6vw;
    left: 1vw;
    animation: falling 10s linear infinite;
    animation-delay: -10s;
  }

  .leaf:nth-child(5) {
    --size: 0.4vw;
    --left-ini: -2vw;
    --left-end: -9vw;
    left: 74vw;
    animation: falling 13s linear infinite;
    animation-delay: -4s;
  }

  .leaf:nth-child(6) {
    --size: 0.2vw;
    --left-ini: 5vw;
    --left-end: 1vw;
    left: 35vw;
    animation: falling 13s linear infinite;
    animation-delay: -7s;
  }

  .leaf:nth-child(7) {
    --size: 0.4vw;
    --left-ini: -2vw;
    --left-end: -1vw;
    left: 27vw;
    animation: falling 10s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(8) {
    --size: 1vw;
    --left-ini: -9vw;
    --left-end: -2vw;
    left: 69vw;
    animation: falling 15s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(9) {
    --size: 0.2vw;
    --left-ini: -1vw;
    --left-end: -5vw;
    left: 84vw;
    animation: falling 11s linear infinite;
    animation-delay: -13s;
  }

  .leaf:nth-child(10) {
    --size: 0.2vw;
    --left-ini: 7vw;
    --left-end: -9vw;
    left: 82vw;
    animation: falling 10s linear infinite;
    animation-delay: -3s;
  }

  .leaf:nth-child(11) {
    --size: 0.6vw;
    --left-ini: -2vw;
    --left-end: -1vw;
    left: 48vw;
    animation: falling 10s linear infinite;
    animation-delay: -1s;
  }

  .leaf:nth-child(12) {
    --size: 0.2vw;
    --left-ini: 5vw;
    --left-end: 6vw;
    left: 39vw;
    animation: falling 15s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(13) {
    --size: 0.2vw;
    --left-ini: 6vw;
    --left-end: 5vw;
    left: 3vw;
    animation: falling 16s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(14) {
    --size: 0.8vw;
    --left-ini: -5vw;
    --left-end: -2vw;
    left: 49vw;
    animation: falling 11s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(15) {
    --size: 0.6vw;
    --left-ini: 10vw;
    --left-end: 4vw;
    left: 77vw;
    animation: falling 14s linear infinite;
    animation-delay: -4s;
  }

  .leaf:nth-child(16) {
    --size: 0.8vw;
    --left-ini: -3vw;
    --left-end: 1vw;
    left: 86vw;
    animation: falling 14s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(17) {
    --size: 1vw;
    --left-ini: 6vw;
    --left-end: -7vw;
    left: 18vw;
    animation: falling 16s linear infinite;
    animation-delay: -13s;
  }

  .leaf:nth-child(18) {
    --size: 1vw;
    --left-ini: -9vw;
    --left-end: 4vw;
    left: 64vw;
    animation: falling 13s linear infinite;
    animation-delay: -7s;
  }

  .leaf:nth-child(19) {
    --size: 1vw;
    --left-ini: 2vw;
    --left-end: -7vw;
    left: 52vw;
    animation: falling 15s linear infinite;
    animation-delay: -9s;
  }

  .leaf:nth-child(20) {
    --size: 0.4vw;
    --left-ini: 0vw;
    --left-end: 8vw;
    left: 5vw;
    animation: falling 15s linear infinite;
    animation-delay: -9s;
  }

  .leaf:nth-child(21) {
    --size: 0.6vw;
    --left-ini: -9vw;
    --left-end: -2vw;
    left: 10vw;
    animation: falling 12s linear infinite;
    animation-delay: -3s;
  }

  .leaf:nth-child(22) {
    --size: 0.8vw;
    --left-ini: -3vw;
    --left-end: -8vw;
    left: 54vw;
    animation: falling 11s linear infinite;
    animation-delay: -9s;
  }

  .leaf:nth-child(23) {
    --size: 0.6vw;
    --left-ini: -7vw;
    --left-end: -8vw;
    left: 20vw;
    animation: falling 13s linear infinite;
    animation-delay: -3s;
  }

  .leaf:nth-child(24) {
    --size: 0.4vw;
    --left-ini: 10vw;
    --left-end: -4vw;
    left: 68vw;
    animation: falling 10s linear infinite;
    animation-delay: -8s;
  }

  .leaf:nth-child(25) {
    --size: 1vw;
    --left-ini: 3vw;
    --left-end: 5vw;
    left: 90vw;
    animation: falling 14s linear infinite;
    animation-delay: -9s;
  }

  .leaf:nth-child(26) {
    --size: 1vw;
    --left-ini: -7vw;
    --left-end: 5vw;
    left: 71vw;
    animation: falling 13s linear infinite;
    animation-delay: -2s;
  }

  .leaf:nth-child(27) {
    --size: 0.6vw;
    --left-ini: 9vw;
    --left-end: 4vw;
    left: 2vw;
    animation: falling 15s linear infinite;
    animation-delay: -5s;
  }

  .leaf:nth-child(28) {
    --size: 1vw;
    --left-ini: -5vw;
    --left-end: 3vw;
    left: 23vw;
    animation: falling 12s linear infinite;
    animation-delay: -1s;
  }

  .leaf:nth-child(29) {
    --size: 0.4vw;
    --left-ini: -2vw;
    --left-end: -1vw;
    left: 39vw;
    animation: falling 14s linear infinite;
    animation-delay: -9s;
  }

  .leaf:nth-child(30) {
    --size: 0.6vw;
    --left-ini: -9vw;
    --left-end: -5vw;
    left: 76vw;
    animation: falling 10s linear infinite;
    animation-delay: -5s;
  }

  .leaf:nth-child(31) {
    --size: 0.4vw;
    --left-ini: -5vw;
    --left-end: 3vw;
    left: 14vw;
    animation: falling 15s linear infinite;
    animation-delay: -5s;
  }

  .leaf:nth-child(32) {
    --size: 0.2vw;
    --left-ini: 5vw;
    --left-end: -1vw;
    left: 86vw;
    animation: falling 10s linear infinite;
    animation-delay: -9s;
  }

  .leaf:nth-child(33) {
    --size: 0.4vw;
    --left-ini: -3vw;
    --left-end: 10vw;
    left: 66vw;
    animation: falling 11s linear infinite;
    animation-delay: -6s;
  }

  .leaf:nth-child(34) {
    --size: 1vw;
    --left-ini: -3vw;
    --left-end: 6vw;
    left: 75vw;
    animation: falling 14s linear infinite;
    animation-delay: -9s;
  }

  .leaf:nth-child(35) {
    --size: 1vw;
    --left-ini: -6vw;
    --left-end: 7vw;
    left: 22vw;
    animation: falling 14s linear infinite;
    animation-delay: -5s;
  }

  .leaf:nth-child(36) {
    --size: 1vw;
    --left-ini: 3vw;
    --left-end: 4vw;
    left: 10vw;
    animation: falling 11s linear infinite;
    animation-delay: -10s;
  }

  .leaf:nth-child(37) {
    --size: 0.6vw;
    --left-ini: 2vw;
    --left-end: 10vw;
    left: 95vw;
    animation: falling 13s linear infinite;
    animation-delay: -6s;
  }

  .leaf:nth-child(38) {
    --size: 0.8vw;
    --left-ini: 5vw;
    --left-end: 8vw;
    left: 34vw;
    animation: falling 16s linear infinite;
    animation-delay: -10s;
  }

  .leaf:nth-child(39) {
    --size: 0.8vw;
    --left-ini: 4vw;
    --left-end: 0vw;
    left: 80vw;
    animation: falling 11s linear infinite;
    animation-delay: -2s;
  }

  .leaf:nth-child(40) {
    --size: 0.8vw;
    --left-ini: 1vw;
    --left-end: -7vw;
    left: 45vw;
    animation: falling 11s linear infinite;
    animation-delay: -4s;
  }
}