@media screen and (min-width: 300px) and (max-width: 1024px) {
    body
    {
        font-size: 1em;
        flex-flow: row;
        overflow-x: hidden;

        margin: 0px;!important;
        padding: 0px;!important;
    }

    .navname
    {
    }

    .spotlightcon
    {

        width: 100vw;
        padding-left: 5%; !important;
        background: var(--alphabg);
        backdrop-filter: blur(2.5px);
        -webkit-backdrop-filter: blur(9.2px);
        transition: 1s;

    }

    .changelogbtn
    {
        width: 88vw;

    }

    .verspot img
    {
        width: 90vw;
        height: 50vh;
        object-fit: cover;
        border-radius: inherit;

    }

    .spotlight
    {
       width: 90vw;border-radius: 16px;
    }
    .verspot
    {
        text-align: left;
        width: 100vw;
        height: 50vh;
        text-indent: 10px;

    }

    .showcase
    {
        font-size: 1em;
        padding-right: 10px;
    }

    .headingsc
    {
        font-size: 5em;
        padding: 25px;
    }

    .hero
    {
        margin-left: 0px; !important;

    }

    .scrolling
    {

        overflow: visible;
        overflow-scrolling: touch;
    }

    .placeholder
    {
       
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --alphabg: rgba(230, 230, 230, 0.75);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --alphabg: rgba(26, 26, 26, 0.75)

    }
}