.sticky {
  position: fixed;
  z-index: 9999;
  background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-dark) 80%, transparent);
  }
  backdrop-filter: blur(5px);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}
.sticky .navbar-logo {
  padding-block: calc(var(--spacing) * 2);
}
.sticky #navbarToggler span {
  background-color: var(--color-dark);
  &:where(.dark, .dark *) {
    background-color: var(--color-white);
  }
  
}

/* #navbarCollapse {
background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  &:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-dark) 80%, transparent);
  }
  backdrop-filter: blur(5px);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
} */

.sticky #navbarCollapse li > a {
  color: var(--color-dark);
  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
  &:hover {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
}
#navbarCollapse li .ud-menu-scroll.active {
  opacity: 70%;
}
.sticky #navbarCollapse li .ud-menu-scroll.active {
  color: var(--color-primary);
  opacity: 100%;
}
.sticky .loginBtn {
  color: var(--color-dark);
  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
  &:hover {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
}
.sticky .signUpBtn {
  background-color: var(--color-primary);
  color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-dark);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
}
.sticky #themeSwitcher ~ span {
  color: var(--color-dark);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.navbarTogglerActive > span:nth-child(1) {
  top: 7px;
  rotate: 45deg;
  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
.navbarTogglerActive > span:nth-child(2) {
  opacity: 0%;
}
.navbarTogglerActive > span:nth-child(3) {
  top: -8px;
  rotate: 135deg;
}

/* background: linear-gradient(95deg, #003CFF 10%, #A40E1D 50%, #F90093 70%, #F90093 100%) 95%/125% 100%; */
.bg-roseblood {
  background: linear-gradient(75deg, #640000 35%, #5d0000 55%,  #FF17A6 65%, #5d0000 85%) 95%/200% 100%;
}


.text-bluemoon {
  background: linear-gradient(75deg, #050450 35%, #03069b 45%,  #0414a0 65%, #080cd1 85%) 95%/200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
            animation: bluemoon-gradient 15s ease infinite;
            color: white;
            overflow: hidden;
        }
        
        @keyframes bluemoon-gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .text-roseblood {
  background: linear-gradient(75deg,  #FF17A6 35%,  #5a0408 45%, #A40E1D 65%, #410303 85%) 95%/200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
            animation: roseblood-gradient 15s ease infinite;
            color: white;
            overflow: hidden;
        }
        
        @keyframes roseblood-gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }


  .gradiant {
  background: linear-gradient(95deg, #247BA0 20%, #650000 55%, #FF17A6 75%, #EB6424 100%) 95%/175% 100%;
}
.bg-text {
  background: linear-gradient(95deg, #247BA0 20%, #FF499E 55%, #A40E1D 75%, #EB6424 100%) 95%/175% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.johnny-5 {
            background: linear-gradient(-45deg, #2c2c2c, #171717, #0c0c0c, #000000);
            background-size: 400% 400%;
            animation: j5-gradient 15s ease infinite;
            color: white;
            overflow-x: hidden;
        }
        
        @keyframes j5-gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

.red-sonya {
            background: linear-gradient(-45deg, #e95f5f, #a40e1d, #4e0808, #240101);
            background-size: 400% 400%;
            animation: red-sonya-gradient 15s ease infinite;
            color: white;
            overflow-x: hidden;
            opacity: 0.2;
        }
        
        @keyframes red-sonya-gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

.socialCard {
  width: fit-content;
  height: fit-content;
  background-color: rgb(238, 238, 238);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  gap: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
}

/* for all social containers*/
.socialContainer {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  background-color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: 0.3s;
}
/* instagram*/
.containerOne:hover {
  background-color: #d62976;
  transition-duration: 0.3s;
}
/* Tiktok*/
.containerTwo:hover {
  background-color: #25f4ee;
  transition-duration: 0.3s;
}
/* Facebook*/
.containerThree:hover {
  background-color: #1877f2;
  transition-duration: 0.3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: 0.3s;
}

.socialSvg {
  width: 24px;
}
.largeIcon {
  width: 27px; /* Ancho específico solo para el icono de TikTok */
}
.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialSvg:hover path {
  fill: rgb(0, 0, 0);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.black-card {
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            animation: fadeInUp 1s ease;
        }

.black-card:hover {
	transform: translateY(-10px);
}

.mirror-btn {
  font-size: 1.2rem;
  padding: 1rem 2.5rem;
  border: none;
  outline: none;
  border-radius: 0.4rem;
  cursor: pointer;
  text-transform: uppercase;
  background-color: rgb(14, 14, 26);
  color: rgb(234, 234, 234);
  font-weight: 700;
  transition: 0.6s;
  box-shadow: 0px 0px 60px #1f4c65;
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

.mirror-btn:active {
  scale: 0.92;
}

.mirror-btn:hover {
  background: rgb(2,29,78);
  background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(0, 53, 89, 1) 60%);
  color: rgb(4, 4, 38);
}


/* ------------------------------ */
 /* Animations */
/* ------------------------------ */
  @keyframes fadeIn {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }
  
  @keyframes fadeInDown {
      from {
          opacity: 0;
          transform: translateY(-20px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  @keyframes fadeInLeft {
      from {
          opacity: 0;
          transform: translateX(-20px);
      }
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }
  
  @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translateX(20px);
      }
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }
  
  @keyframes float {
      0% {
          transform: translateY(0px);
      }
      50% {
          transform: translateY(-20px);
      }
      100% {
          transform: translateY(0px);
      }
  }


/* ------------------------------ */
/* lighbox gallery */
/* ------------------------------ */
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 10vh 5vw 5vh 5vw;
  overflow:hidden;
  background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-image {
  display: block;
  margin: auto;
  max-width: 100%;
 max-height: 100%;
 background-image: url(img/paper-01.jpg);
}
.close {
  color: #fff;
  font-size: 3em;
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
}
.gallery {
  margin: 0 auto;
  
}
.gallery img {
  max-width: 100%;
  cursor: pointer;
  /* border-radius:10px; */
}
.gallery img:hover {
  max-width: 100%;
  cursor: pointer;
  transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.1) scaleY(1.1); 
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; 
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
	transition-duration: 500ms;
}


/* ------------------------------ */
/* toggle switch */
/* ------------------------------ */
.theme-switch {
  --toggle-size: 14px;
  /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  /* radius 0 - minecraft mode :) */
  --container-light-bg: #3d7eae;
  --container-night-bg: #1d1f2c;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ecca2f;
  --moon-bg: #c4c9d1;
  --spot-color: #959db1;
  --circle-container-offset: calc(
    (var(--circle-container-diameter) - var(--container-height)) / 2 * -1
  );
  --stars-color: #fff;
  --clouds-color: #f3fdff;
  --back-clouds-color: #aacadf;
  --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow:
    0em -0.062em 0.062em rgba(0, 0, 0, 0.25),
    0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  box-shadow:
    0em -0.062em 0.062em rgba(0, 0, 0, 0.25),
    0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  background-image: linear-gradient(
    to bottom,
    var(--container-light-bg) 0%,
    #5490c0 100%
  );
  transition: all var(--transition);
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-box-shadow:
    0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset,
    0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  box-shadow:
    0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset,
    0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  -webkit-box-shadow:
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    0 0 0 0.625em rgba(255, 255, 255, 0.1),
    0 0 0 1.25em rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    0 0 0 0.625em rgba(255, 255, 255, 0.1),
    0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  -webkit-box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #a1872a inset;
  box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #a1872a inset;
  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25))
    drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25))
    drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  transform: scale(1);
  transition: transform 0.3s ease;
}

.theme-switch__sun-moon-container:hover {
  transform: scale(1.1) rotate(5deg);
}

.theme-switch__moon {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  -webkit-box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #969696 inset;
  box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #969696 inset;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  transition:
    all var(--transition),
    transform 0.3s ease;
}

.theme-switch__moon:hover {
  transform: rotate(15deg);
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  transition: background-color 0.3s ease;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__moon:hover .theme-switch__spot {
  background-color: #7a7f8c;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  -webkit-box-shadow:
    0.937em 0.312em var(--clouds-color),
    -0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color),
    0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color),
    1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color),
    2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color),
    2.625em 0em var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color),
    3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color),
    4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  box-shadow:
    0.937em 0.312em var(--clouds-color),
    -0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color),
    0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color),
    1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color),
    2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color),
    2.625em 0em var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color),
    3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color),
    4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
  background-image: linear-gradient(
    to bottom,
    var(--container-night-bg) 0%,
    #2d3142 100%
  );
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__circle-container {
  left: calc(
    100% - var(--circle-container-offset) - var(--circle-container-diameter)
  );
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__circle-container:hover {
  left: calc(
    100% - var(--circle-container-offset) - var(--circle-container-diameter) -
      0.187em
  );
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__stars-container {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.theme-switch__container:hover .theme-switch__clouds {
  transform: translateX(15px) scale(1.02);
}

.theme-switch__sun-moon-container::after {
  content: "";
  position: absolute;
  inset: -5px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__sun-moon-container:hover::after {
  opacity: 1;
}

.theme-switch__shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  top: 20%;
  left: -10%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__shooting-star-2 {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  top: 35%;
  left: -10%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__meteor {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffd700;
  border-radius: 50%;
  top: -10%;
  left: 50%;
  opacity: 0;
  filter: blur(1px);
  transition: opacity 0.3s ease;
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__shooting-star {
  animation: shootingStar 2s linear infinite;
  opacity: 1;
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__shooting-star-2 {
  animation: shootingStar 3s linear infinite 1s;
  opacity: 1;
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__meteor {
  animation: meteor 4s linear infinite 2s;
  opacity: 1;
}

@keyframes shootingStar {
  0% {
    transform: translateX(0) translateY(0) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translateX(150px) translateY(150px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes meteor {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(150px) scale(0.3);
    opacity: 0;
  }
}

.theme-switch__stars-cluster {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__stars-cluster .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px white;
}

.theme-switch__stars-cluster .star:nth-child(1) {
  top: 20%;
  left: 20%;
  animation: twinkle 1s infinite ease-in-out;
}
.theme-switch__stars-cluster .star:nth-child(2) {
  top: 30%;
  left: 55%;
  animation: twinkle 1s infinite ease-in-out 0.3s;
}
.theme-switch__stars-cluster .star:nth-child(3) {
  top: 40%;
  left: 80%;
  animation: twinkle 1s infinite ease-in-out 0.6s;
}
.theme-switch__stars-cluster .star:nth-child(4) {
  top: 60%;
  left: 30%;
  animation: twinkle 1s infinite ease-in-out 0.9s;
}
.theme-switch__stars-cluster .star:nth-child(5) {
  top: 70%;
  left: 65%;
  animation: twinkle 1s infinite ease-in-out 1.2s;
}

.theme-switch__aurora {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(
    90deg,
    rgba(0, 255, 255, 0) 0%,
    rgba(0, 255, 255, 0.2) 25%,
    rgba(128, 0, 255, 0.2) 50%,
    rgba(0, 255, 255, 0.2) 75%,
    rgba(0, 255, 255, 0) 100%
  );
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-100%);
  transition: opacity 0.3s ease;
}

.theme-switch__comets {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__comets .comet {
  position: absolute;
  width: 2px;
  height: 2px;
  background: linear-gradient(90deg, white 0%, transparent 90%);
  border-radius: 50%;
  filter: blur(1px);
}

.theme-switch__comets .comet:nth-child(1) {
  top: 30%;
  left: -10%;
  animation: cometMove 4s linear infinite;
}

.theme-switch__comets .comet:nth-child(2) {
  top: 50%;
  left: -10%;
  animation: cometMove 6s linear infinite 2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes cometMove {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(200px) translateY(200px) rotate(-45deg) scale(0.2);
    opacity: 0;
  }
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__stars-cluster {
  opacity: 1;
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__aurora {
  opacity: 1;
  animation: auroraWave 8s linear infinite;
}

.theme-switch__checkbox:checked
  + .theme-switch__container
  .theme-switch__comets {
  opacity: 1;
}

@keyframes auroraWave {
  0% {
    transform: translateY(-100%) translateX(-50%);
  }
  100% {
    transform: translateY(-100%) translateX(50%);
  }
}




/*   
  #mySidenav a {
    position: fixed;
    left: -100px;
    transition: 0.3s;
    padding: 5px 5px 5px 10px;
    width: 160px;
    text-decoration: none;
    font-size: 20px;
    color: black;
    border-radius: 0 5px 5px 0;
    z-index: 1;
  }
  #mySidenav img {
    width:40px;
    filter: drop-shadow(2px 3px 2px #222);
  }
  #mySidenav a:hover {
    left: 0;
    background-color:#c6ad8f;
  }

     #home {
    top: 32px;
  }
  #about {
    top: 92px;
  }
  #work {
    top: 152px;
  }
  #contact {
    top: 212px;
  } */

/* grid menu

 .pen-title {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%) scale(1);
	 transition: all 300ms ease;
	 z-index: 2;
	 opacity: 1;
	 transition-delay: 600ms;
	 cursor: pointer;
	 color: #fff;
	 font-family: Helvetica, arial, sans-serif;
	 text-align: center;
}
 .pen-title .info {
	 font-size: 10px;
	 letter-spacing: 3px;
	 font-weight: bold;
	 color: #C6AD8F;
}
 .pen-title h1 {
	 letter-spacing: 4px;
	 margin: 2px auto;
	 font-size: 18px;
}
 .pen-title.menu-trigger--menu-open {
	 opacity: 0;
	 top: -100%;
	 transform: translate(-50%, -50%) scale(0.1);
	 transition-delay: 0ms;
	 z-index:9999;
}
 .main-navigation {
	 display: flex;
	 flex-direction: column;
	 flex: 1 1 auto;
	 justify-content: center;
	 align-items: center;
	 width: 100%;
	 height: 100%;
}
 .main-navigation .main-navigation__link {
	 text-decoration: none;
	 color: #fff;
	 font-size: 1.5rem;
	 font-family: Helvetica, arial, sans-serif;
	 padding: 4% 0.2rem;
	 font-weight: bold;
	 transition: all 300ms ease;
	 position: relative;
	 display: block;
}
 @media (min-width: 480px) {
	 .main-navigation .main-navigation__link {
		 font-size: 2rem;
	}
}
 .main-navigation .main-navigation__link:after {
	 content: '';
	 display: block;
	 width: 10px;
	 height: 2px;
	 background: #C6AD8F;
	 position: absolute;
	 bottom: 18%;
	 left: 0;
	 transform-origin: left;
	 transition: all 300ms ease-out;
}
 .main-navigation .main-navigation__link:hover:after {
	 transform: scaleX(4);
}
 .btn-link {
	 display: flex;
	 height: 100%;
	 width: 100%;
	 flex: 1 1 auto;
	 justify-content: center;
	 align-items: center;
	 text-decoration: none;
	 color: #272727;
	 font-size: 14px;
	 font-weight: bold;
	 letter-spacing: 3px;
	 font-family: Helvetica, arial, sans-serif;
	 position: relative;
}
 .btn-link:before {
	 content: '';
	 position: absolute;
	 display: block;
	 width: 1px;
	 height: calc(50% - 60px);
	 transform-origin: top;
	 transition: all 300ms ease;
	 transform: scaleY(0);
	 background: #272727;
	 top: 20px;
	 left: 50%;
	 margin-left: -2px;
	 opacity: 1;
}
 .btn-link:hover:before {
	 transform: scaleY(1);
}
 .menu-button {
	 position: fixed;
	 top: 20px;
	 right: 20px;
	 z-index: 3;
	 background: #C6AD8F;
   color:#000;
	 border: none;
	 box-shadow: none;
	 outline: none;
	 width: auto;
	 height: auto;
	 padding: 4px 12px;
	 font-family: Helvetica, arial, sans-serif;
	 font-size: 16px;
	 cursor: pointer;
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 justify-content: center;
	 border-radius: 50%;
	 transition: all 300ms ease;
}
 .menu-button:after {
	 content: '+';
	 display: block;
   width:34px;
	 color: #000;
	 font-size: 34px;
	 font-weight: 700;
	 transition: all 300ms ease;
}
 .menu-button:hover {
	 transform: scale(1.1);
}
 .menu-button.menu-trigger--menu-open:after {
	 transform: rotate(765deg);
}
 .menu {
	 height: 100vh;
	 width: 100vw;
	 display: grid;
	 overflow-y: auto;
	 grid-template-columns: 100%;
	 grid-template-rows: 20% 20% 20% 10% 10% 10% 10%;
}
 @media (min-width: 480px) {
	 .menu {
		 grid-template-columns: 30% 70%;
		 grid-template-rows: 25% 25% 25% 25%;
	}
}
 @media (min-width: 800px) {
	 .menu {
		 grid-template-columns: 20% 30% 50%;
		 grid-template-rows: 60% 40%;
	}
}
 .menu__item {
	 opacity: 0;
	 transition: all 200ms ease;
	 overflow: hidden;
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 flex: 1 1 auto;
}
 .menu__item .menu__item__bg-container {
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 top: 0;
	 left: 0;
	 background-size: cover;
	 background-repeat: no-repeat;
	 background-position: center;
	 mix-blend-mode: overlay;
	 transform-origin: center;
	 transform: scale(2);
	 transition: all 2000ms ease-out;
	 z-index: 1;
}
 .menu__item .menu__item__content {
	 display: flex;
	 flex: 1 1 auto;
	 justify-content: center;
	 align-items: center;
	 height: 100%;
	 width: 100%;
	 position: relative;
	 z-index: 2;
	 opacity: 0;
	 transition: all 300ms ease;
}
 .menu__item:first-child {
	 background-color: #272727;
}
 .menu__item:first-child .btn-link {
	 color: #eee;
}
 .menu__item:first-child .btn-link:before {
	 background: #ccc;
}
 .menu__item:nth-child(2) {
	 background-color: #C6AD8F;
}
 .menu__item:nth-child(3) {
	 background-color: #272727;
	 grid-column-start: 1;
	 grid-row-start: 1;
	 grid-row-end: 4;
}
 @media (min-width: 480px) {
	 .menu__item:nth-child(3) {
		 grid-column-start: 2;
		 grid-row-start: 1;
		 grid-row-end: 5;
	}
}
 @media (min-width: 800px) {
	 .menu__item:nth-child(3) {
		 grid-column-start: 3;
		 grid-row-start: 1;
		 grid-row-end: 3;
	}
}
 .menu__item:nth-child(4) {
	 background-color: #e17055;
}
 .menu__item:nth-child(5) {
	 background-color: #eee;
}
 .menu__item:nth-child(1) {
	 transition-delay: 50ms;
	 transform-origin: bottom;
	 transform: scaleY(0);
}
 .menu__item:nth-child(1) .menu__item__bg-container {
	 background-image: url(../img/work/alfred-skyline.jpg);
}
 .menu__item:nth-child(1) .menu__item__content {
	 transition-delay: 0ms;
}
 .menu--open .menu__item:nth-child(1) {
	 transition-delay: 200ms;
}
 .menu--open .menu__item:nth-child(1) .menu__item__content {
	 transition-delay: 700ms;
}
 .menu__item:nth-child(2) {
	 transition-delay: 100ms;
	 transform-origin: left;
	 transform: scaleX(0);
}
 .menu__item:nth-child(2) .menu__item__bg-container {
	 background-image: url(../img/work/beetlejuice.jpg);
}
 .menu__item:nth-child(2) .menu__item__content {
	 transition-delay: 50ms;
}
 .menu--open .menu__item:nth-child(2) {
	 transition-delay: 400ms;
}
 .menu--open .menu__item:nth-child(2) .menu__item__content {
	 transition-delay: 900ms;
}
 .menu__item:nth-child(3) {
	 transition-delay: 150ms;
	 transform-origin: bottom;
	 transform: scaleY(0);
}
 .menu__item:nth-child(3) .menu__item__bg-container {
	 background-image: url(../img/madi-57.jpg);
}
 .menu__item:nth-child(3) .menu__item__content {
	 transition-delay: 100ms;
}
 .menu--open .menu__item:nth-child(3) {
	 transition-delay: 600ms;
}
 .menu--open .menu__item:nth-child(3) .menu__item__content {
	 transition-delay: 1100ms;
}
 .menu__item:nth-child(4) {
	 transition-delay: 200ms;
	 transform-origin: left;
	 transform: scaleX(0);
}
 .menu__item:nth-child(4) .menu__item__bg-container {
	 background-image: url(../img/work/clown-fish.jpg);
}
 .menu__item:nth-child(4) .menu__item__content {
	 transition-delay: 150ms;
}
 .menu--open .menu__item:nth-child(4) {
	 transition-delay: 800ms;
}
 .menu--open .menu__item:nth-child(4) .menu__item__content {
	 transition-delay: 1300ms;
}
 .menu__item:nth-child(5) {
	 transition-delay: 250ms;
	 transform-origin: bottom;
	 transform: scaleY(0);
}
 .menu__item:nth-child(5) .menu__item__bg-container {
	 background-image: url(../img/work/niagara-falls.jpg);
}
 .menu__item:nth-child(5) .menu__item__content {
	 transition-delay: 200ms;
}
 .menu--open .menu__item:nth-child(5) {
	 transition-delay: 1000ms;
}
 .menu--open .menu__item:nth-child(5) .menu__item__content {
	 transition-delay: 1500ms;
}
 .menu--open .menu__item {
	 transform: scale(1);
	 opacity: 1;
	 transition: all 400ms ease;
}
 .menu--open .menu__item .menu__item__bg-container {
	 transform: scale(1);
}
 .menu--open .menu__item .menu__item__content {
	 opacity: 1;
}
 .menu--open .menu__item:hover .menu__item__bg-container {
	 transform: scale(1.2);
} */

/* @import "https://unpkg.com/normalize.css";

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

:root {
	--gap: 1rem;
	--card-width: clamp(280px, 19vw, 100vw);
	--card-aspect-ratio: 5 / 7;
	--card-height: calc(var(--card-width) * (7 / 5));
}

.scroll-body {
	display: grid;
	place-items: center;
	font-family:  'Google Sans', sans-serif, system-ui;
	overflow-x: hidden;
	justify-content: center;
	min-height: 100vh;
}

.scroll-grid {
	display: grid;
	justify-content: center;
	grid-template-columns: repeat(5, var(--card-width));
	gap: 1rem;
  /* overflow: hidden shouldn't break this? */
  overflow: hidden;
}

.grid-wrapper {
	/* overflow: hidden; */
}

.scroll-column {
	display: grid;
	gap: 1rem;
  align-content: start;
}

.scroll-column:not(:nth-of-type(3)) {
	-webkit-animation: scale 1s linear both;
	        animation: scale 1s linear both;
	animation-timeline: scroll(root);
}

/* The distance is the number of cards minus 100vh */
.scroll-column:is(:nth-of-type(2), :nth-of-type(4)) {
	--origin: calc(var(--gap) * -1);
	--destination: calc(var(--card-height) * 1.5 + var(--gap));
}
.scroll-column:is(:nth-of-type(1), :nth-of-type(5)) {
	--origin: calc(var(--gap) * -2);
	--destination: calc(var(--card-height) * 3.4 + var(--gap));
}

@-webkit-keyframes scale {
	0% {
		transform: translateY(var(--origin, 0%));
	}
	100% {
		transform: translateY(var(--destination, -50%));
	}
}

@keyframes scale {
	0% {
		transform: translateY(var(--origin, 0%));
	}
	100% {
		transform: translateY(var(--destination, -50%));
	}
}

.scroll-img {
	max-width: 100%;
	border: 0;
	padding: 0;
	max-height: 100%;
	width: 100%;
	aspect-ratio: 5 / 7;
	background: hsl(0 0% 80%);
} */