/*  -----  Global Animations  -----  */
@keyframes rainbow {
    0% {
      background-position: 0% 82%;
    }
    50% {
      background-position: 100% 19%;
    }
    100% {
      background-position: 0% 82%;
    }
  }
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}



/*  -----  Body, BGs, Globals, Main  -----  */
:root {
    --fontBig:calc(20px + 1.25vw);
    --fontBigMobile:font-size: calc(13px + 1.5vw);
    --fontSmol:14px;
    --fontSmolMobile:12.5px;
    --glow:drop-shadow(0px 0px 6px white);
    --emissive:3px 3px 10px rgba(255, 255, 0, 0.378), -3px -3px 10px rgba(255, 255, 0, 0.378)
    --inset:box-shadow: 3px 3px 5px -2px rgba(0,0,0,.35),0 0 5px rgba(0,0,0,.35),inset 0 0 0 5px #fefbf2,inset 0 0 0 6px #ff7200;
}
html {
  scroll-behavior: smooth;
}
img {
  max-width: 100%;
  max-height: 100%;
  filter: var(--glow);
  border-radius: 15px;
}  

body {
  animation: fadeIn 3s ease;
  color: white;
  overflow-x: hidden;
  line-height: 3;
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: fit-content;
}
::selection {
  background-color: #ffffff25;
  box-shadow: var(--emissive);
}
p {
  filter: var(--glow)
}
ul {

  padding: 0px;
  list-style-type:none;
  > li {
    filter: var(--glow);
  }
  
}



/* main content.... */

main {
 
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow-x: hidden; 
  overflow-y: hidden;
  
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  
  touch-action: pan-y;
  width: 400vw;
  gap: 50vw;
  justify-content: left;
  
}
main section {
  scroll-snap-align: center;
  max-height: 70%;
  position: relative;
  background-color: rgba(132, 189, 238, 0.102);
  border-radius: 15px;
  filter: var(--glow);
  margin: 10rem;
  padding: 1rem;
  img {
    max-width: 30%;
  }
  
}
#skills {
  transform: translateY(20vh);
  filter: hue-rotate(33deg) var(--glow);
  > p {
    text-align: left;
    margin-left:2rem;
  }
  h2 {
    text-align: center;
  }
}
#vices {
  transform: translateY(10vh);
  display: grid;
  align-items: center;
  background-color: rgba(47, 62, 75, 0.242);
  ul {
    align-self: center;
    gap:1rem;
    display: grid;
    grid-template-columns:repeat(2, 1fr)
    
  }
  ul >li:nth-child(1) {
    animation: fadeIn 5s alternate-reverse 2s infinite;
  }
  ul >li:nth-child(2) {
    animation: fadeIn 10s alternate-reverse 5s infinite;
  }
  ul > li:nth-child(3) {
    animation: fadeIn 3s alternate-reverse 7s infinite;
  }ul > li:nth-child(4) {
    animation: fadeIn 7s alternate-reverse -5s infinite;
  }ul > li:nth-child(5) {
    animation: fadeIn 7s alternate-reverse -1s infinite;
  }
  ul > li:nth-child(6) {
    animation: fadeIn 4s alternate-reverse -10s infinite;
  }
}
#intro {
  background-color: rgba(118, 31, 104, 0.037);
  
  
  
}

#captivations {
  transform: translateY(-10vh);
  ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style-type:none;
    gap:1rem;
  }
}

.section-active {
  opacity: 1;
}


/* backgrounds... */
.fullscreen-bg {
  height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    pointer-events: none;
}
#voicesWrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  filter: blur(2px) drop-shadow(0px 0px 6px white);
  opacity: 0.25;
  font-size: 25px;
  text-align: left;
  mix-blend-mode: overlay;
}

#voicesWrapper div {
  position: absolute;
  pointer-events: none;
  width: 1000px;
  font-family: geo-oblique;
  opacity: 0;
}
#vignette {
  background-color: hsla(0, 0%, 0%, 0.25);
  box-shadow: 0 0 200px #ffffff inset;
  z-index: -1;
}
#intro-sec__bg {
  background-image: url('../images/rainbowprismslow.webp');
  background-color: rgba(238, 130, 238, 0.332);
  background-blend-mode: color-burn;
  
  z-index: -1;
  box-shadow: var(--inset);
  filter: blur(10px) brightness(1.2);  
  border-radius: 15px;
  opacity: 0.3;
  background-size: 1000px;
}
#vices-sec__bg {
  background-image: url(../images/snowfall.gif);
  mix-blend-mode: exclusion;
  border-radius: 15px;
  background-blend-mode: screen;
  /* background-color: rgba(132, 189, 238, 0.428); */
  background-color: rgba(36, 39, 42, 0.154);
  opacity: 0.3;
  background-size: 50%;
  image-rendering: pixelated;
  filter: drop-shadow(0px 0px 6px rgba(36, 39, 42, 0.842));;
  
}
#skills-sec__bg {
  background-image: url('../images/11716339_66c48.gif');
  mix-blend-mode: initial;
  opacity: 0.1;
  background-size: 100%;
}
#rainbow-bg {
    z-index: -5;
    
    background: linear-gradient(
      45deg,
      #ff2400,
      #de0d0d,
      #fe00b1,
      #ccb800,
      #2bc235,
      #00c3ff,
      #9900ff,
      #dd00f3,
      #de0d0d,
      #ff2400
    );
    background-size: 3500% 1000%;
    animation: rainbow 30s linear alternate infinite;
    opacity: 0.85;
    transition: all ease-in-out 0.3s;
  }
#fullscreen-bg__video {
    mix-blend-mode: screen;
    transition: all ease-in-out 0.3s;
    filter: brightness(1.5) blur(2.5px);
    display: block;
    
    object-fit: cover;
    overflow: hidden;
    
    
    z-index: -4;
    
}



/*  ----  navigation  -----   */
.option-nav {
  position: fixed;
  bottom: 0;
  right: 2vw;
}


.option-nav ul {
  list-style-type: none;
  padding: 0px;
  scroll-snap-type: y mandatory;
  display: grid;
  gap: 10vw;
  transition: all 1s ease;
  transform-origin: 0% 10%;
  rotate: 45deg; 
  transition-behavior: allow-discrete;
}
.option-btn {
  background-color: #ffffff25;
  transition: all 0.3s ease;
  rotate: -45deg;
  border-radius: 12px;
  color: white;
}
.active {
  font-size: var(--fontBig);
  background-color: #cbe7a945;
  padding: 2rem;

  color: white;
}

input { 
  all: unset;
  
  
  
}
label[for="utgång-meny"] {
  pointer-events: all;
  cursor: pointer;
  transition: all 0.3s ease;
  position: fixed;
  bottom: 10px;
  right: 10px;
  min-height: 20px;
  min-width: 40px;
  padding: 4px 10px;
  background: rgba(135, 207, 235, 0.425);
  border-radius: 30px;
  color: rgb(119, 78, 108);
  /* animate text shadow? */
  text-shadow: 1px 1px 7px purple;
  box-shadow: 0px 0px 0px 4px white, 0px 0px 0px 10px rgba(135, 207, 235, 0.425);
}
body:has(#utgång-meny:checked) {
    .option-nav ul {
      opacity: 0;
      pointer-events: none;
      content-visibility: hidden;
    }
}

@media (orientation:portrait) {
  html {
    /* touch-action: pan-y; */
    overflow-x: hidden; 
    /* :sob: im so sorry  */
  }
    body {
      
      overflow-x: hidden;
    }

    #rainbow-bg {
      background-size: 100% 2000%;
    }
    #vice
    main {
      gap: 19.2vw;
      overflow-y: unset;
    }
    main section {
      margin: 0px 1vw 9vh;
      max-height: unset;
      
    }
    #vices {
      transform: unset;
    }
    #skills {
      transform: unset;
    }
    #captivations {
      transform: unset;
    }
    #intro {
      font-size: var(--fontSmolMobile)
    }

    .active {
      font-size: var(--fontBigMobile);
    }
    .option-nav ul {
      transform-origin: unset;
      transform: translateX(-24vw);
    }
}