:root {
    --red-1: #FFEEEE;
    --red-2: #FACDCD;
    --red-3: #F29B9B;
    --red-4: #E66A6A;
    --red-5: #D64545;
    --red-6: #BA2525;
    --red-7: #A61B1B;
    --red-8: #911111;
    --red-9: #780A0A;
    --red-10: #610404;
    --yellow-1: #FFFBEA;
    --yellow-2: #FFF3C4;
    --yellow-3: #FCE588;
    --yellow-4: #FADB5F;
    --yellow-5: #F7C948;
    --yellow-6: #F0B429;
    --yellow-7: #DE911D;
    --yellow-8: #CB6E17;
    --yellow-9: #B44D12;
    --yellow-10: #8D2B0B;
    --gray-1: #FAF9F7;
    --gray-2: #E8E6E1;
    --gray-3: #D3CEC4;
    --gray-4: #B8B2A7;
    --gray-5: #A39E93;
    --gray-6: #857F72;
    --gray-7: #625D52;
    --gray-8: #504A40;
    --gray-9: #423D33;
    --gray-10: #27241D;
    --blue-1: #E0FCFF;
    --blue-2: #BEF8FD;
    --blue-3: #87EAF2;
    --blue-4: #54D1DB;
    --blue-5: #38BEC9;
    --blue-6: #2CB1BC;
    --blue-7: #14919B;
    --blue-8: #0E7C86;
    --blue-9: #0A6C74;
    --blue-10: #044E54;
    --green-1: #F2FDE0;
    --green-2: #E2F7C2;
    --green-3: #C7EA8F;
    --green-4: #ABDB5E;
    --green-5: #94C843;
    --green-6: #7BB026;
    --green-7: #63921A;
    --green-8: #507712;
    --green-9: #42600C;
    --green-10: #2B4005;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    border: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    color: var(--gray-7);
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}

html, body {
    overflow-x: hidden;
    overflow-x: clip;
    background-color: var(--gray-1);
}

#game {
    --from-top: 100px;
    height: calc(100vh - var(--from-top));
    position: fixed;
    top: var(--from-top);
    border-left: 10px solid var(--blue-8);
    border-right: 10px solid var(--red-8);
    background-color: #fff;
    width: 100vw;
}

#ball {
    --size: 20px;
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    background-color: var(--gray-7);
    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);
}

.paddle {
    --width: 10px;
    --height: 100px;
    position: absolute;
    width: var(--width);
    height: var(--height);
    background-color: var(--gray-7);
    border-radius: 3px;
    top: calc(50% - var(--height) / 2);
}

#player1 {
    left: 10px;
}

#player2 {
    right: 10px;
}

#scoreboard {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    width: 100%;
}

.player-score {
    font-size: 40px;
    font-weight: 500;
}

.player-scoreboard {
    height: 100%;
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#timeclock {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

#timeclock .clock-time {
    font-size: 30px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#timeclock .clock-time:not(:first-child)::before {
    content: ":";
    font-size: inherit;
    padding-bottom: 5px;
    box-sizing: border-box;
}