body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

#disclaimer{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 2vw;
    filter: opacity(0.25);
}


.button{
    display: flex; 
    justify-content: center;
    align-items: center; 
    margin: 0; 
    padding: 0; 
}

.buttontext{
    z-index: 999999;
    font-size: 8vw;
    font-weight: bold;
    color: black;
    font-family: Arial, sans-serif; 
    pointer-events: none;

}

#chart{
    width: 100%;
    height: 25vh;
    justify-content: center;
    align-items: center; 
    margin: 0; 
    padding: 0; 
    position: absolute;
    top: 0;
    left: 0;
}

#background1{
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, rgba(35,255,0,1) 0%, rgba(35,255,0,1) 25%, rgba(255,255,255,1) 50%, rgba(0,236,255,1) 75%, rgba(0,236,255,1) 100%);
    animation: smoothinvertreverse 0.2s forwards;
}
#background1:hover{
    animation: smoothinvert 0.2s forwards;
}

#background2{
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, rgb(251, 255, 0) 0%, rgb(251, 255, 0) 28%, rgba(255,255,255,1) 50%, rgb(255, 0, 0) 75%, rgb(255, 0, 0) 100%);
    animation: smoothinvertreverse2 0.2s forwards;
}
#background2:hover{
    animation: smoothinvert2 0.2s forwards;
}

#background3{
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, rgb(0, 153, 255) 0%, rgb(0, 153, 255) 25%, rgba(255,255,255,1) 50%, rgb(195, 0, 255) 75%, rgb(195, 0, 255) 100%);
    animation: smoothinvertreverse 0.2s forwards;
}
#background3:hover{
    animation: smoothinvert 0.2s forwards;
}

#background4{
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, rgb(0, 255, 170) 0%,rgb(0, 255, 170) 25%, rgba(255,255,255,1) 50%,  rgb(255, 136, 0) 75%,  rgb(255, 136, 0) 100%);
    animation: smoothinvertreverse2 0.2s forwards;
}
#background4:hover{
    animation: smoothinvert2 0.2s forwards;
}

/*smooth invert gradient*/
@keyframes smoothinvert {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes smoothinvertreverse {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes smoothinvert2 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%);
    }
}

@keyframes smoothinvertreverse2 {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0%);
    }
}

#telegram{
    position: absolute;
    top: 25%;
    right: 0;
    height: 25vh;
    width: 100%;
}

#twitter{
    position: absolute;
    top: 50%;
    right: 0;
    height: 25vh;
    width: 100%;
}

#buy{
    position: absolute;
    top: 75%;
    right: 0;
    height: 25vh;
    width: 100%;
}

#introPopup{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 1);
    justify-content: center;
    align-items: center;
    z-index: 999999;
    animation: fadeout 3s forwards;
}

#logo {
    display: block;
    margin: 5rem auto 4vw auto; /* Center the image */
    height: 15rem;
    transform: scale(1.5);
    animation: jiggle 2s infinite ease-in-out;
}

@keyframes jiggle {
    0% { transform: rotate(2deg) scale(1.5); }
    50% { transform: rotate(-2deg) scale(1.8) translateY(1%); }
    100% { transform: rotate(2deg) scale(1.5);}
}


@keyframes fadeout {
    0% {
        opacity: 1;
        filter: blur(0px);
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
        border-radius: 0%;
        filter: blur(0px);
    }
    100% {
        transform: translateY(-500%);
        border-radius: 100%;
        opacity: 0;
        display: none;
        filter: blur(600vw);
    }
    
}