body {
    background-color: #0c081e;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#dvd-logo {
    --width: 732px;
    --height: 328px;
    position: absolute;
    width: var(--width);
    height: var(--height);
    transform: translate(-50%, -50%);
}

#logo-img {
    --hue-rotato: 305deg;
    width: 100%;
    height: 100%;
    filter: invert(0.6) sepia(80%) saturate(600%) hue-rotate(var(--hue-rotato)) brightness(0.76) contrast(105%);
}

.paddle {
    position: absolute;
    width: 20px;
    height: 200px;
    background-color: #25ef62;
    top: 50%;
    transform: translateY(-50%);
}

#p1-paddle {
    left: 10px;
}

#p2-paddle {
    right: 10px;
}

.hidden {
    display: none;
}

#pongUI {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.score {
    color: #25ef62;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
}

#p1-score {
    position: absolute;
    left: 40px;
    top: 10px;
}

#p2-score {
    position: absolute;
    right: 40px;
    top: 10px;
}

.center-line {
    position: absolute;
    height: 100%;
    border-right: dashed 10px #25ef62;
    left: 50%;
    transform: translateX(-5px);
}

/* Breakout Mode vvv */

#breakout-paddle {
    --width: 150px;
    position: absolute;
    width: var(--width);
    height: 20px;
    background-color: #25ef62;
    bottom: 10px;
    transform: translateX(-50%);
}

.brickContainer {
    --rows: 7;
    position: absolute;
    width: 100%;
    height: calc(60px * var(--rows));
    left: 0;
    top: 0;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
    grid-gap: 5px;
}

.brick {
    width: 100px;
    height: 50px;
    background-color: #25ef62;
}

.brick-slot {
    width: 100px;
    height: 50px;
    /* border: #25ef62 dashed 2px;aaa */
}