*{
    margin:0;
}
#yellow {
    background: linear-gradient(blue, rgb(23, 23, 45));
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    text-align: center;
    font-size: 13px;
}
body {
    background-color: rgba(0, 0, 0, 0.863);
}
#rgb {
    font-size: 60px;
    padding-top: 10px;
    padding-bottom: 20px;
}
#head {
    padding-top: 20px;
}
#colorgame {
    padding-bottom: 20px;
}

#white {
    text-align: center;
    font-size: larger;
    background-color: white;
}
#newcolor, #easy, #hard {
    border: none;
    background-color: white;
    color:rgba(238, 25, 25, 0.651);
    font-weight: 700;
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: 15px;
    outline-style: none;
}
#tryagain {
    border: none;
    background-color: white;
    padding-bottom: 15px;
    padding-top: 15px;
    width:300px;
    font-weight: 500;
    font-size: 15px;
    font-style: italic;
}
#newcolor:hover, #easy:hover, #hard:hover {
    background-color: rgb(143, 19, 19);
    padding-top:8px;
    padding-bottom:8px;
    border-radius: 7px;
    color: aliceblue;
}
#boxes{
    text-align: center;
}
#c1 , #c2, #c3, #c4, #c5, #c6{
    border-style: solid;
    border-color: black;
    border-width: 2px;
    padding: 50px;
    margin-right:15px;
    margin-top: 30px;
    border-radius: 15px;
    height:120px;
    width:120px;
    transition: all 0.3s;
    outline-style: none;
}
#c1{
    background-color: rgb(16, 196, 16);
}
#c2 {
    background-color: rgba(11, 15, 226, 0.76);
}
#c3 {
    background-color: rgb(191, 128, 207);
}
#c4 {
    background-color: rgb(63, 16, 235);
}
#c5 {
    background-color: rgb(241, 160, 37);
}
#c6 {
    background-color: rgb(245, 77, 189);
}
#c1:hover, #c2:hover, #c3:hover, #c4:hover, #c5:hover, #c6:hover {
    filter: brightness(0.8);
    border-style: solid;
    padding: 50px;
    margin-top: 30px;
    border-radius: 15px;
}
@media screen and (max-width: 800px) {
    .left,
    .main,
    .right {
      width: 100%;
    }
    #yellow {
      font-size: 1.2rem;
    }
    #rgb {
      font-size: 3rem;
    }
    #newcolor {
      margin-top: 6px;
      padding-top: 2px;
      padding-bottom: 2px;
    }
    #easy {
      margin-right: 80px;
      padding-top: 2px;
      padding-bottom: 2px;
    }
    #hard,
    #hard:hover {
      padding-top: 2px;
      padding-bottom: 2px;
      margin-bottom: 6px;
    }
    #newcolor:hover {
      margin-top: 6px;
      padding-top: 2px;
      padding-bottom: 2px;
    }
    #easy:hover {
      margin-right: 80px;
      padding-top: 2px;
      padding-bottom: 2px;
    }
    #tryagain {
      padding-top: 8px;
      padding-bottom: 8px;
      font-style: awesome;
    }
    #c1,
    #c2,
    #c3,
    #c4,
    #c5,
    #c6 {
      height: 10px;
      width: 10px;
      display: flex;
      flex-direction: row-reverse;
      flex: 33%;
      padding: 40px;
      margin-left: 15px;
      margin-top: 50px;
    }
    #c1:hover,
    #c2:hover,
    #c3:hover,
    #c4:hover,
    #c5:hover,
    #c6:hover {
      height: 10px;
      width: 10px;
      display: flex;
      flex-direction: row-reverse;
      flex: 33%;
      padding: 40px;
      margin-left: 15px;
      margin-top: 50px;
      filter: brightness(0.8);
    }
    #boxes br {
      display: none;
    }
    #white br{
      display: block;
    }
    #boxes {
      display: flex;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 5px;
    }
  }