@font-face {
  font-family: "RampartOne";
  src:
  url(../fonts/RampartOne-Regular.ttf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Chewy";
  src:
  url(../fonts/Chewy-Regular.ttf);
  font-weight: 400;
  font-style: normal;
}

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

/**************************
* MARK: Custom properties
**************************/
html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}


html {
  color-scheme: light dark;
  --gradient-color-light: light-dark(#fae586 , #b5dbf0);
  --gradient-color-dark: light-dark(#bcce77, #599bbc );
  --header-color: light-dark(#91ad6c , #1b5273);
  --text-color: light-dark(#f2f7ed, #e7f0f5);
  --text-shadow: light-dark(#334121, #0a2637);
  --lines-color: light-dark(#FFFFFF70, #FFFFFF30);
  
  --cookies-bg: light-dark(#9eb87b95,#36739995);
  --cookies-border: light-dark(#334121, #0a2637);
  --text-shadow: light-dark(#89a662ee, #154969ee);

  --backdrop-active: light-dark(#80ad46ee,#4997c7ee );
  --focus-color: light-dark(#a3fb51ee, #e875cfee);
}
html:has([value="light-theme"]:checked) {
  color-scheme: light;
}

html:has([value="dark-theme"]:checked) {
  color-scheme: dark;
}
    @keyframes --trinket-animation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }
/**************************
* MARK: Algemene
**************************/
h1 {
  font-family: "RampartOne", Verdana;
}
body {
  font-family: "Rubik Spraypaint", system-ui;
  display: grid;
  margin: 0%;
  padding: 0;

/**************************
* MARK: Background
**************************/
  background-image: linear-gradient(#efad76, #efc576);
  background-image: 
    linear-gradient(
      to bottom,
      transparent,
      transparent
    ),
    linear-gradient(
      to right,
      var(--lines-color) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      var(--lines-color) 1px,
      transparent 1px
    ),
    linear-gradient(
    to bottom,
    var(--gradient-color-light),
    var(--gradient-color-dark)90% 
  );

  background-size:
    100% 100%,
    40px 40px,
    40px 40px,
    100% 100%;



  background-attachment: fixed;

/**************************
* MARK: Light-Dark-Styling
**************************/
/* Button gemaakt met behulp van de Light/dark & button/states deepdives, Sanne en chatgpt voor debuggen*/

  > form:nth-of-type(1) { 
    padding: 0%;
    margin: 0%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-self: start;
    position: fixed;
    top: -2.1%;
    z-index: 100%;
    right: 2%;
  }

  label {
    position: relative;

    transition: 0.2s ease-in;
    

      &:hover:nth-of-type(1) {
      transform: scale(1.05);
      content: url("/images/images-web/Mattias-HOVER.png");
      width: 8em;
    }

      &:hover:nth-of-type(2) {
      transform: scale(1.05);

    }

    &:hover:nth-of-type(3) {
      transform: scale(1.05);
      content: url("/images/images-web/Vince-HOVER.png");
      width: 8em;

    }

    &:has(input:checked):hover:nth-of-type(1) {
      transform: scale(1.05);
      content: url("/images/images-web/Mattias-ON.png");
      width: 8em;
    }

    &:has(input:checked):hover:nth-of-type(3) {
      transform: scale(1.05);
      content: url("/images/images-web/Vince-ON.png");
      width: 8em;
    }


    &:has(input:checked) {
      filter: drop-shadow(0 0 0.3em #56e57c);
    }

    &:has(input:focus-visible) {
      filter: drop-shadow(0 0 0.5em #e875cfee);
    }

    



    input {
      padding: 0;
      margin: 0;
      position: absolute;
      inset: 0;
      appearance: none;
      outline: none;
    }

    img {
      display: block;
      width: 8em;
      padding: 0%;
      margin: 0%;
      cursor: pointer;


      @media (width < 40em) {
        width: 5.5em;
      }

      :checked ~ & {
        display: none;
      }

      &:nth-of-type(2) {
        display: none;

        :checked ~ & {
          display: block;
  
      }
        }
      }
    }
  }

  label:nth-of-type(2) {
    img {
      width: 7em;

      @media (width < 40em){
        width: 5.5em;
      }
    }
  }

/**************************
* MARK: Header
**************************/
header {
  display: flex;
  align-items: center;
  background-image: 
  linear-gradient(to bottom,
  var(--header-color),
  transparent 60px);
  position: sticky;
  top: 0%;
  margin: 0%;
  padding: 0%;
  height: 4.5em;
  

  /* border-bottom-left-radius: 15%;
  border-bottom-right-radius: 15%; */

  h1 {
    color: var(--text-color);
    padding: 1%;
    align-items: center;
    display: flex;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    text-shadow: 2px 2px 2px var(--text-shadow);
  }
}

footer {
  position: fixed;
  bottom: 0; 

  nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2em;
    font-size: 1em;
    
  }


/**************************
* MARK: Cookie Button
**************************/
  /* gebruik van een id toen ik ging debuggen met chatgpt*/
   #cookieButton{
    transition: .2s ease-in;
    background-color: inherit;
    border: none;
    outline: none;

    &:focus {
      filter: drop-shadow(0 0 0.5em #e875cfee);
    }
    
    
    &:hover {
      transform: scale(1.05);
    }
  img {
    display: block;
    width: 6em;
    }
  } 

    #cookieModal {
      text-shadow: 2px 2px 2px var(--text-shadow);
      color: var(--text-color);
      font-family: "Chewy";
      font-size: clamp(1rem, 1.5vw, 3vw);
      width: 80%;
      background-color: var(--cookies-bg);
      border-color:  var(--cookies-border);
      border-radius: 10px 10px;
      padding: 2%;
  }
}
body.eatCookie #cookieButton img {
    content:url("/images/images-web/Cookie-eaten-Mattias.png") / "acceptedCookie";}

/**************************
* MARK: Main
**************************/

main {
  /* MAIN IMAGE*/
  > button:nth-of-type(1) {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    background-color: inherit;
    border: none;
    img {
      width: auto;
      height: 41.5rem;
      object-fit: cover;
    }
  }

 > button:nth-of-type(2) {
    display: flex;
    background-color: inherit;
    border: none;
    z-index: 50;
    position: relative;
    left: calc(50% - 3.4rem);
    bottom: calc(50% - 7.5rem);
    transition: transform 1.0s ease-in-out;
    outline: none;

      &:focus {
      filter: drop-shadow(0 0 0.5em #e875cfee);
    }

    @media (width < 40em){
          z-index: 50;
          position: relative;
          left: calc(50% - 3.5rem);
          bottom: calc(50% - 7.rem);
        }
      
    &:hover {
      filter: drop-shadow(0 0 0.3em white);
    }
    &:active {
    transform: rotate(300deg);
    }

      img {
        width: 5.9rem;
        cursor: pointer; 
   }
  } 
}

/**************************
* MARK: Gacha Button
**************************/
/* code geholpen door Sanne */

@property --distance {
	syntax:"<number>";
	initial-value:0;
	inherits:true;
}

@property --base {
	syntax:"<number>";
	initial-value:0;
	inherits:true;
}

ul {
  padding:0;
  margin:0;
  list-style-type: "";
}

li {
  width:8em;
  aspect-ratio: 1;
  border-radius: 50%;
  position: fixed; 
  left: calc(60% - 4em);
  bottom: calc(10% - 4em);
  opacity:0;
  scale:0;
  z-index: 100;

  button {
    display: block;
    border-radius: 50%;
    appearance: none;
    background:none;
    border:none;
    padding: .5em;
    cursor: pointer;
  }
  

  &.is-pulled {
    transition: 
      left .5s,
      opacity .2s,
      scale .5s,
      bottom .5s,


      --base .5s 1.5s,
      --distance .5s 1.5s;
    left:calc(50% - 4em);
    bottom:calc(50% - 4em);
    opacity:1;
    scale:1;

    --base:1;
    transform:
    /* veranderen van distance hier*/
    rotate( calc( var(--rotate) * 360deg ) )
    translateY( calc( var(--base) * 25vmin + var(--distance) * 30vmin) )
    rotate( calc( var(--rotate)* -360deg ));
    
  &.is-pulled img {
    animation-name: --trinket-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-timing-function: ease-in-out
    }
}

  &::before {
    content:"";
    position: absolute;
    inset: 0 0 50% 0;
    border-radius:50% 50% 1px 1px / 100% 100% 1px 1px;

    background-image: url("/images/images-web/Capsule-TOP.png" );
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-shadow:
    inset 0 -1px hsl(calc(var(--images) * 360) 100% 25% / .55);

    /* translate:0 .3em; */
}

  &.is-pulled::before {
    transition:
      translate .5s 1s,
      rotate .5s 1s,
      opacity .5s 1s;
    translate: 0 -60vw;
    rotate:1turn;
    opacity:0;
    pointer-events:none;
}
  &::after {
    content:"";
    position: absolute;
    inset:50% 0 0 0;

     translate:0 -.3em;

    border-radius:1px 1px 50% 50% /1px 1px 100% 100%;
    /* background-color: green; */
    background-image: url("/images/images-web/Capsule-BOTTOM-Blue.png");
    background-size: 100% auto;
    background-repeat: no-repeat;

    filter:hue-rotate( calc(var(--images) * 360deg ));
    
    /* background-image:
      radial-gradient(
        circle at 67% 67%,
        hsl( calc(var(--images)*360 ) 100% 20%),
        hsl( calc(var(--images)*360) 100% 50%)
      );
  box-shadow:
    inset 0 1px hsl(calc(var(--images)* 360) 100% 90% / .5s),
    inset -.5em -1em 1em hsl(calc(var(--images) * 360) 100% 10% / .5 ),
		inset .5em 0 1em hsl(calc(var(--images) * 360) 100% 90% / .5 );
	} */
  }

  &.is-pulled::after {
    translate: 0 60vw;
    rotate: -1turn;
    opacity:0;

    transition:
      translate .5s 1s,
      rotate .5s 1s,
      opacity .5s 1s;
    pointer-events:none;
    
  }

  img {
    max-width:70%;
  }
}