body{
    display: grid;
    justify-items: center;
    background-color: lightblue;
    font-family: 'Roboto Mono', monospace;
}

.container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 400px;
    height: 400px;
    grid-gap: 5px;
    align-items: center;
    justify-items: center
}

.card{
    width: 100px;
    height: 100px;
}

.card:hover{
    /* border: 2px solid red; */
    box-shadow: inset 0px 0px 0px 2px red;
    box-sizing: border-box;
}

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

.brown{
    background-color: brown
}

.pink{
    background-color: pink;
}

.green{
    background-color: green;
}

.black{
    background-color: black;
}

.yellow{
    background-color: yellow;
}

.orange{
    background-color: orange;
}

.hide-color{
    background-color: gray;
}


@media only screen and (max-width: 450px) {
    
    .card{
        width: 80px;
        height: 80px;
    }

    .container{
        width: 335px;
        height: 335px;
    }
  }