:root {
    --gap: 10px;
}

:root {
    --clr-header: linear-gradient(to right, #3b383b, #534f51);
    --clr-aside: #3b383b;
    --clr-main: linear-gradient(to bottom left, #787576, #373235, #181618);
    --clr-footer: #423155;
    --clr-nav: linear-gradient(to right, #3b383b, #1b181a);
    --clr-nav-button: #484347;
    --clr-element: #3b383b;
    --clr-outline: #AEAEAE;
    --clr-leaderboard: #363536;

    --clr-text: #fff;

    --clr-title: linear-gradient(to bottom, #2c2c2c, #b1a441);

    --clr-button: linear-gradient(to bottom, #91ecdf, #82B4A8);
    --clr-gold: linear-gradient(to bottom, #F6DC0B, #B39E00);
    --clr-red: #b63d3d;

    --clr-span-1: #164996;
    --clr-span-2: #AC0B17;
    --clr-span-3: #DA6514;
    --clr-span-4: #2688C3;
    --clr-span-5: #451580;
    --clr-span-6: #9E2D16;
    --clr-span-7: #4C7011;
    --clr-span-8: #CB2257;
    --clr-span-9: #916024;
    --clr-span-10: #7D0341;
    --clr-span-11: #CCA717;
    --clr-span-12: #57B1B5;
    --clr-span-13: #627775;
    --clr-span-14: #E7940C;
    --clr-span-15: #3A474F;
    --clr-span-16: #C76084;
    --clr-span-17: #027172;
    --clr-span-18: #894F16;
    --clr-span-19: #78A517;
    --clr-span-20: #844E96;
    --clr-span-21: #49B786;
    --clr-span-22: #859FC4;
    --clr-span-23: #D8855F;
    --clr-span-24: #2A2966;
    --clr-span-25: #8D8409;
}

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

::-webkit-scrollbar {
    display: none;
}

h1,
h2,
h3 {
    text-align: center;
    margin: 0 auto;
}

input,
button,
select {
    font-size: 1.2rem;
    padding: 5px 10px;

    white-space: nowrap;
    cursor: pointer;
}

input {
    width: 100%;
    cursor: text;
}

input:focus {
    outline: solid 2px rgba(255, 255, 255, 0.5);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

button {
    font-size: 1.3rem;
    width: fit-content;
    padding: 5px 20px;

    background: var(--clr-button);
    color: rgb(0, 0, 0);
    border: 0;

    &.gold-button {
        background: var(--clr-gold);
    }

    &.red-button {
        background: var(--clr-red);
        color: rgb(255, 255, 255);
    }

    &.transparent-button {
        font-size: 2rem;
        padding: 0 10px;
        background: transparent;
        color: rgb(255, 255, 255);
        outline: none;
    }

    &.navigation-button {
        background: var(--clr-nav-button);
    }
}

select {
    width: 100%;
    border-radius: 0;
    border: solid 2px var(--clr-outline);
    color: white;
}

img {
    pointer-events: none;
}

html,
body {
    color-scheme: dark;
    touch-action: manipulation;

    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body {
    font-family: 'Poppins';
    font-size: 1rem;
    line-height: 1.2;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

body {
    display: grid;
    grid-template-areas:
        "header header"
        "aside main"
        "aside main"
        "aside footer"
        "aside nav";

    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto auto;

    background-color: var(--clr-background);
    color: var(--clr-text);
}

header {
    grid-area: header;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    max-width: 100vw;
    padding: 10px;

    background: var(--clr-header);

    @media screen and (max-width: 1135px) {
        justify-content: space-between;
    }

    & div {
        display: flex;
        gap: var(--gap);
    }
}

.menu-btn {
    display: none;
    align-items: center;
    justify-content: center;

    height: 100%;
    width: 50px;

    padding: 0 10px;

    @media screen and (max-width: 1135px) {
        display: flex;
    }
}

.inner-box {
    position: relative;

    display: flex;
    justify-content: center;

    width: 100%;
    height: 15px;
}

.inner-box span {
    position: absolute;

    width: 100%;
    height: 3px;

    background-color: var(--clr-text);
    border-radius: 10px;

    transition: all 0.2s ease-in-out;
}

.menu-btn span:nth-child(1) {
    top: 0;
}

.menu-btn span:nth-child(2) {
    bottom: 0;
}

.menu-btn.animating span:nth-child(1) {
    top: 40%;
}

.menu-btn.animating span:nth-child(2) {
    bottom: 40%;
}

.menu-btn.open span:nth-child(1) {
    transform: rotate(45deg);
}

.menu-btn.open span:nth-child(2) {
    transform: rotate(-45deg);
}

aside {
    grid-area: aside;

    flex-direction: column;
    background: var(--clr-aside);

    & nav {
        display: flex;
        flex-direction: column;

        width: 0px;

        overflow: hidden;
        transition: all 0.3s ease-in-out;

        &.open {
            width: 450px;
        }

        & button {
            font-size: 1.5rem;
            width: 100%;
            text-align: left;
            padding: 10px;
            border: 0;
            border-radius: 0;
            background-color: var(--clr-nav-button);
        }
    }
}

main {
    grid-area: main;

    position: relative;
    overflow: scroll;

    overscroll-behavior: none !important;

    min-width: 100vw;

    padding: var(--gap);
    padding-bottom: 0;
    background: var(--clr-main);

    color: var(--clr-text);

    @media (min-width: 650px) {
        scroll-behavior: smooth;
    }

    & .background-overlay {
        position: sticky;
        top: 0;
        bottom: 0;

        display: none;

        width: 100%;
        height: 100%;

        z-index: 2;

        background-color: rgb(0, 0, 0);
        outline: var(--gap) solid rgb(0, 0, 0);
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    & .background-overlay.animating {
        display: block;
    }

    & .background-overlay.open {
        opacity: 0.8;
    }
}

section {
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    height: 100%;

    &.hidden {
        display: none;
    }

    & .page-header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        width: 100%;
        max-width: 900px;
        margin: 0 auto;

        & p {
            font-size: 2rem;
        }

        & select {
            width: fit-content;
        }
    }

    & .button-container {
        position: sticky;
        bottom: 0;
        margin-top: auto;

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 20px;

        padding: 15px 100px;
        padding-top: 5px;

        @media screen and (max-width: 1135px) {
            padding: 15px 40px 30px 40px;
        }

        @media screen and (max-width: 650px) {
            justify-content: center;
            padding: 15px 15px 30px 15px;
        }

        & button {
            font-size: 1.5rem;

            @media screen and (max-width: 650px) {
                flex: 0 1 300px;
            }
        }

        &.hidden {
            @media screen and (max-width: 1135px) {
                display: none;
            }
        }
    }
}

footer {
    grid-area: footer;

    display: none;

    background-color: var(--clr-footer);

    @media screen and (max-width: 1135px) {
        display: none;
    }
}

nav {
    grid-area: nav;

    display: flex;

    background: var(--clr-nav);

    @media screen and (max-width: 1135px) {
        display: none;
    }

    & button {
        background: var(--clr-nav-button);
        color: rgb(255, 255, 255);
    }
}

main .interaction-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    /* transform: translate(-65%, -50%); */

    display: none;
    flex-direction: column;
    gap: 20px;

    padding: 20px;

    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    z-index: 3;

    background: var(--clr-element);

    opacity: 0;
    transition: all 0.2s ease-in-out;

    & .header {
        display: flex;

        h1 {
            text-align: left;
            width: 100%;
            padding: 0;
            margin: 0;
            background-color: transparent;
        }

        button {
            width: fit-content;
        }
    }

    @media screen and (max-width: 650px) {
        max-width: calc(100vw - 50px);
        max-width: calc(100dvw - 50px);
    }

    &.animating {
        display: flex;
    }

    &.open {
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    & .button-container {
        display: flex;
        justify-content: center;
        gap: 10px;

        & button {
            width: 100%;
        }
    }


    /* //////////////////////////////////////////////////////////// */

    & .team-list-container {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;

        & h1 {
            position: sticky;
            top: 0;

            width: 100%;
            margin: 0;
            padding: 0;
            margin-bottom: var(--gap);

            background-color: transparent;
        }

        @media (max-width: 650px) {
            grid-template-columns: 1fr;
        }

        &:not(:has(.slot:not(.hidden))) {
            display: none;
        }

        & .team-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px 20px;

            max-height: calc(100vh - 300px);
            max-height: calc(100dvh - 300px);
            overflow-y: scroll;

            padding: 2px;

            & .slot {
                display: flex;
                align-items: flex-start;
                gap: var(--gap);

                padding: 30px 20px;

                border-style: none none none solid;
                border-color: rgb(124, 124, 124);
                border-width: 4px;

                cursor: pointer;

                transition: transform 0.2s ease-in-out;

                @media screen and (min-width: 1135px) {
                    &:hover {
                        transform: scale(98%);
                    }
                }

                background-color: rgba(0, 0, 0, 0.5);

                &.gold-slot {
                    background: linear-gradient(to right, rgba(255, 165, 0, 0.3), rgba(50, 30, 0, 0.1));
                    border-color: gold;
                }

                &.hidden {
                    display: none;
                }

                & span {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 1.5rem;
                    line-height: 1;
                    font-weight: bold;
                    line-height: 1;

                    max-width: 0;
                    max-height: 0;

                    margin: auto 0;

                    padding: 10px;

                    opacity: 0.5;

                    @media (max-width: 650px) {
                        font-size: 1.2rem;
                        padding: 2px;
                    }
                }

                & .input-container {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    width: 100%;

                    padding: 0 0 0 20px;

                    & .player-input {
                        display: grid;
                        grid-template-columns: 1fr 0.3fr;
                        gap: var(--gap);

                        width: 100%;
                        min-height: 20px;

                        & p:nth-child(2) {
                            text-align: center;
                        }
                    }
                }

                & button {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 2rem;
                    line-height: 1;

                    max-width: 0;
                    max-height: 0;

                    padding: 10px;
                }
            }
        }
    }

    & .table-container {
        display: flex;
        flex-direction: column;
        gap: 20px;

        width: 100%;

        & table {
            width: 100%;

            padding: var(--gap);
            padding-top: 0;
            border-radius: 10px;

            background: var(--clr-element);

            th,
            td {
                text-align: center;
            }

            td {
                outline: solid 2px var(--clr-outline);
            }
        }

        &.hidden {
            display: none;
        }
    }
}

.slot-page {

    & .button-container button {
        &.disabled {
            pointer-events: none;
            opacity: 0.5;
        }
    }

    & .slot-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;

        max-width: 900px;
        margin: 0 auto;

        @media screen and (max-width: 650px) {
            grid-template-columns: 1fr;
        }

        & .slot {
            display: flex;
            flex-direction: column;

            background-color: rgba(0, 0, 0, 0.5);
            opacity: 50%;

            transition: transform 0.2s ease-in-out;

            @media screen and (min-width: 1135px) {
                &:hover {
                    transform: scale(98%);
                }
            }

            & .transparent-button {
                pointer-events: none;
                opacity: 0;
            }

            &:has(input:focus),
            &:has(input:not(:placeholder-shown)) {
                opacity: 100%;
                box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);

                & .transparent-button {
                    pointer-events: auto;
                    opacity: 1;
                }
            }

            & .slot__header {
                scroll-margin-top: 25vh;
                scroll-margin-top: 25dvh;

                display: flex;
                align-items: center;
                gap: var(--gap);

                background-color: rgba(0, 0, 0, 0.5);
                padding: 1% 2%;

                & span {
                    white-space: nowrap;
                }

                & input {
                    white-space: nowrap;
                    line-height: 0;
                    border: 0;
                    background-color: transparent;
                    color: var(--clr-text);
                }
            }

            & .slot__player-container {
                gap: 7%;
                width: 100%;
                padding: 4%;

                cursor: pointer;

                & .slot__player {
                    display: flex;
                    align-items: center;
                    gap: var(--gap);
                    overflow: hidden;

                    background-color: rgba(255, 255, 255, 0.2);

                    & img {
                        width: 100%;
                        object-fit: cover;
                    }
                }

                @media screen and (min-width: 1135px) {
                    display: flex;

                    &:nth-child(3) {
                        display: none;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1135px) {
        &:not(:has(input:focus)) {
            & .slot__player-container:nth-child(n+2) {
                display: flex;
            }

            & .slot__player-container:nth-child(n+3) {
                display: none;
            }
        }

        &:has(input:focus) {
            & .slot__player-container:nth-child(n+2) {
                display: none;
            }

            & .slot__player-container:nth-child(n+3) {
                display: flex;
            }
        }
    }
}

section .image-header {
    margin-top: var(--gap);
    margin-top: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    & .date-container {
        display: flex;
        gap: 5px;

        text-transform: uppercase;
    }

    & .scrim-title {
        text-transform: uppercase;
        line-height: 1;

        /* width: fit-content; */
        min-height: 1rem;

        padding: 10px;
        border-radius: 10px;

        background: var(--clr-element);
    }
}

.poster-page {
    gap: 0;

    & .slot-container {
        display: flex;
        flex-wrap: wrap;

        justify-content: center;
        align-items: flex-start;
        gap: 20px;

        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        margin-bottom: auto;

        padding: 20px 0px;

        & .slot {
            width: 15%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--gap);

            & .slot__logo {
                display: flex;
                justify-content: center;
                align-items: center;

                width: 100%;
                max-width: 100px;
                aspect-ratio: 1/1;

                border-radius: 10%;
                overflow: hidden;

                border: solid 3px var(--clr-outline);

                & label {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 3rem;

                    width: 100%;
                    height: 100%;

                    cursor: pointer;

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            & span {
                text-align: center;
                white-space: nowrap;

                margin-top: -20px;

                padding: 0 10px;
                border-radius: 100px;
                background-color: var(--clr-outline);
            }

            & .team__name {
                text-align: center;

                margin: 0;
                margin-top: -20px;

                padding: 10px 0;
            }
        }
    }
}

.round-page {

    & .team-list-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;

        width: 100%;
        max-width: 900px;
        margin: 0 auto;

        @media (max-width: 650px) {
            grid-template-columns: 1fr;
        }

        &:not(:has(.slot:not(.hidden))) {
            display: none;
        }

        & .team-list {
            grid-column: 2;

            @media (max-width: 650px) {
                grid-column: 1;
            }

            & .team-list-header {
                position: sticky;
                top: -10px;

                display: flex;

                background-color: rgb(35, 35, 35);

                h3,
                h4 {
                    padding: 10px 0;
                    text-align: center;
                    width: 100%;
                }

                h3 {
                    color: rgb(100, 100, 100);
                }

                h3:nth-child(2) {
                    background: var(--clr-title);
                    color: rgb(255, 255, 255);
                }

                h4 {
                    padding: 0;
                }

                &:nth-child(2) {
                    top: 32px;
                    padding: 3px 0;
                    background-color: rgb(20, 20, 20);
                }
            }

            & .slot {
                display: flex;
                gap: var(--gap);

                max-height: 100%;

                padding: 30px 20px;

                opacity: 1;
                overflow: hidden;

                border-style: solid none none none;
                border-color: rgb(124, 124, 124);
                border-width: 3px;

                background-color: rgba(0, 0, 0, 0.5);

                transition: all 0.2s ease-in-out;

                &.animating {
                    opacity: 0;
                    max-height: 0%;
                }

                &.hidden {
                    display: none;
                }

                & span {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 1.5rem;
                    line-height: 1;
                    font-weight: bold;
                    line-height: 1;

                    max-width: 0;
                    max-height: 0;
                    padding: 10px;
                }

                & .input-container {
                    display: flex;
                    flex-direction: column;
                    gap: var(--gap);

                    width: 100%;

                    & .demerit-input {
                        display: grid;
                        grid-template-columns: 1fr 0.3fr;
                        gap: var(--gap);

                        width: 100%;
                        max-height: 0px;
                        min-height: 0px;

                        overflow: hidden;

                        transition: all 0.5s ease-in-out;

                        & input {
                            text-align: center;
                            background-color: transparent;
                            border: solid 2px var(--clr-red);
                            outline: none;

                            &:nth-child(1) {
                                pointer-events: none;
                            }
                        }
                    }

                    & .player-input {
                        display: grid;
                        grid-template-columns: 1fr 0.3fr;
                        gap: var(--gap);

                        width: 100%;
                        min-height: 20px;

                        & input {
                            background-color: transparent;
                        }

                        & input:nth-child(2) {
                            text-align: center;
                        }

                        @media (max-width: 1135px) {
                            scroll-margin-top: 25vh;
                            scroll-margin-top: 25dvh;
                        }
                    }
                }

                & button {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 2rem;
                    line-height: 1;

                    max-width: 0;
                    max-height: 0;
                    padding: 10px;
                }

                @media (hover: hover) {
                    &:hover {
                        & .demerit-input {
                            max-height: 999px;
                        }
                    }
                }

                &:not(:has(.demerit-input input:nth-child(2):placeholder-shown)) .demerit-input {
                    max-height: 999px;
                }

                &:focus-within {
                    & .demerit-input {
                        max-height: 999px;
                    }
                }
            }
        }

        &:nth-child(3) {
            & .team-list-header {
                position: sticky;
                top: -10px;

                display: flex;

                background-color: rgb(35, 35, 35);

                h4 {
                    padding: 3px 0;
                    text-align: center;
                    width: 100%;
                    background-color: var(--clr-red);
                }
            }
        }
    }
}

.placement-page {
    & .team-list-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;

        width: 100%;
        max-width: 900px;

        margin: 0 auto;

        @media (max-width: 650px) {
            grid-template-columns: 1fr;
        }

        &:not(:has(.slot:not(.hidden))) {
            display: none;
        }

        & .team-list {
            display: flex;
            flex-direction: column;
            gap: var(--gap);

            @media (min-width: 650px) {
                &:nth-child(1) {
                    position: sticky;
                    top: 0;
                    height: fit-content;
                }
            }

            & h2 {
                position: sticky;
                top: 0;

                width: 100%;
                margin-bottom: var(--gap);
            }

            & .slot {
                display: flex;
                flex-direction: column;
                gap: var(--gap);

                padding: 0px 20px 40px 20px;

                border-style: none none none solid;
                border-color: rgb(124, 124, 124);
                border-width: 4px;

                background-color: rgba(0, 0, 0, 0.5);

                &.dummy {
                    cursor: pointer;

                    opacity: 0.5;

                    transition: transform 0.2s ease-in-out;

                    @media screen and (min-width: 1135px) {
                        &:hover {
                            transform: scale(98%);
                        }
                    }
                }

                &.gold-slot {
                    background: linear-gradient(to right, rgba(255, 165, 0, 0.3), rgba(50, 30, 0, 0.1));
                    border-color: gold;
                }

                &.hidden {
                    display: none;
                }

                & .slot__header {
                    display: flex;
                    justify-content: space-between;
                    gap: var(--gap);
                    width: 100%;

                    padding: 5px 0;

                    & span {
                        font-size: inherit;
                        opacity: initial;
                    }

                    & p {
                        font-weight: bold;
                    }
                }

                & .slot__body {
                    display: flex;
                }

                & span {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 1.5rem;
                    line-height: 1;
                    font-weight: bold;
                    line-height: 1;

                    max-width: 0;
                    max-height: 0;

                    margin: auto 0;

                    padding: 10px;

                    opacity: 0.5;
                }

                & .input-container {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    width: 100%;

                    padding: 0 0 0 20px;

                    & .player-input {
                        display: grid;
                        grid-template-columns: 1fr 0.3fr;
                        gap: var(--gap);

                        width: 100%;
                        min-height: 20px;

                        & p:nth-child(2) {
                            text-align: center;
                        }
                    }
                }

                & button {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 2rem;
                    line-height: 1;

                    max-width: 0;
                    max-height: 0;

                    padding: 10px;
                }
            }
        }
    }
}

.span-color-1 {
    color: var(--clr-span-1);
}

.span-color-2 {
    color: var(--clr-span-2);
}

.span-color-3 {
    color: var(--clr-span-3);
}

.span-color-4 {
    color: var(--clr-span-4);
}

.span-color-5 {
    color: var(--clr-span-5);
}

.span-color-6 {
    color: var(--clr-span-6);
}

.span-color-7 {
    color: var(--clr-span-7);
}

.span-color-8 {
    color: var(--clr-span-8);
}

.span-color-9 {
    color: var(--clr-span-9);
}

.span-color-10 {
    color: var(--clr-span-10);
}

.span-color-11 {
    color: var(--clr-span-11);
}

.span-color-12 {
    color: var(--clr-span-12);
}

.span-color-13 {
    color: var(--clr-span-13);
}

.span-color-14 {
    color: var(--clr-span-14);
}

.span-color-15 {
    color: var(--clr-span-15);
}

.span-color-16 {
    color: var(--clr-span-16);
}

.span-color-17 {
    color: var(--clr-span-17);
}

.span-color-18 {
    color: var(--clr-span-18);
}

.span-color-19 {
    color: var(--clr-span-19);
}

.span-color-20 {
    color: var(--clr-span-20);
}

.span-color-21 {
    color: var(--clr-span-21);
}

.span-color-22 {
    color: var(--clr-span-22);
}

.span-color-23 {
    color: var(--clr-span-23);
}

.span-color-24 {
    color: var(--clr-span-24);
}

.span-color-25 {
    color: var(--clr-span-25);
}

.overall-page {
    width: 100%;

    & .table-container {
        display: flex;

        width: 100%;
        max-width: 700px;

        margin: 0 auto auto auto;
        border: solid 10px var(--clr-leaderboard);
        border-radius: 10px;

        overflow: scroll;
        overscroll-behavior: none;

        background: var(--clr-leaderboard);

        & table {
            border-collapse: collapse;
            width: 100%;

            tr {
                width: fit-content;
            }

            th,
            td {
                text-align: center;
                white-space: nowrap;

                width: fit-content;

                padding: 5px 10px;
            }

            td {
                border: solid 2px var(--clr-outline);
            }
        }

        /* RANK SECTION OF THE TABLE  */
        & table:nth-child(1) {
            position: sticky;
            left: 0;

            width: 100%;
            max-width: 45px;

            z-index: 1;

            background: var(--clr-leaderboard);

            @media (max-width: 650px) {
                box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
            }
        }

        /* MID SECTION OF THE TABLE  */
        & table:nth-child(2) {

            width: 100%;

            td {
                width: 100%;
            }

            & td:nth-child(1) {
                text-align: left;
                min-width: 120px;
                padding: 0 15px;
                border-left: none;
            }

            & td:nth-child(2) {
                min-width: 65px;
                max-width: 65px;
            }

            & td:nth-child(3),
            & td:nth-child(4) {
                min-width: 85px;
                max-width: 85px;
            }

            & td:nth-child(4) {
                border-right: none;
            }
        }

        /* TOTAL SECTION OF THE TABLE  */
        & table:nth-child(3) {
            position: sticky;
            right: 0;

            width: 100%;
            min-width: 85px;
            max-width: 85px;

            z-index: 1;

            background: var(--clr-leaderboard);

            @media (max-width: 650px) {
                box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.5);
            }
        }
    }
}

.generated-image {
    position: absolute;
    right: -9999px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 2rem;

    width: fit-content;
    min-width: 1080px;
    max-width: 1080px;
    aspect-ratio: 3/4;

    padding: 50px 10px;

    background: var(--clr-main);

    & section {
        padding: 30px;
    }

    & .poster-page {

        & .slot-container {
            gap: 30px;
            font-size: 1.2rem;

            & .slot {
                & .slot__logo {
                    max-width: 400px;
                }
            }
        }
    }

    & .overall-page {

        & .table-container {
            max-width: initial;
            padding: 15px;

            /* RANK SECTION OF THE TABLE  */
            & table:nth-child(1) {
                position: initial;

                width: 100%;
                max-width: 65px;

                z-index: 1;

                background: var(--clr-element);

                @media (max-width: 650px) {
                    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
                }
            }

            /* MID SECTION OF THE TABLE  */
            & table:nth-child(2) {

                width: 100%;

                td {
                    width: 100%;
                }

                & td:nth-child(1) {
                    text-align: left;
                    min-width: 120px;
                    padding: 0 30px;
                    border-left: none;
                }

                & td:nth-child(2) {
                    min-width: 85px;
                    max-width: 85px;
                }

                & td:nth-child(3),
                & td:nth-child(4) {
                    min-width: 135px;
                    max-width: 135px;
                }

                & td:nth-child(4) {
                    border-right: none;
                }
            }

            /* TOTAL SECTION OF THE TABLE  */
            & table:nth-child(3) {
                position: initial;

                width: 100%;
                min-width: 135px;
                max-width: 135px;

                z-index: 1;

                background: var(--clr-element);

                @media (max-width: 650px) {
                    box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.5);
                }
            }
        }
    }
}