@media only screen and (min-width : 688px) {   
#qlocktwo{
  position:relative;
  display:block;
  color:#000;
  font-size:30px;
  background: rgb(0,0,139);
  background: rgb(0,0,139) linear-gradient(140deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.0) 100%);
  width:550px;
  padding:70px;
  margin:0 auto;
  transition:background-color 0.5s linear;
}

#letters, #letters span{
   display:inline-block;
   line-height:41px;
   text-align:center;
   transition:all 0.5s linear;
}
}
@media only screen and (max-width : 688px) {   
#qlocktwo{
  position:relative;
  display:block;
  color:#000;
  font-size:14px;
  background: rgb(0,0,139);
  background: rgb(0,0,139) linear-gradient(140deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.0) 100%);
  width:300px;
  padding:10px;
  margin:0 auto;
  transition:background-color 0.5s linear;
}

#letters, #letters span{
   display:inline-block;
   line-height:21px;
   text-align:center;
   transition:all 0.5s linear;
}
}
#letters span{
    width:35px;
}


.light{
  color:#fff !important;
  text-shadow: 0px 0px 5px #fff;
}

#settings, #settings a{
  color:#555;
  font-size:13px;
  width:240px;
  margin:10px auto;
}

#settings a:hover{
  text-shadow: 0 0 1px #fff;
}

#settings p{
  margin:0;
  width:100%;
  text-align:center;
}

.button{
  position:relative;
  display:inline-block;
  margin:0 4px;
  background: linear-gradient(-75deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.0) 100%);
  height:20px;
  opacity:0.3;
  -webkit-transition:opacity 0.5s linear;
     -moz-transition:opacity 0.5s linear;
      -ms-transition:opacity 0.5s linear;
       -o-transition:opacity 0.5s linear;
          transition:opacity 0.5s linear;
  width:20px;
}

#settings:hover .button{
    opacity:1;
}
.button:hover{
    box-shadow:0 0 3px 0 white inset;
}


.selected:before{
    content:'✔';
    position:absolute;
    color:rgba(255,255,255,0.4);
    left:5px;
    top:3px;
}
/* Background colors for the color Setting*/
#darkblue{
    background-color:rgb(0,0,139);
}
#darkred{
    background-color:rgb(139,0,0);
}
#green{
    background-color:rgb(100,120,0);
}
#purple{
    background-color:rgb(70,40,120);
}
#orange{
    background-color:rgb(150,80,0);
}
 
/* dots in the edge for showing the minutes */
#e0,#e1,#e2,#e3{ 
    position:absolute;
    color:black;    
    font-size:15px;
}

#e0, #e1{
  top:15px;
}
#e2, #e1{
  right:25px;
}
#e0, #e3{
  left:25px;
}
#e2, #e3{
  bottom:20px;
}

 
#settings a{
  color:#555;
  text-decoration:none;
}

#settings a:hover{
  text-shadow:0 0 2px #555;
}