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


  @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

  html {
    background: 
      repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
      repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/2500px 2500px;
    background-blend-mode: difference;
    animation: b .2s infinite alternate;
  }
  @keyframes b{
    100% {background-position: 50% 0, 60% 50%}
  }
html, body {
    margin: 0;
    padding: 0;
	cursor:grab;
   
	
	background-repeat: no-repeat;
	background-size:80%;
	background-position: center;
    font-family: 'Unbounded', cursive;
	font-family: 'Shadows Into Light', cursive;
	font-size: 1.2em;
	transition: all 400ms ease-in; 
	color: #FF6C6E;
    background: 
    repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  animation: b .2s infinite alternate;
}
body{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
@keyframes b{
    100% {background-position: 50% 0, 60% 50%}
  }
#cmic{
	width: 25em;
	height: 150em;
}
.img-small {
	width: 1.7em;
	height: 1.7em;
}
.flexi-nav li a {
	color: #1c1c1c;
}
.mini-wrapper {
	color: #fff;
}
.hero img {
	box-shadow: 5px 2px 1px #ffffff88;
	border-radius: 35px;
}
.hero img:hover {
	transform: translate(.5em, .2em);
	box-shadow: none;
	border: 1px solid #fff;
	transition: all 200ms 10ms ease-in;

}

a {
    text-decoration: none;
	color:#1c1c1c;
	
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#bg-type {
	height: 100vh;
    width: 100vw;
}

header {
    display: flex;
    justify-content: space-between;
    background: #EEEEEE;
    padding: .5em;
}

.logo {
    
    font-weight: bold;
}

.menu {
    cursor: pointer;
}

nav ul {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
	background-image: url("images/fuzzy-bg.webp");
    background-color: #8E8E8E ;
    height: 100vh;
    padding-top: 5em;
    z-index: 100;
	color: #fff;
}
nav ul li{
	padding: 1em;
}
nav ul li a {
	margin: auto 0 auto 0;
	
    
    font-size: 1.5em;
    font-weight: bold;
    padding: 1em;
    display: block;
}

#nav li a:hover {
	color: #444444;
}





#c-ai{
	max-width: 77vw;
}
.img-logo {
	height: 3.7em;
	width: 3.7em;
	padding: 1em;
	margin: 1em;
	float: right;
}
.flex {
	display: flex;
	justify-content: space-around;
}
#btn {
	margin: 1em;
	padding: 1em;
}
button{
	background: #fff;
}
button:hover {
	color: #fff;
	transition: 500ms ease-in-out;
	background: #444444;
}
.forest-hero {
	background-color: #00f;
    
    background-size: 50%;
	opacity: 1;
    color: white;
	animation: appear 2800ms 10ms 1 ease-in forwards;
}


.subtitle {
    padding: 3em 0 .5em;
}

h1 span {
    display: block;
    /* clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); */
}

.cta {
    display: inline-block;
    padding: 1em;
    background: #72A84A;
    font-weight: bold;
    color: white;
    margin-bottom: 3em;
    margin-top: 1em;
}

ul.featured-cabins {
    width: 60%;
    margin: 0 auto;
}

ul.featured-cabins li {
    margin-bottom: 3em;
}

.cabin-img {
    box-shadow: 10px 10px 10px rgba(0,0,0,.2);
}

.cabin-title {
    font-weight: bold;
    font-size: 1.3em;
}

.cabin-desc, ul.features li p, .left p {
    line-height: 1.9em;
    font-size: .8em;
    margin-bottom: 2em;
}

.cabin-cta {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.cabin-cta:after {
    position: absolute;
    content: '';
    bottom: -12px;
    background: white;
    width: 100%;
    height: 1px;
}
.wrapper {
	text-align: center;
}
.cabin-cta span {
    color: white;
    font-weight: bold;
}

.cabin-cta img {
    width: 10px;
}

#blk {
	text-align: center;
	font-weight: bolder;
	
	color: #002244;
}
.feature-container {
   background: linear-gradient(47deg, rgba(92,0,149,1) 0%, rgba(201,1,255,.5) 100%);
	background: linear-gradient(47deg, rgba(255,215,0,.5) 0%, rgba(140,145,240,.5) 100%);
	background: rgb(255,215,0);
background: linear-gradient(49deg, rgba(255,215,0,.6) 0%, rgba(140,145,240,.2) 65%);
    background: #0A0639;
}

ul.features {
	color: #fff;
}

ul.features {
    margin: 3em auto;
    width: 70%;
}

ul.features li img {
    width: 40px;
}


#bg-type {
	height: 23em;
    width: 23em;
		transform: translateX(25px);
}


.tokenmics {
	margin-top: 2em;
}


/* section

*/

section{
	text-align: center;
	margin: 1em;
	padding: 1em;
	color: #1c1c1c;
}


#svg-icn {
	width: 3.7em;
	height: 3.7em;
}
@media (max-width: 380px){
	.flex{
		display: grid;
		grid-template-columns: 2;
		grid-template-rows: 2;
		
	}
}
@media (min-width:450px) {
	#bg-type {
	height: 23em;
    width: 23em;
		transform: translateX(25px);
}
}
@media (min-width: 750px) {
	
	.flex {
		margin: 2em;
		padding: 1em;
	}
	#bg-type {
	
		transform: translateX(50px);
}
	.flex {
	display: flex;
	justify-content: space-around;
}
	a {
    text-decoration: none;
	color:#1c1c1c;
	
}
    
	.header {
		color: #1c1c1c;
	}
    
    header {
        padding: 1em;
    }
.flexi-nav {
	border-radius: 25px;
	display: flex;
	flex-direction: row;
	
}
    ul.nav {
		transition: all 400ms 20ms esae-in;
		
        visibility: unset;
        opacity: 1;
        background: none;
        display: flex;
        margin: 0;
        padding: 0;
        position: unset;
        height: auto;
    }
    
    ul.nav li a {
        font-size: .9em;
        padding: 0 1em;
        font-weight: normal;
    }
    
    ul.nav li:last-child a {
        padding-right: 0;
    }
    
    ul.nav .active a {
        font-weight: bold;
    }
    
    ul.nav .res a {
        color: #72A84A;
        font-weight: bold;
    }
    
    ul.featured-cabins {
        width: 90%;
        display: grid;
        grid-template-columns: repeat(3,auto);
        grid-gap: 3em;
    }
    
}



/*section
*/



@media (min-width:800px) {

	#bg-type {
	height: 50em;
    width: 50em;
		transform: translateX(100px);
}
	
}

@media (min-width:1400px) {

	
	#section{
		position: absolute;
		top: 45%;
		right: 8%;
		display: block;
	}
	
}

@media (max-width:449px) {
	background-color: #ffffff00; 
}















#loadin{
	background: url("images/bg-comp.png");
	background-position: center;
	display: sticky;
	background-size:contain;
	z-index: 99;
	top:0;
	left:0;
}










/*
section {
  padding: 3em;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}
  blockquote {
    font-size: 2.3em;
    width: 30%;
    margin-top: 17%;
    position: absolute;
}
    span {
      width: 100%;
      background: red;
      display: block;
      height: 5px;
      margin-top: 20px;
    }
  
  
  img {
    position: absolute;
  }
  
  img:nth-of-type(1) {
    width: 40%;
    right: 0;
    top: 20%;
  }
  img:nth-of-type(2) {
    width: 25%;
    right: 40%;
    top: 29%;
    margin-top: 15%;
  }

section:nth-child(odd) {
  
}
.sticky {
  background: white !important;
}

.percentage {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

#box {
  width: 100px;
  height: 100px;
  position: absolute;
  border: 5px solid lightgray;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}*/



.tokenomics{
    background: #00000099;
    color: #fff;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}