:root {
    --mobile-view-time: 0.45s;
}

@media (min-width:0px) {
    #title {
        margin-top: 80px;
    }

    #ftv.Group img {
        height: 100px;
    }

    .Group {
        max-width: 340px;
    }

    .RegImg {
        max-width: 300px;
    }

    .partnership-logo {
        max-height: 70px;
    }

    .ChessArena p, .ChessArena a {
        font-size-adjust: 0.2;
    }

    .ChessArena .bellowtext {
        margin-top: 5px;
    }

    #updateContainer {
        display: initial;
        opacity: 1;
        transition: ease var(--mobile-view-time);
    }

        #updateContainer.open {
            display: none;
            opacity: 0;
            transition: ease var(--mobile-view-time);
            transition-behavior: allow-discrete;
        }

    .sidebar {
        display: none;
        width: 0;
        opacity: 0;
        transition: ease var(--mobile-view-time);
        transition-behavior: allow-discrete;
    }

        .sidebar.open {
            transition: ease var(--mobile-view-time);
            display: initial;
            opacity: 1;
            transition-behavior: allow-discrete;
        }



    *:not(.non-change, body) {
        font-size-adjust: 0.35;
        transition: ease var(--mobile-view-time);
    }

    .card {
        width: 100%;
        min-width: 200px;
    }

        .card audio {
            width: 260px;
        }

    .TopBar {
        transition: ease var(--mobile-view-time);
        position: fixed;
        height: 100px;
        right: 0;
        left: 0;
        top: 0;
        background-color: var(--color-bg-sidebar);
        border: 2px, solid, var(--color-border-hr);
        border-top: none;
        border-left: none;
        border-right: none;
        z-index: 1;
        display: block;
        opacity: 1;
        transition: ease var(--mobile-view-time);
        transition-behavior: allow-discrete;
    }

        .TopBar.open {
            display: none;
            opacity: 0;
            transition: ease var(--mobile-view-time);
            transition-behavior: allow-discrete;
            z-index: -1;
        }

    #mobile-toggle-button {
        left: 20px;
        top: 20px;
        right: auto;
        width: contain;
        height: contain;
        text-align: center;
    }


        #mobile-toggle-button.open {
            opacity: 0;
        }


    #title {
        margin-top: 100px;
    }

    .Nikki-offer {
        width:300px;
    }

    @starting-style {
        .sidebar.open {
            width: 0;
            opacity: 0;
        }

        #updateContainer.open {
            display: initial;
            opacity: 1;
        }

        .TopBar.open {
            display: initial;
            opacity: 1;
        }
    }
}

@media (min-width:500px) {
    *:not(.non-change, body) {
        font-size-adjust: 0.50;
        transition: ease var(--mobile-view-time);
    }

    #ftv.Group img {
        height: 100px;
    }

    .Group {
        max-width: 500px;
    }

    .RegImg {
        max-width: 300px;
    }

    .partnership-logo {
        max-height: 70px;
    }

    .ChessArena p, .ChessArena a {
        font-size-adjust: 0.2;
    }

    .ChessArena .bellowtext {
        margin-top: 5px;
    }

    .card audio {
        width: 450px;
    }
    .Nikki-offer {
        width: 350px;
    }
}

@media (min-width:700px) {
    *:not(.non-change, body) {
        font-size-adjust: 0.70;
        transition: ease var(--mobile-view-time);
    }

    #ftv.Group img {
        height: 100px;
    }

    .Group {
        max-width: 700px;
    }

    .RegImg {
        max-width: 500px;
    }

    .partnership-logo {
        min-height: 110px;
    }

    .ChessArena p, .ChessArena a {
        font-size-adjust: 0.4;
    }

    .ChessArena .bellowtext {
        margin-top: 5px;
    }

    .card audio {
        max-width: 600px;
    }
    .Nikki-offer {
        width: 600px;
    }
}

@media (min-width:1079px) {
    .sidebar {
        transition: ease var(--mobile-view-time);
        display: initial;
        width: 100px;
        opacity: 1;
        z-index: 2;
    }

    #updateContainer {
        border: 1px, solid, white;
    }

    .TopBar {
        background: none;
        border: none;
        z-index: 1;
    }

    #mobile-toggle-button {
        display: none;
    }

    .card audio {
        width: 450px;
    }

    #title {
        margin-top: initial;
    }

    #updateContainer.open {
        display: initial;
        opacity: 1;
        transition: ease var(--mobile-view-time);
        transition-behavior: allow-discrete;
    }

    .TopBar.open {
        display: initial;
        opacity: 1;
        transition: ease var(--mobile-view-time);
        transition-behavior: allow-discrete;
        z-index: -1;
    }

    #ftv.Group img {
        height: 200px;
    }

    .Group {
        min-width: 1070px;
    }

    .Nikki-offer {
        width: 800px;
    }
}

.non-change * {
    font-size-adjust: initial;
    transition: none;
}