/* FONT */
#ctime, #tpick {
   font-family: Impact, sans-serif;
}

.header {
   text-align: center;
   font-weight: normal;
   margin: 5px 0 10px 0;
}

/* CURRENT TIME */
#ctime {
   margin: 0 auto;
   max-width: 350px;
   padding: 10px;
   background: black;
   text-align: center;
}

#ctime .header {
   color: #c61d1d;
}

#ctime .square {
   display: inline-block;
   padding: 10px;
   margin: 5px;
}

#ctime .digits {
   font-size: 24px;
   background: white;
   color: black;
   padding: 20px 10px;
   border-radius: 5px;
}

#ctime .text {
   margin-top: 10px;
   color: #ddd
}

/* TIME PICKER */
#tpick {
   margin: 0 auto;
   max-width: 250px;
   padding: 10px;
   background: #f2f2f2;
   white-space: nowrap;
}

#tpick-h, #tpick-m, #tpick-s {
   display: inline-block;
   width: 32%;
}

#tpick select {
   box-sizing: padding-box;
   width: 100%;
   font-size: 1.2em;
   font-weight: bold;
   margin: 20px 0;
}

#tset, #treset {
   box-sizing: padding-box;
   width: 50%;
   background: #3368b2;
   color: white;
   padding: 10px;
   border: 0;
   cursor: pointer;
}

#tset:disabled, #treset:disabled {
   background: #aaaaaa;
   color: #888888
}





center {
   text-align: center;
}
 
* {box-sizing: border-box}
 
 body, html {
   height: 100%;
   margin: 0;
   font-family: Arial;
 }
 
 .tablink {
   background-color: #555;
   color: white;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   font-size: 17px;
   width: 25%;
   text-align: center;
   text-decoration: none;
 }
 
 .tc:hover {
   background-color: red;
 }
 
 .ta:hover {
   background-color: blue;
 }
 
 .tt:hover {
   background-color: green;
 }
 
 .ts:hover {
   background-color: orange;
 }

 .tabcontent {
   color: white;
   display: none;
   padding: 100px 20px;
   padding-bottom: 0px;
 }
 
 h1 {
   color: black;
 }
 #alarm {
   padding-top: 50px;
 }