@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500;600;900&display=swap');

* {box-sizing: border-box;  scroll-behavior: smooth; }

html, body {
  height: 100vh;
  min-height: 100vh;
  max-width: 100vw;
  margin: 0;
  position: relative;
  color: #a68021;
}

body {overflow-y: overlay; height: fit-content;}
html{font-family:'Inter',sans-serif;font-size:clamp(14px,1.5vw,30px);line-height:1.2;margin:0;padding:0;font-weight:300;letter-spacing:1.35px;overflow:hidden;}


#loading {position:fixed; height:100%; width:100%; overflow:hidden; top:0; left:0;background: url('../images/bg-2.png') center black; background-size: cover; color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; z-index: 9999999; text-align: center;}
    
a , a:visited , a:hover , a:focus { text-decoration: none; transition: all 0.8s ease; color: unset; }
a:hover , a:hover * {transition: all .3s ease;}

h3 {font-size: 1rem; font-weight: 400;}

.ham {display: none;}

.CookieDeclaration {display: none;}
.CybotCookiebotDialogBodyBottomWrapper {display: none !important; visibility: hidden;}
/* .cookie {position: absolute; background: #000; border-radius: 5px; top: 4vh; width: 70vw; z-index: 999999; font-size: 0.5rem; left: 50%; transform: translateX(-50%); padding: 1vh; transition: all 0.4s ease; }
.cookie .accept {background: #a68021; color: #000; margin-top: 1vh; padding: 0.5vh; width: max-content; cursor: pointer;}
.cookie .accept:hover {background: #e6b949; }

.cookie.closed {transform: translateX(-50%) translateY(-150%);} */

.copy {position: absolute; bottom: 0vh; width: 100%; text-align: center; background: #000000ba; padding: 0.5vh; z-index: 999999; font-size: 0.45rem; left: 50%; transform: translateX(-50%);   }


nav {position: absolute; right: 50px; top: 50%; transform: translateY(-50%); margin: auto; z-index: 99999; padding: 0; border-radius: 12px;  background: #ffffff2d; 
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; }
nav ul { list-style: none; text-align: right;  width: min-content; padding: 10px; }
nav ul li {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; margin: 10px 0; }
nav ul li a{ display: flex; flex: 1; padding: 10px 20px; border-radius:6px ; max-width: max-content; font-size: 0.8rem; font-weight: 900; color: #fff !important; }
nav ul li span{  font-size: 0.5rem; padding: 2px 20px 5px 0; color: aliceblue;   }
nav ul li a:hover{ background: white; color: #7c652d !important;}
nav ul li a.active{ border-right: 5px solid #a68021; color: #a68021 !important;}
nav .lang {width: 100%; background: #7c652d; color: #fff; padding: 10px; font-size: 0.5rem; display: flex; justify-content: center;}
nav .lang:hover { background: #332605; color: #f3c248;  }

main {width: 100vw; height: 100vh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; display: block; background: #000;}
section * {text-shadow: 1px 1px 2px black;}

section {min-width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: flex-start; justify-content:flex-start; padding: 3vw; scroll-snap-align: center; border: 30px solid #000; content-visibility: auto; position: relative;} 

section .content {max-width: 70%;  max-height: 90vh; overflow-y: scroll; padding: 0 5%; background: #000000be;}

#hello {background: linear-gradient(to bottom, #332605, #7c652d); display: flex; justify-content: center; align-items: center;}
#hello .logo{position:absolute;z-index:9999;color:#7c652d;top:3vw;left:3vw;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#00000000;}
#hello .logo h1{font-weight:100;font-size:1.7rem;border-bottom:1px solid #7c652d;padding:2vw 0;-webkit-text-orientation: upright;
  text-orientation: upright; writing-mode:vertical-rl;text-orientation:sideways-right; -webkit-writing-mode:vertical-rl; -webkit-text-orientation:sideways-right;display:block;transform:rotate(180deg);}
#hello .logo img{height:6vw;margin:1vw;}


#hello video.animactive { width: 100%; max-width: 50vh; overflow: hidden; border-radius: 900px ; z-index: 9; position: relative; box-shadow: 0 0 80px -40px black; }

#hello video.animactive.on {animation: anivideo 3s ease-in  1 normal forwards; -webkit-animation: anivideo 3s ease-in  1 normal forwards; }
@keyframes anivideo {
  0% { transform:scale(0) rotate(-45deg) ; }
  100% { transform:scale(1) rotate(0deg) ;  }
}

#hello video.bger { min-width: 100vw; min-height: 100vh; object-fit: cover;  z-index: 0; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; opacity: .6;  }
.blur {display: block; width: 100vw; height: 100vh; z-index: 2; position: absolute; left: 0; top: 0%;   backdrop-filter: blur(30px) ; -webkit-backdrop-filter: blur(30px) ; background: #0000002a; }

#about, #media {background: url('../images/bg-2.png') center; background-size: cover;}
#nfts {background: url('../images/bg-3.png') center; background-size: cover; flex-direction: column;  }
#rewards {background: url('../images/bg-4.png') center; background-size: cover;}
#roadmap {background: url('../images/bg-5.png') center; background-size: cover;}


#video-gallery{margin:0 auto 10px auto ;height:600px;width:fit-content; display: block;}

#video-gallery video{max-width: 100%; height: max-content; }
#current-video{border:1px solid black; border-radius: 20px;}
#arrows{text-align:center;margin-top:10px; display: none;}
#left-arrow,#right-arrow{cursor:pointer;display:inline-block;padding:10px;}

#media ul {list-style: none; display: block;}
#media li {display: block; position: relative; padding: 20px; margin: 10px;}
#media a {background: #a68021; color: #000; padding: 20px; border-radius: 10px;}
#media a:hover {background: #f3c248; color: #000;}

/* @media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
  .blur , .bger {display:none;}
}} */

@media (max-width: 1800px) {}
@media (max-width: 1000px) {

  body, html {max-width: 100vw; overflow-x: hidden; height: 100dvh;}

  .blur , .bger {display:none;}

  .ham {display: block; position: absolute; top: 3vh; right: 3vh; height: 6vh; width: 6vh; z-index: 9999999; border: 1px solid #493910; border-radius: 10px; overflow: hidden;}

  nav {transform: translateX(100vw); transition: all 0.5s ease; top: 0; right: 0; }
  nav.active {transform: translateX(0);}

  nav ul {width: 100vw; height: 100vh; top: 0; right: 0; display: flex; flex-direction: column; justify-content: center; margin: 0; border-radius: 0; background: #514118; } 

  nav ul li a { font-size: 2rem;}
  nav ul li span { font-size: 1.2rem;}

#hello{align-items:flex-start;background:url('../images/bg-3.png') center black;background-size:cover;}
#hello .logo{position:absolute;z-index:9999;color:#7c652d;bottom:3vw;left:3vw;display:flex;flex-direction:row;align-items:center; padding:0 0vw;height:fit-content;top:unset;  bottom:20vh;left:50%;transform:translateX(-50%);width:max-content;height:fit-content;top:auto;}
#hello .logo h1{font-size:1.5rem;border-left:0px solid #7c652d;border-bottom:0px solid #7c652d;padding:2vw 0;text-orientation:upright;writing-mode:unset;text-orientation:sideways-right;display:block;transform:rotate(0deg); white-space: nowrap;}
#hello .logo img{height:27vw;margin:4vw 4vw 4vw 0;}
#hello video.animactive{max-width:80vw;margin:10vh auto;}


 section{align-items:center;justify-content:center;}

 section {border: 10px solid black;}
 section .content{width:100%; max-width: 100%; max-height:75vh;padding:0 3%;background:#171209cb;margin-bottom:10vh; border: 1px solid #493910; border-radius: 10px; box-shadow: 0 4px 10px black;}

 #video-gallery{ height:80vw; }


 .cookie {font-size: 0.7rem; top: auto; bottom: 5vh; width: 90vw;}
 .copy { font-size: 0.7rem; }


}


/* custom scrollbar */
::-webkit-scrollbar{width:20px;}
::-webkit-scrollbar-track{background-color:#00000000;}
::-webkit-scrollbar-thumb{background-color:#a68021;border-radius:20px;border:8px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background-color: #7c652d;}

.content::-webkit-scrollbar{width:15px;}
.content::-webkit-scrollbar-track{background-color:#00000000;}
.content::-webkit-scrollbar-thumb{background-color:#fffffe;border-radius:20px;border:3px solid transparent;background-clip:content-box;}
.content::-webkit-scrollbar-thumb:hover{background-color: #ffc739;}