*{
    margin:0;
    padding:0;
}
body {
    background-image: radial-gradient(#1f2b94,#151B54);
    color: white;
    margin-top: 8px;  
}
#title h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 3vw;
    text-align: center;
}
#container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 450px;
    width: 150px;
    margin-left: 31.5vw;
    padding: 1vw;
}
#container div {
    border:solid black 1px;
    background-color: white;
    width:2vw;
    height:2vw;
    text-align: center;
    font-size: 2em;
}
.color_container {
    display:grid;
    grid-template-columns: 1fr;
}
.color_container * {
    margin:1vw auto;
}

@media only screen and (max-width: 600px) {
    body {
      background-color: lightblue;
    }
    #container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 285px;
    width: 135px;
    margin-left: 12.5vw;
    padding: 1vw;
}
#container div {
    border:solid black 1px;
    width:4vw;
    height:4vw;
    text-align: center;
    font-size: 2em;
}
#title h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 5vw;
    text-align: center;
}

.color_container{
    margin-top: 130px;
}
  }


@media only screen and (max-width: 393px) {
    body {
      background-color: lightblue;
    }
    #container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-left: 5vw;
    padding: 1vw;
}
#container div {
    border:solid black 1px;
    width:5vw;
    height:5vw;
    text-align: center;
    font-size: 2em;
}
#title h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 10vw;
    text-align: center;
}

.color_container{
    margin-top: 80px;
}
  }