style.css

:root{
    --header-height: 66px;
    --nav-height: 66px;
    --text-color: #ffffff;
    --table-color: #1f1f1f;
    --buttons-color: #1a1a1a;
    --primary-color: #1a1a1a;
    --flash: none;
}

*{margin: 0;padding: 0;box-sizing: border-box;}
html{
    font-family: sans-serif;
}
body{
    overflow: hidden;
    min-height: 100vh;
    background-color: var(--primary-color);
}

/*  STARTING MENU   */

.starting-menu{
    overflow: hidden;
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.9);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    opacity: 1;
    transform: scale(1);
    border-radius: 0;
    transition: all 1s ease;
}
.starting-menu-title-container{
    width: 100%;
    opacity: 0;
    animation: fadeIn 2s ease 1s forwards;
}

.starting-menu-title-container p{
    color: #fff;
    text-align: center;
}
.starting-menu-title-container p:nth-child(1){
    font-weight: 700;
}
.starting-menu-title-container p:nth-child(2){
    font-weight: 700;
}
.starting-menu-title-container p:nth-child(3){
    font-weight: 900;
    font-size: 4rem;
}
.starting-menu-title-container p:nth-child(4){
    text-shadow: 2px 2px 2px rgba(0,0,0,1);
}

#PlayButton{
    width: 33vw;
    height: 50px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--text-color);
    background-color: var(--buttons-color);
    border-radius: 10px;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 5px rgba(0,0,0,1),
    inset -2px 2px 5px rgba(255,255,255,.4);
    cursor: pointer;
}
.starting-menu .menu-ball-container{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
    opacity: .5;
    z-index: -1;
    animation: startingAnimation 3s ease forwards;
}
.starting-menu .menu-ball{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: inherit;
    height: inherit;
    background:radial-gradient(at 30% 30%,#0000,#000a) white;
    border-radius: 50%;
    
}

.starting-menu .author{
    position: absolute;
    top: 90%; left: -66vw;
    width: 66vw;
    height: 2vh;
    font-size: 12px;
    color: #fff;
    text-align: center;
    animation: glideRight 2s ease-in forwards;
}

.starting-menu.remove{
    top: -100%;
    height: 100vw;
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
    cursor: none;
}

#SaveButton{
    position: absolute;
    left: 0; top: var(--header-height);
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--text-color);
    font-size: 10px;
    font-weight: 500;
    border-radius: 50%;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 2px rgba(255,255,255,.3),
    inset -2px 2px 2px rgba(255,255,255,.3),
    2px -2px 5px rgba(0,0,0,.9),
    inset 2px -2px 2px rgba(0,0,0,.9);
}


/*  HEADER/SCOREBOARD AREA  */ 

header{
    position: relative;
    width: 100vw;
    height: var(--header-height);
    /* animation: pulseRed 500ms ease-out forwards; */
    /* animation: none; */
}
header::before{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: var(--flash);
}

header h1{
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-color)
}
.data-container{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}
.data-container p{
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color)
}

/*  CANVAS  */

#canvas{
    width: 100vw;
    height: calc(100vh - (var(--header-height) + var(--nav-height)) - 5px);
    margin-bottom: 0;
    background-color: var(--table-color);
}

/*  Navigation Bar  */

nav{
    width: 100%;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#AgainButton{
    width: 15vw;
    height: 33%;
    background-color: var(--buttons-color);
    color: var(--text-color);
    font-weight: 500;
    border-radius: 5px;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 5px rgba(0,0,0,.5),
    inset -2px 2px 2px rgba(255,255,255,.4);
    /* animation: buttonPressed 250ms linear forwards; */
}
#BeginButton{
    width: 33vw;
    height: 66%;
    font-size: 1rem;
    font-weight: 900;
    color: var(--text-color);
    background-color: var(--buttons-color);
    border-radius: 10px;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 5px rgba(0,0,0,.5),
    inset -2px 2px 5px rgba(255,255,255,.4);
    /* animation: buttonPressed 250ms linear forwards; */
}

#MenuButton{
    width: 40px;
    height: 40px;
    background-color: var(--buttons-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 5px;
    box-shadow: -2px 2px 5px rgba(0,0,0,.5),
    inset -2px 2px 5px rgba(255,255,255,.4);
    z-index: 1;
    /* animation: buttonPressed 250ms linear forwards; */
}
#MenuButton .bar{
    width: 20px;
    height: 2px;
    border: 1px solid var(--text-color);
}
.menu{
    position: absolute;
    top: 100%; left: 0;
    width: 100vw;
    height: 100vh;
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 1s ease;
}
.menu.open{
    top: 0;
}

#HighScoresButton{
    position: absolute;
    top: 25px; left: 25px;
    padding: 5px 10px;
    font-size: calc((100vw + 100vh)/100);
    font-weight: 900;
    color: var(--text-color);
    background-color: var(--buttons-color);
    border-radius: 10px;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 5px rgba(0,0,0,.5),
    inset -2px 2px 5px rgba(255,255,255,.4);
}
.menu h2{
    color: var(--text-color);
}
.instructions-container{
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.instructions-content{
    /* border: 1px solid green; */
}
.instruction{
    text-align: center;
    color: var(--text-color);
    padding: 10px;
    font-size: calc((100vw + 100vh)/66);
}


.color-input-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.color-container-title{
    color: var(--text-color);
    text-decoration: underline;
}
.theme-color-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.game-color-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.col{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
label[for="PrimaryColorInput"],
label[for="ButtonsColorInput"],
label[for="TextColorInput"]{
    font-size: calc((100vw + 100vh)/100);
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700;
}
label[for="BallColorInput"],
label[for="PaddleColorInput"],
label[for="TableColorInput"]{
    font-size: calc((100vw + 100vh)/100);
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700;
}
#PrimaryColorInput{
    width: calc(100vw/6);
    border: none;
}
#ButtonsColorInput{
    width: calc(100vw/6);
    border: none;
}
#TextColorInput{
    width: calc(100vw/6);
    border: none;
}
#BallColorInput{
    width: calc(100vw/6);
    border: none;
}
#PaddleColorInput{
    width: calc(100vw/6);
    border: none;
}
#TableColorInput{
    width: calc(100vw/6);
    border: none;
}

/*  SAVING SCORE INPUT CONTAINER    */

.saving-container{
    position: absolute;
    top: 0; left: -100vw;
    background-color: rgba(0,0,0,.9);
    width: 100vw;
    height: 100vh;
    z-index: 2;
    transition: all 250ms ease;
}
.saving-container.open-save-menu{
    left: 0;
}

.saving-container-content{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 66vw;
    height: 66vw;
    padding: 1rem;
    background-color: var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 0 20px 5px rgba(0,0,0,.7),
                0 0 100px rgba(255,255,255,.3),
                inset 0 0 5px rgba(255,255,255,.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    opacity: 0;
    transition: all 500ms ease 250ms;
}

.saving-container-content.fadeIn{
    opacity: 1;
}

.save-data-header{
    width: 100%;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.save-data-header li{
    text-align: center;
    font-size: calc((100vw + 100vh)/66);
    color: var(--text-color);
    text-transform: uppercase;;
    font-weight: 700;
    text-align: center;
}
.save-data-header li span{
    font-size: calc((100vw + 100vh)/100);
}
.save-name-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.save-name-container label{
    font-size: calc((100vw + 100vh)/66);
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}
.save-name-container input{
    text-align: center;
    text-transform: uppercase;
    background-color: var(--table-color);
    border: none;
    box-shadow: inset 0 0 5px rgba(255,255,255,.7);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    color: var(--text-color);
    padding: 10px;
}
.save-buttons-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
#ConfirmSaveButton{
    padding: 5px 10px;
    background-color: var(--buttons-color);
    color: var(--text-color);
    font-weight: 500;
    border-radius: 5px;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 5px rgba(0,0,0,.5),
    inset -2px 2px 2px rgba(255,255,255,.4);
}
#CancelSaveButton{
    padding: 5px 10px;
    background-color: var(--buttons-color);
    color: var(--text-color);
    font-weight: 500;
    border-radius: 5px;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 5px rgba(0,0,0,.5),
    inset -2px 2px 2px rgba(255,255,255,.4);
}

.decorative-bar{
    position: absolute;
    width: 5px;
    height: 0;
    background-color: var(--text-color);
    box-shadow: 0 0 20px rgba(255,255,255,.7);
    border-radius: 5px;
    z-index: -1;
    transition: all 1s ease 500ms;
}

.decorative-bar1{
    top: 0; left: 0;
    transform-origin: top;
    transform: rotate(-45deg);
}
.decorative-bar2{
    bottom: 0; right: 0;
    transform-origin: bottom;
    transform: rotate(-45deg);
}

.decorative-bar1.extend-bar{
    height: 66vw;
}
.decorative-bar2.extend-bar{
    height: 66vw;
}

/*  HIGHSCORE PAGE */

.highscore-page{
    position: absolute;
    top: -100vh; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-color);
    box-shadow: inset 0 0 5px rgba(255,255,255,.2);
    z-index: 4;
    padding: 2rem;
    transition: all 500ms ease;
}
.highscore-page.retrieve-scores{
    top: 0;
}
.highscore-page-content{
    box-shadow: 0 0 20px 5px rgba(0,0,0,.7),
                0 0 100px rgba(255,255,255,.3),
                inset 0 0 5px rgba(255,255,255,.2);
}
.highscore-page-content h2{
    text-align: center;
    color: var(--text-color);
    padding: 1rem;
}
#DataTable{
    color: var(--text-color);
    width: 100%;
    text-align: center;
    border-spacing: 10px;
}
#DataTable td{
    /* border: 1px solid var(--text-color); */
    box-shadow: -2px 2px 2px rgba(255,255,255,.3),
    inset -2px 2px 2px rgba(255,255,255,.3),
    2px -2px 5px rgba(0,0,0,.9),
    inset 2px -2px 2px rgba(0,0,0,.9);
    padding: 5px;

}
#CloseHighScoresButton{
    position: absolute;
    top: 25px; left: 25px;
    padding: 5px 10px;
    font-size: calc((100vw + 100vh)/100);
    font-weight: 900;
    color: var(--text-color);
    background-color: var(--buttons-color);
    border-radius: 10px;
    border: none;
    transform: scale(1);
    box-shadow: -2px 2px 5px rgba(0,0,0,.5),
    inset -2px 2px 5px rgba(255,255,255,.4);
}
/*  ANIMATIONS  */

/*  Starting Intro Animations   */

@keyframes fadeIn {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes startingAnimation {
    0%{
        opacity: .5;
        transform: rotate(0) translateX(0);
    }
    100%{
        opacity: 1;
        transform: rotate(360deg) translateY(-150px) translateX(-100px);
        width: 100vw;
        height: 100vw;
    }
}
@keyframes glideRight{
    from{
        transform: translateX(-66vw);
    }
    to{
        transform: translateX(70vw);
    }
}

/*  Border Animations   */
@keyframes pulseRed {
    from{
        background-color: rgba(255, 17, 17, .3);
    }
    to{
        background-color: transparent;
    }
}
@keyframes pulseGreen {
    from{
        background-color: rgba(17, 255, 17, .3);
    }
    to{
        background-color: transparent;
    }
}


/*  Button Pressed Animations   */
@keyframes buttonPressed {
    0%{
        transform: scale(1);
        box-shadow: -2px 2px 5px rgba(0,0,0,.5),
        inset -2px 2px 5px rgba(255,255,255,.4);
    }
    50%{
        transform: scale(.9);
        box-shadow: 0 0 5px rgba(0,0,0,.7),
        inset -4px 4px 8px rgba(255,255,255,.4),
        inset 4px -4px 8px rgba(255,255,255,.2);
    }
    100%{
        transform: scale(1);
        box-shadow: -2px 2px 5px rgba(0,0,0,.5),
        inset -2px 2px 5px rgba(255,255,255,.4);
    }
}