@font-face {font-family: 'klatchi';src: url('font/static/Montserrat-Bold.ttf') format('truetype');}
.loader-wrapper{background-color: black;position: fixed;top: 0;left: 0;z-index: 10;width: 100%;height: 100dvh;}
a:active{-webkit-tap-highlight-color: transparent;}
:root{color-scheme: light only;}
html,body{background-color: black;color: white;font-family: 'klatchi';overflow-x: hidden;}
body{margin: 0;
background: url('img/circle\ motion.png'), url('img/back\ steam.png');
background-repeat: no-repeat;
background-position: 50% 30%,top;
background-size: 110% 110%;}
.logo{width: 40%;display: block;margin: 5vh auto;}
p{text-align: justify;text-align-last: center;padding: 0 8%;font-size: 13px;margin:0 0 5vh;}
.loader-wrapper,.media,.content,.vid-wrapper{display: flex;align-items: center;justify-content: center;}
.loader-wrapper svg{width: 40%;}
.vid-wrapper{position: fixed;height: 100vh;background-color: black;z-index: 9;display: none;}
.vid{width: 100%;}
h1{text-align: center;font-size: 1.1em;margin-bottom: 3vh;}
h1,p{text-transform: uppercase;}
.link{color: white;text-decoration: none;font-size: 2em;}
.vip{position: absolute;top: 5%;left: 5%;width: 13%;}
.media{gap: 8vw;margin: 5vh 0;}
footer{width: 100%;text-align: center;}
footer a{color: white;text-decoration: none;font-size: 15px}
.slare{width:10%;}
.content{position: relative;}
.klatchi-bag{margin-top: 10vh;width: 70%;}
.nut{position: absolute;width: 20%;}
.bbq-almond-big{width: 12%;top: 10vh;left: 30%;}
.bbq-almond-small{width: 8%;top: 50%;right: 5%;}
.blur-almond{width: 30%;top: 60%;left: -10%;}
.blur-bbq-almond{width: 40%;top: 70%;left: -5%;z-index: -1;}
.salted-almond{width: 8%;top: 20%;right: 10%;}
.cashew-small{width: 15%;top: 0;right: 30%;}
.cashew-big{width: 20%;top: 50%;left: 10%;}
.cashew-blur{width: 40%;top: 40%;right:-5%;z-index: -1;}
.pistachio-big{width: 15%;top: 40%;left:5%;z-index: -1;}
.pistachio-small{width: 13%;top: 0;right:18%;}
.loader-wrapper svg .st2,.strip{transform-origin: left;}
.loader-wrapper svg .st6{transform-origin: right;}
.strip{background:url(img/gold\ strip-01.svg) no-repeat center/cover;height: 3vh;width: 100%;}

@media only screen and (min-width: 600px) {
.logo{width: 20%;}
.link{font-size: 2.5em;}
p{font-size: 16px;}
h1{font-size: 35px;}
.slare{width:5%;}
.vip{width: 8%;}
.klatchi-bag{width: 50%;}
.bbq-almond-big{width: 10%;}
.cashew-big{width: 15%;}
.pistachio-big{width: 12%;}
.pistachio-small{width: 10%;}
}
@media only screen and (min-width: 992px) {
.vid{width: 40%;border-radius: 20px;}
.loader-wrapper svg{width: 20%;}
.link{font-size: 2.5em;}
p{font-size: 20px;}
.slare{width:3%;}
.logo{margin-top: 1vh;width: 15%;}
.vip{width: 5%;}
.content{margin: 8vh 0;}
.klatchi-bag{margin-top: 5vh;width:25%;}
.bbq-almond-big{width: 5%;top: -1vh;left: 40%;}
.bbq-almond-small{width: 3%;right: 30%;}
.blur-almond{width: 15%;top:40%;left:20%;}
.blur-bbq-almond{width: 18%;top: 60%;left: 25%;}
.salted-almond{width: 3%;top: 15%;right: 35%;}
.cashew-small{width:4%;top: -2vh;right: 45%;}
.cashew-big{width: 7%;top: 45%;left: 36%;}
.cashew-blur{width: 10%;top: 45%;right:30%;}
.pistachio-big{width: 6%;top: 30%;left:34%;}
.pistachio-small{width: 4%;top: -5vh;right:40%;}
}
@media only screen and (min-width: 1700px) {
.logo{width: 12%;margin-top: 2vh;}
p{font-size: 16px;padding:0 20%;}
.klatchi-bag{margin-top: 5vh;width:20%;}
.bbq-almond-big{width: 3%;top: 1vh;left: 45%;}
.bbq-almond-small{width: 3%;right: 35%;}
.blur-almond{width: 20%;top: 20%;left:20%;}
.blur-bbq-almond{width: 20%;top: 60%;left: 25%;}
.salted-almond{width: 2.5%;top: 20%;right: 35%;}
.cashew-small{width:3.5%;top: -4vh;right: 45%;}
.cashew-big{width: 6%;top: 45%;left: 37%;}
.cashew-blur{width: 10%;top: 40%;right:34%;}
.pistachio-big{width: 5%;top: 30%;left:37%;}
.pistachio-small{width: 3%;top: -5vh;right:40%;}
}