body{
  text-align: center !important;;
  background-color: #011F3F !important; ;
  width: 100%;

}

#level-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 2rem;
  margin: 3% 0 3%;
  color: #FEF2BF;
}


#footer{
  color: white;
  font-weight: 800;
  font-size: 1rem;
  margin-top: 2%;
}


.pcontainer {
  display: block;
  width: 100%;
  margin: 2% 0;
  position: absolute;


}

.pbtn {
  margin: 25px;
  display: inline-block;
  height: 150px;
  width: 150px;
  border: 10px solid black;
  border-radius: 20%;
}

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

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

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


/* .sbtn{
  position: relative;
  margin: 10px;
} */

#startgame{
  position: relative;
  right:1%;
}

#Reset{
  position: relative;
  text-decoration: none;
  left: 1%;
} 


@media (min-width:401px)and(max-width:500px){

.pbtn{
  width: 150px;
  height:150px;
}
.pcontainer {
  display: block;
  width: 100%;
  margin: 10% 0;
  position: absolute;
}

#footer{
  margin-top: 10%;
}

} 


@media (min-width:366px) and (max-width:400px){

  .pbtn{
    width: 130px;
    height:130px
  }
  .pcontainer {
    display: block;
    width: 100%;
    margin: 10% 0;
    position: absolute;
  }
  #footer{
    margin-top: 6%;
  }
  #startgame, #Reset{
margin-top: 4%;
  }

 
  }

  @media (min-width:320px) and (max-width:365px){

    .pbtn{
      width: 105px;
      height:105px
    }
    .pcontainer {
      display: block;
      width: 100%;
      margin: 10% 0;
      position: absolute;
    }
    #footer{
      margin-top: 30%;
    }
    #startgame, #Reset{
  margin-top: 10%;
    }
    #level-title {
      font-family: 'Press Start 2P', cursive;
      font-size: 1rem;
      margin: 3% 0 3%;
      color: #FEF2BF;
    }
  
   
    }