span{
  color: white;
}

body{
    text-align: center;
    background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}

.smalltext{
    padding-top: 5px;
    font-size: 16px;
}

.letter{
  font-size: 30px;
  text-transform: uppercase;
  font-weight: bold;
}

.lbc{
padding: 15px;
border-radius: 3px;
background: #00816A none repeat scroll 0% 0%;
display: inline-block;
border-color: #00BF96;
border: 10px #00BF96 solid;
margin-bottom: 15px;
margin-left: 10px;
width: 85px;
position:relative;
}

.lbc:hover{
  background: #00ECB9;
}

.btn-circle {
  width: 300px;
height: 300px;
text-align: center;
padding: 65px 0px;
font-size: 100px;
line-height: 1.42;
border-radius: 210px;

position: absolute;
left: 65%;
top: 395px;
}

#scoreboard{
      height: 175px;
    padding: 15px;
    position: absolute;
    left: 10%;
    width: 300px;
    top: 305px;
}

#score {
    font-size: 100px;
}

audio{
  display:none;
}

.pg {
    /* width: 300px; */
    position: absolute;
    display: none;
    /* margin: 0 auto; */
    /* margin-top: -25%; */
    /* height: 120px; */
    padding: 30px;
    font-size: 45px;
    top: 30%;
    left: calc(40% - 50px);
    color: #00816A;
    background-color: #fff;
    border-radius: 8px;
}

.pg span{
  color:#00816a;
}

.pg:hover{
  background-color: #00816a;
  color: #fff;
}

.pg:hover span{
  color: #fff;
}
#scoreboard{
  font-family: sans-serif;
color: #FFF;
text-align: center;
font-size: 30px !important;
font-weight: bold;
}

#scoreboard{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#scoreboard > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
}

#scoreboard div > span{
    padding: 15px;
border-radius: 3px;
background: #00816A none repeat scroll 0% 0%;
display: block;
}

@media (max-width: 767px){
   #scoreboard {
    height: 175px;
    padding: 15px;
    position: absolute;
    left: 5%;
    top: 20%;
  }

   .lbc {
        width: 75px;
   }

}


@media (max-width: 400px) {
    body{
        background-color: yellow;
    }

  #scoreboard {
    height: 175px;
    padding: 15px;
    position: absolute;
    left: 5%;
    top: 20%;
  }

   .lbc {
        width: 75px;
   }
}

@media (min-width: 401px) and (max-width: 800px){
    body { 
        background-color: blue;  
    }

    #scoreboard {
    height: 175px;
    padding: 15px;
    position: absolute;
    left: 5%;
    top: 20%;
  }

   .lbc {
        width: 75px;
   }
}

@media (min-width: 801px) and (max-width: 1100px) {

     #scoreboard {
    height: 175px;
    padding: 15px;
    position: absolute;
    left: 3%;
    top: 300PX;
    width: 50px;
  }

   .lbc {
        width: 75px;
   }
}