@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;400&display=swap');


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

/* ---- PAGE ---- */

.page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-y: auto;
}

.back-btn-wrapper {
    padding: 2vh 4vw;
    width: max-content;
    border-radius: 50%;
    z-index: 10;
    transition: .4s;
}

.back-btn-wrapper svg:hover {
    box-shadow: 2px 2px 50px #08f21e,
    -2px 2px 50px #08f21e,
    2px -2px 50px #08f21e,
    -2px -2px 50px #08f21e;
}

.back-btn-wrapper svg {
    transition: .4s;
    border-radius: 50%;
    width: 8vw;
    height: 8vw;
    max-width: 24px;
    max-height: 24px;
}


/* ---- BACKGROUND ---- */

.page .bg-container {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.page .bg-container .bg-img {
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%
}

/* ---- HEADER ---- */

.page .header {
    background : linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0.55))
}

.logo-wrapper {
    position: relative;
    display: inline-block;
    width : 18vw;
    max-width: 86px;
}

.circle {
    position: absolute;
    width: 100%;
    aspect-ratio: 1/1;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 1;
    transition: .3s;
}

.about {
    position: absolute;
    top: 85%;
    left: -8%;
    max-width: 110%;
}

.logo-wrapper .logo-img {
    z-index: 2;
    position: relative;
    transition: .4s box-shadow, .4s background-color;
}

.page .main .btn-container .btn-wrapper img:hover, .logo-wrapper:hover .circle, .page .main .btn-container .btn-wrapper img:active, .logo-wrapper:active .circle {
    box-shadow: 2px 2px 50px rgba(8, 242, 30, 0.75),
    -2px 2px 50px rgba(8, 242, 30, 0.75),
    2px -2px 50px rgba(8, 242, 30, 0.75),
    -2px -2px 50px rgba(8, 242, 30, 0.75);
    background-color: rgba(8, 242, 30, 0.75);
}

/* ----   MAIN CONTENT   ---- */

.page .main .supporting-img-wrapper {
    width: 20%;
    max-width: 120px;
}

.page .main .btn-container {
    min-height: 70vh;
    max-width:  480px;
    margin: 0 auto;
}

.page .main .btn-container .btn-wrapper {
    display: inline-block;
    width: 90%;
    height: 100%;
    border-radius: 50%;
}

.page .main .btn-container .btn-wrapper img {
    transition: .4s all;
    border-radius: 50%;
}

@media only screen  and (min-aspect-ratio: 1/1){
    .page .bg-container .bg-img {
        left: 0;
    }
}

@media only screen  and (min-aspect-ratio: 20/11){
    .page .bg-container .bg-img {
        width: 100%;
        height: initial;
    }

    .about {
        top: 180%;
        left: -2%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 768px) and (min-aspect-ratio: 1/1){
    .page .bg-container .bg-img {
        left: 0;
    }

}

@media only screen and (min-width: 992px) {
    .page .main .supporting-img-wrapper {
        width: 100%;
        max-width: 240px;
    }

    .page .bg-container .bg-img {
        left: 0;
        height: 100%;
    }

    .page .main .btn-container .btn-wrapper {
        width: 100%;
    }

    .about {
        top: 180%;
        left: -2%;
        max-width: 100%;
    }

    .back-btn-wrapper {
        position: absolute;
        top: 130%;
        padding: 0;
    }

    .logo-wrapper {
        width : 20vw;
        max-width: 160px;
        height: 5rem;
        border-radius: 50%;
        transition: .4s box-shadow, .4s background-color;
    }
}

@media only screen and (min-width: 992px) and (min-aspect-ratio: 16/9){
    .page .bg-container .bg-img {
        width: 100%;
        height: auto;
    }


    .about {
        top: 180%;
        left: -2%;
        max-width: 100%;
    }

}

@media only screen and (min-width: 1440px) {
    .logo-wrapper {
        max-width: 200px;
    }

    .page .main .btn-container .btn-wrapper {
        width: 100%;
    }
}

@media only screen and (min-width: 1680px) {

    .page .main .btn-container {
        min-height: 70vh;
        max-width:  680px;
        margin: 0 auto;
    }

    .page .main .btn-container .btn-wrapper {
        display: inline-block;
        width: 90%;
        height: 100%;
    }
}