#level-title {
   font-family: 'Press Start 2P', cursive;
   color: #FEF2BF;
   font-size: 2rem;
   line-height: 2rem;
   margin: 40px auto;
}
#restart-title {
   font-family: 'Press Start 2P', cursive;
   color: #FEF2BF;
   font-size: 1.85rem;
   line-height: 1.85rem;
   margin: 50px auto;
}

.btn {
   display: inline-block;
   border-radius: 25%;
   margin: 20px;
   width: 180px;
   height: 180px;
   border: 8px solid #292929;
   box-shadow: 5px 5px 15px #000;
}

.cont {
   display: block;
   width: 50%;
   margin: auto;
}

.contain {
   margin: 10px auto;
   width: 90%;
   text-align: center;
   background-color: #011F3F;
   border: 3px solid black;
   border-radius: 20px;
   box-shadow: 6px 6px 15px #484848;
}

.game-over {
   background-color: red;
   opacity: 0.8;
}

.instruct {
   width: 85%;
   margin: 15px auto;
   padding: 15px;
   background-color: #dadada;
   border-radius: 22px;
   border: 1px solid black;
}

.pressed {
   opacity: 0.7;
   box-shadow: 0 0 20px white;
   background-color: grey;
   box-shadow: none;
}

/* button colors */
.red {
   background-color: red;
}

.green {
   background-color: green;
}

.blue {
   background-color: blue;
}

.yellow {
   background-color: yellow;
}


/* ==========     Media Queries     ========== */
@media (max-width: 480px) {
   #level-title {
      font-size: 0.9rem;
      line-height: 0.9rem;
      margin: 25px auto;
   }
   #restart-title {
      font-size: 0.80rem;
      line-height: 0.80rem;
      margin: 25px auto;
   }
   .btn {
      margin: 5px;
      width: 80px;
      height: 80px;
      border: 5px solid #292929;
      box-shadow: 2px 2px 8px #000;
   }
}

@media (min-width: 480px) and (max-width: 768px) {
   #level-title {
      font-size: 1rem;
      line-height: 1rem;
      margin: 25px auto;
   }
   #restart-title {
      font-size: 0.9rem;
      line-height: 0.9rem;
      margin: 25px auto;
   }
   .btn {
      margin: 5px;
      width: 85px;
      height: 85px;
      border: 5px solid #292929;
      box-shadow: 3px 3px 10px #000;
   }
}

@media (min-width: 768px) and (max-width: 900px) {
   #level-title {
      font-size: 1.2rem;
      line-height: 1.2rem;
      margin: 30px auto;
   }
   #restart-title {
      font-size: 1.1rem;
      line-height: 1.1rem;
      margin: 30px auto;
   }
   .btn {
      margin: 10px;
      width: 100px;
      height: 100px;
      border: 6px solid #292929;
      box-shadow: 4px 4px 11px #000;
   }
}

@media (min-width: 900px) and (max-width: 1024px) {
   #level-title {
      font-size: 1.4rem;
      line-height: 1.4rem;
      margin: 30px auto;
   }
   #restart-title {
      font-size: 1.3rem;
      line-height: 1.3rem;
      margin: 35px auto;
   }
   .btn {
      margin: 10px;
      width: 120px;
      height: 120px;
      border: 6px solid #292929;
      box-shadow: 4px 4px 11px #000;
   }
}

@media (min-width: 1024px) and (max-width: 1280px) {
   #level-title {
      font-size: 1.6rem;
      line-height: 1.6rem;
      margin: 30px auto;
   }
   #restart-title {
      font-size: 1.4rem;
      line-height: 1.4rem;
      margin: 35px auto;
   }
   .btn {
      margin: 10px;
      width: 130px;
      height: 130px;
      border: 6px solid #292929;
      box-shadow: 5px 5px 12px #000;
   }
}

@media (min-width: 1280px) and (max-width: 1440px) {
   #level-title {
      font-size: 1.7rem;
      line-height: 1.7rem;
      margin: 35px auto;
   }
   #restart-title {
      font-size: 1.5rem;
      line-height: 1.5rem;
      margin: 40px auto;
   }
   .btn {
      margin: 10px;
      width: 140px;
      height: 140px;
      border: 6px solid #292929;
      box-shadow: 5px 5px 13px #000;
   }
}