.square{
    display: inline-block;
    border: 3px solid rgb(63, 6, 30);
    margin: 2px;
    margin-top: 6.5%;
    margin-bottom: 10%;
    font-size: 20px;
    font-weight: bold;
    color:  rgb(63, 6, 30);
    text-align: center;
    box-sizing: border-box;
}

.square:hover{
    color: rgb(212, 208, 207);
    border: 3px solid rgb(212, 208, 207);
    background-color: rgb(63, 6, 30);
    transition: border 1s;
}

@media all and (max-width: 400px){
    .square{
        width: 220px;
        height: 220px;
        line-height: 220px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media all and (min-width: 400px){
    .square{
        width: 300px;
        height: 300px;
        line-height: 300px;
    }
    
}