body {
    background-color: var(--light);
}

#landing {
    /* background: linear-gradient(-45deg, black, #320459); */
    background: linear-gradient(135deg, rgb(6 2 34) 0%, rgba(62,4,89,1) 100%);
}

#landing h1 {
    font-family: var(--font-title);
    -webkit-text-stroke: 1px black;
}

.landing-text {
    position: relative;
    inset: 50px 0%;
    background: var(--dark);
    padding: 4rem 0;
    width: 100%;
    text-align: center;
}

.nft-gallery {
    align-items: center;
    gap: 3rem;
    width: 80%;
    padding: 10px;
    margin: auto;
    overflow-x: scroll;
    white-space: nowrap;
}

.card {
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-inline: 1rem;
    margin-block: 1.5rem;
    border: solid 4px var(--dark);
    border-radius: 10px;
    overflow: hidden;
}

#stake-rewards {
    display: none;
}

#staking .text {
    backdrop-filter: blur(5px);
    background-color: hsla(298, 100%, 11%, 0.5);
    background-image: linear-gradient(150deg, hsla(298, 100%, 11%, 0.5), hsl(243.69deg 90.16% 27.33% / 50%));
    border-radius: 20px;
    width: 95%;
    padding: 2rem 3rem;
}
#staking a {
    color:hsl(300deg 79.84% 46.85%);
}

u {
    text-decoration-color:rgb(127, 0, 131);
    text-decoration-thickness: .5rem;
    text-underline-offset: 7px;
}

.box {
    display: none;
}

@media screen and (min-width: 900px) {
    .card {
        display: inline-block;
        width: 300px;
        height: 300px;
        margin-inline: 1rem;
        margin-block: 1.5rem;
        border: solid 4px var(--dark);
        border-radius: 10px;
        overflow: hidden;
    }
    #stake-rewards {
        display: inline-block;
        position: absolute;
        right: 10vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: -100;
    }
    #stake-rewards img {
        z-index: -100;
    }
    #staking, #staking p, #staking h2 {
        z-index: 250;
    }
    .img-wrap:before {
        content: '';
        background-image: linear-gradient(to right, rgba(0, 0, 0, 255), rgba(0, 0, 0, 0));
        position: absolute;
        width: 66%;
        height: 101%;
        top: -1;
        bottom: 0;
        left: 0;
    }
    /* #stake-rewards:before {
        content: '';
        background-image: linear-gradient(to top, rgba(239,239,239,255), rgba(239,239,239,0));
        position: absolute;
        height: 100px;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .page #stake-rewards:after {
        content: '';
        display: block;
        height: 9999px;
    }
    #stake-rewards img {
        width: auto;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
        border: 0;
        box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
        -ms-interpolation-mode: bicubic;
    } */
    #staking .text {
        width: clamp(27rem, 50%, 60%)
    }

    .box {
        display: initial;
        -webkit-mask: 
            linear-gradient(to top,  transparent 5%, #fff 15% 50%, transparent 95%),
            linear-gradient(to left, transparent 5%, #fff 15% 50%, transparent 95%);
        -webkit-mask-size: var(--mask-dim);
        -webkit-mask-position:center;
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-composite: source-in;
        
        mask: 
            linear-gradient(to top,  transparent 5%, #fff 15% 50%, transparent 95%),
            linear-gradient(to left, transparent 5%, #fff 15% 50%, transparent 95%);
        mask-size: var(--mask-dim);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-composite: intersect;
    }

    #staking .box {
        --mask-dim: 110% 110%;
    }

    #investment .box {
        width: 40vw;
        margin-block: -22%;
        --mask-dim: 110% 16vw;
    }
    #investment img {
        display: inline-block;
        position: relative;
        z-index: -300;
    }
}