header nav{
    opacity: 0;
    transform: translateY(-100%);
    transition-duration: 0.5s;
}
header.open nav{
    opacity: 1;
    transform: translateY(0);
}
.open-button{
    display: flex;
}
.open .open-button{
    display: none;
}
.header-wrapper{
    color:white;
}
.open .header-wrapper{
    color:black
}
.close-button{
    opacity: 0;
    display: none;
}
.open .close-button{
    opacity: 1;
    display: block;
}
.thumbnail{
width: 25%;
}
body{
font-family: "Inter",sans-serif;
min-height: 100vh;
}
.linear-bg{
background: linear-gradient(#0065d9 0%,#2775e3 46.8468%,#104bc7 100%);
}
.big-title{
font-size: clamp(4.0625rem, 0.6503rem + 15.5987vw, 15.625rem);
line-height: 0.8;
}
  
@media(min-width:1536px){
.thumbnail:not(.hovered){
    width:10%;
}
.thumbnail.hovered{
    width:70%;
}
.big-title{
    font-size: clamp(1.125rem, -2.3944rem + 15.0162vw, 15.625rem);
    line-height: 0.8;
}
}
.white-linear-bg{
    position: relative;
}
.white-linear-bg::after{
    content:"";
    width:100%;
    display: block;
    height: 100%;
    background:linear-gradient(0deg,white 0%,transparent 50%);
    position: absolute;
    left:0;
    top:-100%;
    z-index: 1;
}

.scrollbar-hidden::-webkit-scrollbar{
    display: none;
}
.marquee{
    position: relative;
}
.marquee::after,.marquee::before{
    content:"";
    display: block;
    position: absolute;
    width:100%;
    height: 100%;
    z-index: 2;
    top:0;
}
.marquee::after{
    right:0;
    background: linear-gradient(-90deg ,#ffffff 0%,transparent 30%);
}
.marquee::before{
    left:0;
    background: linear-gradient(90deg ,#ffffff 0%,transparent 30%);

}

.track{
    animation:marquee 10s infinite linear;
  }
  @keyframes marquee{
      0%{
          transform: translateX(0);
      }
      100%{
          transform: translateX(-100%);
      }
  }