@import url('https://use.typekit.net/zgw0kcp.css'); /* Adobe Fonts */

:root{
    --bodyBack: #440b52;
    --textColor: #732173;
    --titleColor: #e3dfe3;
    --starColor: rgb(124, 85, 149);
    --sectionBack: #f7f6f9;
    --elio: rgb(112, 62, 173);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "tk-franklin-gothic-atf",sans-serif;
}
body{
    background-color: var(--bodyBack);
    min-height: 100vh;
    display: grid;
    place-content: center;
}
.container{
    width: 80vw;
    height:80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.header{
    width: 100%;
    text-align: center;
}
.header h1{
    font-size: 4em;
    font-family: "tk-franklin-gothic-atf",sans-serif; 
    text-transform: uppercase;
    color: var(--titleColor);
}
.products{
    width: 100%;
    align-self: center;
    height: 70%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}
.product{
    position: relative;
    background-color: var(--sectionBack);
    width: 350px;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 40px;
    border-radius: 10px;
    transition: .3s;
}
.product:hover{
    transform: translateY(-15px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.image{
    width:100%;
    height: 60%;
    display: grid;
    place-content: center;
}
.image img{
    width: 240px;
}
.namePrice{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.namePrice h3{
    font-size: 2em;
    text-transform: capitalize;
    color: var(--textColor);
}
.namePrice span{
    font-size: 1.5em;
    color: var(--starColor);
}
.product p{
    font-size: 18px;
    line-height: 25px;
}
.stars svg{
    font-size: 1.3em;
    color: var(--starColor);
}
.Buy{
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.Buy button{
    padding: 10px 20px;
    border-radius: 7px;
    border: none;
    background-color: var(--elio);
    color: var(--sectionBack);
    font-size: 18px;
    text-transform: capitalize;
    cursor: pointer;
    transition: .5s;
}
.Buy button:hover{
    transform: scale(1.1);
}


#menu[data-active-index="0"] > #menu-background-pattern {
    background-position: 0% -25%;
  }
  
  #menu[data-active-index="1"] > #menu-background-pattern {
    background-position: 0% -50%;
  }
  
  #menu[data-active-index="2"] > #menu-background-pattern {
    background-position: 0% -75%;
  }
  
  #menu[data-active-index="3"] > #menu-background-pattern {
    background-position: 0% -100%;
  }
  
  #menu[data-active-index="0"] > #menu-background-image {
    background-position: center 45%;
  }
  
  #menu[data-active-index="1"] > #menu-background-image {
    background-position: center 50%;
  }
  
  #menu[data-active-index="2"] > #menu-background-image {
    background-position: center 55%;
  }
  
  #menu[data-active-index="3"] > #menu-background-image {
    background-position: center 60%;
  }
  
  #menu-background-pattern {
    background-image: radial-gradient(
      rgba(255, 255, 255, 0.1) 9%, 
      transparent 9%
    );
    background-position: 0% 0%;
    background-size: 12vmin 12vmin;
    height: 100vh;
    left: 0px;
    position: absolute;
    top: 0px;
    transition: opacity 800ms ease, 
      background-size 800ms ease,
      background-position 800ms ease;
    width: 100vw;
    z-index: -2;
  }
  
  @keyframes pan-image {  
    0% {
      background-position: 36% 42%;
      background-size: 100%;
    }
    
    20% {
      background-position: 30% 35%;
      background-size: 100%;
    }
    
    20.0001% { /* -- View 2 -- */
      background-position: 60% 85%;
      background-size: 200%;
    }
    
    40% {
      background-position: 49% 81%;
      background-size: 200%;
    }
    
    40.0001% { /* -- View 3 -- */
      background-position: 80% 42%;
      background-size: 150%;
    }
    
    60% {
      background-position: 84% 33%;
      background-size: 150%;
    }
    
    60.0001% { /* -- View 4 -- */
      background-position: 0% 0%;
      background-size: 150%;
    }
    
    80% {
      background-position: 15% 4%;
      background-size: 150%;
    }
    
    80.0001% { /* -- View 5 -- */
      background-position: 80% 10%;
      background-size: 150%;
    }
    
    100% {
      background-position: 72% 14%;
      background-size: 150%;
    }
  }
  
  #menu-background-image {
    background-image: url("../rsrc/bg2.png");
    background-position: center 40%;
    background-size: 110vmax;
    height: 100%;
    left: 0px;  
    opacity: 0.44;
    position: absolute;
    top: 0px;
    transition: opacity 800ms ease,
      background-size 800ms ease,
      background-position 800ms ease;
    width: 100%;
    z-index: -1;
    /*animation: pan-image 15s linear infinite; Animasjonen er fortåpelig. */
  }

  
#menu-items:hover ~ #menu-background-pattern {
    background-size: 11vmin 11vmin;
    opacity: 0.5;
  }
  
  #menu-items:hover ~ #menu-background-image {
    background-size: 100vmax;
    opacity: 0.1;
  }
  
  #menu-items:hover > .menu-item {
    opacity: 0.3;
  }
  
  #menu-items:hover > .menu-item:hover {
    opacity: 1; 
  }
  
  .menu-item {
    transition: opacity 400ms ease;
  }

  
#menu[data-active-index="0"] > #menu-background-pattern {
    background-position: 0% -25%;
  }
  
  #menu[data-active-index="1"] > #menu-background-pattern {
    background-position: 0% -50%;
  }
  
  #menu[data-active-index="2"] > #menu-background-pattern {
    background-position: 0% -75%;
  }
  
  #menu[data-active-index="3"] > #menu-background-pattern {
    background-position: 0% -100%;
  }
  
  #menu[data-active-index="0"] > #menu-background-image {
    background-position: center 45%;
  }
  
  #menu[data-active-index="1"] > #menu-background-image {
    background-position: center 50%;
  }
  
  #menu[data-active-index="2"] > #menu-background-image {
    background-position: center 55%;
  }
  
  #menu[data-active-index="3"] > #menu-background-image {
    background-position: center 60%;
  }