@import url('https://ui.gg/lib/font/montserrat.css');
@import url('https://ui.gg/lib/font/overpass.css');

/* basic */
* {font-family: montserrat !important;}
body,
load {background-color: var(--111);user-select: none;}

/* color */
:root {
    --color: #3d0cf5;
}

/* btn */
.btn {border-radius: 100px;text-transform: uppercase;font-weight: bold;}

/* element */
.element {position: fixed;width: 100vw;height: 100vh;z-index: 3;pointer-events: none;
    a {position: absolute;margin: 40px;pointer-events: all;color: white;
        &.element-logo {left: 0;font-size: 40px;font-weight: bold;}
        &.element-menu {right: 0;font-size: 48px;}
        &.element-download {right: 0;bottom: 0;letter-spacing: 3px;}
        &.element-name {left: 0;bottom: 0;text-transform: uppercase;font-size: 30px;letter-spacing: 5px;}
    }
}

/* home */
.home {width: 100%;height: 100%;overflow: hidden;
    .tilt {width: 100%;height: 100%;position: relative;animation-delay: 1s;
        .tilt-layer {position: absolute;width: 100%;height: 100%;inset: 0;transition: transform .4s ease-out;
            &:last-of-type {height: calc(100% + 50px);}
            img {width: 100%;height: 100%;object-fit: cover;}
            span {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
        }
    }
    aside {font-size: 100px;text-transform: uppercase;padding-top: 30vh;color: white;pointer-events: none;position: relative;z-index: 1;
        span {display: block;font-family: overpass !important;letter-spacing: 60px;line-height: 1.5;
            &:nth-child(2) {text-align: right;}
        }
    }
}

/* card */
.card {background-color: white;border-radius: 20px;padding: 30px; max-width: 500px;width: 90%;text-align: center;margin: auto;
    .amount-box {background-color: var(--f7);border-radius: 10px;padding: 20px;margin-bottom: 20px;
        .amount-label {margin-bottom: 5px;color: var(--ccc);}
        .amount-value {font-size: 30px;font-weight: bold;color: var(--333);}
    }
    .info {background-color: var(--f7);border-radius: 10px;padding: 20px;text-align: left;display: none;
        .info-row {margin: 5px 0;
            span {padding: 0 5px;}
        }
    }
    #icon .ico {font-size: 48px;margin-bottom: 20px;}
    .desc {margin: 20px 0;}
    .info-text {margin-bottom: 20px;}
    .error {background-color: var(--red);border-radius: 10px;padding: 15px;margin-bottom: 20px;display: none;color: white;}
    .btn {width: 100%;margin-bottom: 20px;
        .order-info {background-color: var(--000-2);padding: 10px;border-radius: 10px;}
    }
}

/* menu */
.menu {padding-top: 40px;background-color: var(--222);
    a {display: block;font-size: 18px;color: white;text-transform: capitalize;padding: 20px;
        &:hover {background-color: var(--333);}
    }
}

/* pop */
pop {
    pop-sider {max-width: 500px;width: 70%;}
}









@media(max-width:640px){

    /* btn */
    .btn {border-radius: 1rem;}

    /* element */
    .element {
        a {margin: .2rem;
            &.element-logo {font-size: .4rem;}
            &.element-menu {font-size: .5rem;}
            &.element-download {letter-spacing: .03rem;padding: 0 .4rem;}
            &.element-name {font-size: .3rem;letter-spacing: .05rem;}
        }
    }

    /* home */
    .home {
        aside {font-size: .7rem;
            span {letter-spacing: .2rem;}
        }
    }

    /* card */
    .card {border-radius: .2rem;padding: .2rem;
        .amount-box {border-radius: .1rem;padding: .2rem;margin-bottom: .2rem;
            .amount-label {margin-bottom: .1rem;}
            .amount-value {font-size: .3rem;}
        }
        .info {border-radius: .2rem;padding: .2rem;
            .info-row {margin: .05rem 0;
                span {padding: 0 .05rem;}
            }
        }
        #icon .ico {font-size: .5rem;margin-bottom: .2rem;}
        .desc {margin: .2rem 0;}
        .info-text {margin-bottom: .2rem;}
        .error {border-radius: .1rem; padding: .15rem;margin-bottom: .2rem;}
        .btn {margin-bottom: .2rem;
            .order-info {padding: .1rem;border-radius: .1rem;}
        }
    }

    /* menu */
    .menu {padding-top: .4rem;
        a {font-size: .2rem;padding: .2rem;}
    }

}