* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  
}
 

.container {
    background-color: #fffac6;
 
    position: relative;
    width: 100%;
    height: 100vh;
}
.no-scroll{
   
    overflow-y: hidden;
}
* {
    box-sizing: border-box;
}
 
html,body {
    background-color: #fffac6;
    padding: 0;
    margin: 0;
    --color-bgr : #5acc62;
    --color-bg-inside: #1d314f;
    --color-text2: #1d314f;
    --color-link-hover: #ffcdb2;
    --color-link: #f2e9e4;
    /* overflow-y: scroll; */
    scrollbar-width: none; /* Firefox */

    -ms-overflow-style: none;
    height: 100%;
    scroll-behavior: auto;
}
html,body::-webkit-scrollbar {  
    width: 0;
    height: 0
}
.trans-scene {
    fill: #fffbcd;
}

.scrollElement {
   
    position: absolute;
      height: 10000px;
      width: 100px;
      top: 0;
      z-index: 0;
}
 #loading-bar {
    position: fixed;
    left: 83%;
    top: 30%;
    z-index: 200;
    width: 22.5vw;
    height: 22.5vh;
 }
 #scroll-instruct {
    position: fixed;
    left: 85%;
    top: 6%;
    z-index: 200;
    width: 18.5vw;
    height: 18.5vh;
 }
.container svg {
     overflow: hidden;
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
 }

 .btn {
    position: fixed;
    width: 7.5vw;
    height: 3.5vw;
    top: 10%; 
    left: 10%;
 }
 .neos-eater-body {
    width: 100%;
    height: 100%;

 }
 .neos-eater {
    width: 117px;
    height: 117px;
    position: absolute;
    border-radius: 100%;
}
 .in{
    position:relative;
    width:100%;
    height:100%
}
 .rotate {
    animation: ani_rotate 30s linear infinite forwards;
    will-change: transform;
 }
 
 .neos-eater .bg-img.is-img-loaded .img {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
}
.neos-eater .bg-img .img {
    opacity: 0;
    -webkit-transition: all 1.2s cubic-bezier(.32,.94,.6,1);
    transition: all 1.2s cubic-bezier(.32,.94,.6,1);
    -webkit-transform: scale(.6) rotate(90deg);
    transform: scale(.6) rotate(90deg);
}

.bg-img.is-img-loaded .img {
    opacity: 1;
}
 
 
  
.bg-img.is-img-loaded {
    background-color: transparent;
 
    transition: background 0s 1.2s;
} 
.bg-img .img {
    opacity: 1;
    -webkit-transition: opacity 1.2s cubic-bezier(.32,.94,.6,1);
    transition: opacity 1.2s cubic-bezier(.32,.94,.6,1);  
    border-radius: 5px;
    overflow: hidden;
}
 
.bg-img {
     overflow: hidden;
}
.bg-img,.bg-img .img {
  
    width: 100%;
    height: 100%;
}
.bg-img .img { 
    text-indent: -9999px;
	 display: block;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
    
} 
 
 
.bg-img .img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
 
[data-visible="1"] .bg-img .img {
    will-change: opacity;
}

 
.button-path {
    width: 15em;
    height: 4.0em;
    display: block;
 }
 .button-has-icon {
    text-align: left;
 }
 .button-path .button-body {
    background-color: var(--color-bg-inside);
    border-radius: 100px;
 }
.button-path .button-body.btn-green {
    background-color: var(--color-bgr);
}
a {
    text-decoration: none;
    color: var(--color-link);
    outline: none;
}
 
a:hover {
    color: var(--color-link-hover);
}
/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

 .button-body {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
 }
 .button-has-icon .button-txt {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
 }
 
 .button-links {
    position: fixed;
    left: 30%;
    top: 35%;
}
.no-pointer {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
 .button-txt {
    position: relative;
    z-index: 1 ;
    height: 100%;
     color: var(--color-text2);
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
 

.f-m {
    font-size: calc(.9rem + .5vw);
}
.button-has-icon .txt {
    padding-left: 2em;
    padding-top: 0.05em;
    width: calc(100%-4.5em);
}
.clip span {
    display: block;
}
.button-txt .o {
    line-height: 1.5;
    height: 1.5em;
    vertical-align: middle;
}
.clip .o {
    overflow: hidden;
}
.button-txt .t {
    -webkit-transition: all .5s cubic-bezier(.32,.94,.6,1);
    transition: all .5s cubic-bezier(.32,.94,.6,1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    white-space: nowrap;
}
.button-has-icon .icon{
    width: 3.5em;
 
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 400;
}
.button:hover .button-txt .t {
    transform: translateY(-30px);
  }


.item__enter-orbit {
    /* pointer-events: none; */
    cursor: pointer;
    flex: none;
}
.item__enter {
	/* display: none; */
	will-change: transform;
}
.item__enter-orbit {
	fill: none;
	will-change: transform, opacity;
}
.cls-1Obit {
    fill: none;
    stroke: #274169;
	stroke-width: 1px;
  }
  .cls-2Obit {
      fill: #274169;
    }
 
 
 
    @media (any-pointer:fine) {
        .cursor {
            position: fixed;
            top: 0;
            left: 0;
            display: block;
            pointer-events: none;
            z-index: 5000;
        }
    
        .cursor__inner {
            fill: #80d5aa;
     
        }
    
        .no-js .cursor {
            display: none;
        }
    
    }
     
    /* loading */

    @font-face {
        font-family: serpents;
        src: url("serpent-webfont.13e60af1.woff");
      }
      .no-loading {
        display: none;
        visibility: hidden;
     
     }
     	
		.content-loader {
            display: flex;
            flex-direction: column;
            width: 100vw;
            position: relative;
            padding: 1.5rem 0rem;;
        }
        .loading-scene {
            opacity: 1;
            position: fixed;
            overflow: hidden;
            
            color: #f2e9e4;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #131322;
            z-index: 5001;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
         
        }
        .loading-screen--hide {
            transition: opacity 1.8s cubic-bezier(.32,.94,.6,1); 
        
            opacity: 0;
            pointer-events: none;
        }
        .hideMyScroll {
            overflow: hidden;
            }

            
        
        .no-ld {
            display: none;
        }
        .items {
            position: absolute;
            left: 45%;
            
        }
        .content__title {
            font-family: serpents;
            font-size: 2vw;
            line-height: 0.8;
            counter-increment: section;
            text-align: center;
            display: grid;
            gap: 2rem;
        }
        .content__title::before {
            display: block;
            margin-bottom: 10vh;
            text-align: center;
        }
        .char-wrap {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }