sudoku.css

body {
    margin: 5px;
    padding: 5px;
    background: #83a0b3;
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 100vh;
}
header {
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-animation: rainbow 120s ease infinite;
    background-size: 300% 300%;
    background-image: url(clouds.jpg);
}
}

.numberGrid {
    /*width: 100%;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}

@keyframes rainbow {
    0% {
        background-position: 20% 20%;
    }

    25% {
        background-position: 50% 50%;
    }

    50% {
        background-position: 20% 70%;
    }

    75% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 20% 20%;
    }
    
}

.row {
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.row:nth-child(3n){
    border-bottom: 3px solid blue;
}
.cell:nth-child(3n) {
    border-right: 3px solid blue;
}

.cell {
    width: 1.5em;
    height: 1.5em;
    font-size: 2em;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}

input {
    
    text-align: center;
}

.button-holder {
    width: 100%;
    height: 3em;
    background: linear-gradient(45deg, blue, silver blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

input:invalid {
    background-color: rebeccapurple;
    color: white;
    border: 1px solid red;
}


/* MOBILE */
@media all and (max-width: 799px) and (min-width: 220px) {
    #GameGrid {
        width: 700px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-left: 5%;
    }
    body {
        background-image: url(clouds.jpg);
    }
    .cell {
        width: 1em;
        height: 1em;
    }
}