style.css

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#ffffff;
    padding: 0;
    margin: 0;
    font-family: 'DotGothic16', sans-serif;
}

.row {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-basis: auto;
    flex-grow:2;
    flex-shrink: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;

}

.gridSquares {
    display: flex;
    min-height: 5px;
    min-width: 5px;
    max-height:110px;
    margin: 0;
    padding: 0;
    flex-basis: auto;
    flex-grow: 2;
    flex-shrink: 1;
    transition: 0.5s;
    flex-wrap: nowrap;
    
    
    
}

#button {
    
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
    padding-top:25px;
    
}
#title {
    
    color: #1394e4;
    text-align: center;
    font-size: 4rem;
    text-decoration: underline dashed;
    padding-top: 10px;
}
.buttons {
    background-color: white;
    color: #c70707;
    font-family: 'DotGothic16', sans-serif;
    font-size: medium;
    margin: auto 1rem auto auto;
    border: 1px dashed darkgrey;
}

.buttons:hover {
    background-color:khaki;
    box-shadow: none;

}


#container {
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
    margin: auto;
    align-content:flex-start;
    flex-basis: content;
    border: 3px solid #CDCDCD;
    min-height: 550px;
    min-width: 550px;
    max-width: 550px;
    max-height: 550px;
    background-color: #E9E9E9;
    padding: 0;
    gap: 0;
    
}