@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Playwrite+MX:wght@100..400&display=swap');

body, html{
    font-family: "Oswald", sans-serif;
    background-color:#0e0e0e;
    color: #d3d3d3;
    padding:0px;
    margin:0px;
    font-size: 22px;
}

.changeLog {
    --sb-track-color: #232E33;
    --sb-thumb-color: #8b0000;
    --sb-size: 14px;
}

.changeLog::-webkit-scrollbar {
    width: var(--sb-size);
}

.changeLog::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
}

.changeLog::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
    .changeLog {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}

header {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    flex-direction: column;
    font-size: 34px;
    z-index: 9;
}

.footer small{
    font-size:12px;
  }

.downIcon {
    display: block;
    opacity: 0;
    animation: mouse-scroll infinite ease-out 3s;
    transition: opacity ease-out 0.3s;
}

.trig-scroll-top .downIcon{
    opacity: 1;
}

@keyframes mouse-scroll {

    0% {
        transform:translateY(0px);
    }

    50% {
        transform:translateY(20px);
    }

    100% {
        transform:translateY(0px);
    }

}

.header{
    margin-top: 133px;
}

.header .background {
    background-image: url("../imgs/header.jpg");
    background-position: 50% calc(var(--trig-reverse) + 53%);
    background-size: 86%;
    width: 90%;
    max-width: 1600px;
    height: 100%;
    position: sticky;
    background-repeat: no-repeat;
    clip-path: polygon(calc(var(--trig) + 40%) 0, calc(var(--trig-reverse) + 60%) 0, calc(var(--trig-reverse) + 60%) 100%, calc(var(--trig) + 40%) 100%);
    transition: all ease-out 0.3s;
    opacity: 1!important;
}

.header[data-trig-var="10"] .background{
    opacity: 0!important;
}

.header .bigLogo{
    opacity:0;
    transition:opacity ease-out 0.3s;
}

.header[data-trig-var="70"] .bigLogo,
.header[data-trig-var="80"] .bigLogo,
.header[data-trig-var="90"] .bigLogo,
.header[data-trig-var="100"] .bigLogo{
    opacity:1;
}

.about{
    width:100%;
    margin-bottom:180px;
}

.logo img {
    display: block;
    max-width: 100%;
    margin: auto;
    height: auto;
    position: relative;
    z-index: 9;
    /* opacity: 0.6; */
}

.pinContainer {
    width: 100%;
    min-height: 400vh;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.bigLogo {
    /* background-image: url("/assets/imgs/bigLogo.png"); */
    height: calc(400px + calc(var(--trig-px) * 5));
    width: 100%;
    background-size: cover;
    background-position: center;
    opacity: calc(var(--trig));
    /* mix-blend-mode: multiply; */
    background: linear-gradient(180deg, rgba(14, 14, 14, 1) calc(var(--trig) - 150%), rgba(255, 255, 255, 0) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:44px;
}

.textBlock{
    padding: 40px 20px;
    margin-top:40px;
    margin-bottom:40px;
    max-width:1000px;
    margin:auto;
}

.pinned {
    display: inline-block;
    position: sticky;
    top: 30%;
}

.borderGradient{
    position:relative;
}

.borderGradient::before {
    content: "";
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    position: absolute;
    background-color: #000000;
    border-radius: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.heading{
    text-align:center;
    transform: translateY(var(--trig));
    transition: transform ease-out 0.3s;
}

.fadeIn{
    width:100vw;
    height:100vh;
    position:fixed;
    top:0px;
    left:0px;
    background:#000;
    z-index:99;
    opacity:1;
    transition:opacity ease-out 2s;
    pointer-events: none;
}

.tokenomics {
    overflow: hidden;
    z-index: 9;
    position: relative;
    background-color: #272727;
}

.whitepaper{
    margin-bottom:50px;
    overflow:hidden;
    z-index: 9;
    position: relative;
    background-color: #070707;
}

.whitepaperBox {
    width: 100%;
    color: #fe9004;
    display: flex;
    align-items: center;
    min-height: 250px;
    position: relative;
    justify-content: center;
    flex-direction: column;
}

.whitepaperBox a {
    text-decoration: none;
    text-align: -webkit-center;
    color: #ffd7a5;
    display: block;
    transform: scale(1) rotate(0deg);
    transition: transform ease-out 0.3s;
}

.whitepaperBox a:hover{
    transform: scale(1.3) rotate(3deg);
    color: #fff8ef;
}

a.link {
    text-decoration: none;
    text-align: -webkit-center;
    color: #ffd7a5;
    display: block;
    transform: scale(1) rotate(0deg);
    transition: transform ease-out 0.3s;
}

a.link:hover{
    transform: scale(1.3) rotate(3deg);
    color: #fff8ef;
}

.fa-file{
    display: block;
    font-size: 80px;
}

.fileItem{
    width:100%;
}

#tokenomicsChart {
    max-width: 500px;
    max-height: 500px;
    position: relative;
    display: inline-block;
}

.containerText {
    display: inline-block;
    color: #a1a1a1;
    position: relative;
    max-width: 800px;
}

.gradContainer{
    transform:translateY(100%);
    opacity:0;
    transition:all ease-out 1s;
}

.trig .gradContainer{
    transform:translateY(0%);
    opacity:1;
}

.botContainer{
    position: relative;
}

.botInfo {
    position: absolute;
    top: 0px;
    padding: 40px;
}

.botInfo::before{
    content:"";
    width:5px;
    height:100%;
    background-color:#1f1f1f;
    display: block;
    position: absolute;
    top:0;
    left:5px;
}

.botInfo::after{
    content:"";
    width:5px;
    height:var(--trig);
    background-color:#b8b8b8;
    display: block;
    position: absolute;
    top:0;
    left:5px;
    transition: height ease-out 0.3s;
}

.cards {
    transform: rotate3d(1, 1, 1, 8deg) skewX(1deg) translateX(-50%);
    perspective: 10px;
    position: absolute;
    right: 0px;
    top: 0px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.card1{
    transform: translateY(100%) translateX(0%) rotate3d(1, 1, 1, -15deg);
    transition:all ease-out 0.3s;
}

.card2{
    top: 20px;
    right: 20px;
    transform: translateY(100%) translateX(0%) rotate3d(1, 1, 1, -10deg);
    transition:all ease-out 0.3s;
}

.card3{
    top: 40px;
    right: 40px;
    transform: translateY(100%) translateX(0%) rotate3d(1, 1, 1, -5deg);
    transition:all ease-out 0.3s;
}

.trade{
    position:relative;
    overflow: hidden;
}

.comingSoon{
    margin-bottom:185px;
    text-align: center;
}

.footer {
    max-width: 1000px;
    width: 90%;
    margin: auto;
    border-top: solid 1px #FFF;
    text-align: center;
    font-size: 42px;
    margin-bottom: 50px;
}

.footer a{
    display: inline-block;
    color:#FFF;
    transform:scale(1);
    transition: transform ease-out 0.3s;
}

.footer a:hover{
    transform:scale(1.3);
}

.footer img{
    max-width: 300px;
    width:calc(100% - 80px);
    height:auto;
    margin:40px;
}

.borderGradient {
    border-radius: 30px;
    background: #8B0000;
    background: linear-gradient(var(--trig-deg),rgba(139, 0, 0, 1) 0%, rgba(255, 140, 0, 1) 50%, rgba(237, 221, 83, 1) 100%);
    transition: all ease-out 5s;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 50px;
    margin: 100px auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.bot {
    background: linear-gradient(180deg, rgb(15 15 15) 0%, rgb(255 87 34 / 24%) 100%);
    background-position: bottom;
}

.botLogo{
    max-width: 161px;
    left: 0px;
    position: absolute;
    top: -100px;
    transform: translateX(-70%);
}

.tradeBotDownload{
    overflow: hidden;
    z-index: 9;
    position: relative;
    background-color:#0e0e0e;
}

.tradeBotDownload .containerText {
    text-align: center;
    width: 100%;
    font-size: 32px;
    max-width: 100%;
}

.tradeBotDownload .containerText .fa-windows, .tradeBotDownload .containerText .fa-linux{
    font-size: 140px;
}

.botLogo img{
    max-width: 200px;
}

.fadeIn.trig {
    opacity:0!important;
}

.bot .pinContainer{
    max-height:200vh;
}

.bot[data-trig-var="10"] .card3,
.bot[data-trig-var="20"] .card3,
.bot[data-trig-var="30"] .card3{
    transform: translateY(0%) translateX(0%);
}
.bot[data-trig-var="10"] .card2,
.bot[data-trig-var="20"] .card2,
.bot[data-trig-var="30"] .card2,
.bot[data-trig-var="40"] .card2,
.bot[data-trig-var="50"] .card2{
    transform: translateY(0%) translateX(0%);
}
.bot[data-trig-var="10"] .card1,
.bot[data-trig-var="20"] .card1,
.bot[data-trig-var="30"] .card1,
.bot[data-trig-var="40"] .card1,
.bot[data-trig-var="50"] .card1,
.bot[data-trig-var="60"] .card1,
.bot[data-trig-var="70"] .card1,
.bot[data-trig-var="80"] .card1,
.bot[data-trig-var="90"] .card1{
    transform: translateY(0%) translateX(0%);
}

.botInfo h2 {
    opacity:0;
    transition: opacity ease-out 0.3s;
}

.bot[data-trig-var="10"] .card1header,
.bot[data-trig-var="20"] .card1header,
.bot[data-trig-var="30"] .card1header{
    opacity:1;
}

.bot[data-trig-var="40"] .card2header,
.bot[data-trig-var="50"] .card2header{
    opacity:1;
}

.bot[data-trig-var="60"] .card3header,
.bot[data-trig-var="70"] .card3header,
.bot[data-trig-var="80"] .card3header,
.bot[data-trig-var="90"] .card3header{
    opacity:1;
}

.changeLog{
    max-height:300px;
    overflow: auto;
}

@media only screen and (max-width: 1000px) {
    .borderGradient{
        flex-direction: column;
    }
    .botInfo h2 {
        font-size:14px;
    }
    .cards{
        max-height:220px;
    }
    .header{
        margin-top: 80px;
    }
    .header .background {
        background-size: 186%;
    }
}