body{
    margin: auto;
    font-family: 'Josefin Sans', sans-serif, bold;
    overflow: auto;
    background-color: rgb(19, 186, 223);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

/*Mode buttons*/

#nav_clock{
   font-size: 30px;
   padding: .15em 1.125em;
   transition: 0.3s;
   border: black;
   background-color: lightblue;
   color: rgb(2, 0, 127);
   
  }
  #nav_clock:hover{
    background-color:  rgb(0, 34, 255);
    cursor: pointer;
    color: lightblue;
    box-shadow: 10px 10px 15px rgba(255, 0, 102, 0.5);
  }
  #nav_clock:active{
    transition: none;
    box-shadow: 1px -1px 1px rgba(255, 255, 255, 0.5);;
    }
    #font{
      font-size: 30px;
    }



  #nav_stopwatch{
    font-size: 30px;
    padding: .15em 1.125em;
    transition: 0.3s;
    border: black;
    background-color: lightblue;
    color: rgb(2, 0, 127);
   }
   #nav_stopwatch:hover{
     background-color:  rgb(0, 34, 255);
     cursor: pointer;
     color: lightblue;
     box-shadow: 10px 10px 15px rgba(255, 0, 102, 0.5);
   }
   #nav_stopwatch:active{
     transition: none;
     box-shadow: 1px -1px 1px rgba(255, 255, 255, 0.5);
   }


   
   #nav_timer{
    font-size: 30px;
    padding: .15em 1.125em;
    transition: 0.3s;
    border: black;
    background-color: lightblue;
    color: rgb(2, 0, 127);
   }
   #nav_timer:hover{
     background-color:  rgb(0, 34, 255);
     cursor: pointer;
     color: lightblue;
     box-shadow: 10px 10px 15px rgba(255, 0, 102, 0.5);
   }
   #nav_timer:active{
     transition: none;
     box-shadow: 1px -1px 1px rgba(255, 255, 255, 0.5);;
   }

   /*Other buttons*/

   #Start{
    font-size: 20px;
    padding: .15em 1.125em;
    width: 100px;
    height: 50px;
    box-shadow: white;
    border: black;
    transition: 0.5s;
   }
   #Start:hover{
    cursor: pointer;
    color: rgb(0, 119, 255);
    transform: scale(1.2);
   }
   #Start:active{
    transition: none;
    box-shadow: 1px 10px 10px rgba(255, 254, 254, 0.5);
    background-color: #00ff77;
   }



   #Stop{
    font-size: 20px;
    padding: .15em 1.125em;
    width: 100px;
    height: 50px;
    box-shadow: white;
    border: black;
    transition: 0.5s;
   }
   #Stop:hover{
    cursor: pointer;
    color: rgb(0, 119, 255);
    transform: scale(1.2);
   }
   #Stop:active{
    transition: none;
    box-shadow: 1px 10px 10px rgba(255, 254, 254, 0.5);
    background-color: #ff3300;
   }



   #Pause{
    font-size: 20px;
    padding: .15em 1.125em;
    width: 100px;
    height: 50px;
    box-shadow: white;
    border: black;
    transition: 0.5s;
    
   }
   #Pause:hover{
    cursor: pointer;
    color: rgb(0, 119, 255);
    transform: scale(1.2);
   }
   #Pause:active{
    transition: none;
    box-shadow: 1px 10px 10px rgba(255, 254, 254, 0.5);
    background-color: #00ff77;
   }




   #Reset{
    font-size: 20px;
    padding: .15em 1.125em;
    width: 100px;
    height: 50px;
    box-shadow: white;
    border: black;
    transition: 0.5s;
   }
   #Reset:hover{
    cursor: pointer;
    color: rgb(0, 119, 255);
    transform: scale(1.2);
   }




   #Reset:active{
    transition: none;
    box-shadow: 1px 10px 10px rgba(255, 254, 254, 0.5);
    background-color: #ff0000;
   }

   /*Color*/
   
   #Color1{
    width: 100px;
    height: 100px;
    background: #0099ff;
  }
  #Color2{
    width: 100px;
    height: 100px;
    background: #00ff77;
  }
  #Color3{
    width: 100px;
    height: 100px;
    background: #00c8ff;
  }

  /*input*/

  
  #watch_m{
    border: solid 0.18em rgb(0, 195, 255);
    width: 120px;
    height: 25px;
    font-family: 'Josefin Sans', sans-serif, bold;
    box-shadow: white;
    color: rgb(0, 0, 0);
    box-shadow: 1px 10px 10px rgba(0, 40, 241, 0.5);
  }
  #watch_s{
    border: solid 0.18em rgb(0, 195, 255);
    width: 120px;
    height: 25px;
    font-family: 'Josefin Sans', sans-serif, bold;
    box-shadow: white;
    color: rgb(0, 0, 0);
    box-shadow: 1px 10px 10px rgba(0, 40, 241, 0.5);;
  }