styles.css

body {
    overflow: hidden;
}

.login-form {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
}

.login-form .container {
    box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.75);
    width: 400px;
    height: 200px;
    border-radius: 10px;
    padding: 50px;
}

.snake table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.snake td {
    width: 15px;
    height: 15px;
    border: 1px solid white;
}

.snake .none {
    background-color: #dee2e6;
}

.snake .snake {
    background-color: #343a40;
}

.snake .dot {
    background-color: #007bff;
}

.snake .pauseButton {
    margin-top: 10px;
    width: 100%;
    height: 50px;
}

.info {
    padding-top: 50px;
}

.lives {
    height: 100px;
    display: flex;
    width: 300px;
}

.heart table {
    margin: 30px auto;
}

.heart td {
    height: 10px;
    width: 10px;
    border: 1px solid white;
}

.heart table tr:nth-child(2) td:nth-child(4),
.heart table tr:nth-child(2) td:nth-child(6) {
    background-color: red;
}

.heart table tr:nth-child(3) td:nth-child(n+3):nth-last-child(n+3) {
    background-color: red;
}

.heart table tr:nth-child(4) td:nth-child(n+3):nth-last-child(n+3) {
    background-color: red;
}

.heart table tr:nth-child(5) td:nth-child(n+4):nth-last-child(n+4) {
    background-color: red;
}

.heart table tr:nth-child(6) td:nth-child(n+5):nth-last-child(n+5) {
    background-color: red;
}