@font-face {
	   font-family: 'CabinSketch';
       src: url('../fonts/CabinSketch-Regular.otf') format('opentype');
	   font-weight: normal;
	   font-style: normal;
       }
       @font-face {
	   font-family: 'CabinSketch';
	   src: url('../fonts/CabinSketch-Bold.otf') format('opentype');
	   font-weight: bold;
	   font-style: normal;
       }
       html, body {
	       width: 100%;
           height: 100%;
	       margin: 0px;
	       padding: 0px;
           }
       #cronometro {
           margin: 10px;
           padding: 10px;
           border: 3px solid black;
           height: 380px;
           width: 330px;
           float:left;
           border-radius: 40%;
           background: url(../img/crono.jpg);
	   }
       body {	
	       background: linear-gradient(to top, Tan 0%, White 100%) fixed;
	       text-align: center;
	       font-family: 'CabinSketch';
	       margin-top: 5%;
           }
       h1{
           font-size: 3.5em;
           }
       h2{
           font-size : 1.5em;
           }       
       #marco {
           background: linear-gradient(to top, LightSteelBlue 0%, DarkSlateGray 100%) fixed;
           padding: 10px;
           margin: 10px;
           width : 330px;
           border: 3px solid black;
           float: left;
           }
       .boton{
           /*Safari*/    
           -webkit-flex-grow: 0;
           -webkit-flex-shrink: 0;
           -webkit-flex-basis: 220px;
           /*Otros navegadores*/
           flex-grow: 0;
           flex-shrink: 0;
           flex-basis: 220px;

           /*Para que se comporten como un botón. Es decir:*/
           /*Que el cursor no cambie al pasar por encima.*/
           /*Que su texto no sea seleccionable.			*/
   	       cursor: default;
   	       user-select: none;
   	       -webkit-user-select: none;
   	       -moz-user-select: -moz-none;

           color:#ffffff;
	       text-align:center;
	       font-size:14px;
	       font-weight:bold;
	       padding:5px;
	       margin: 3px;
	
	       text-shadow: /* Añade un borde negro al texto */
                -1px -1px 0 black, 
                1px -1px 0 black, 
                -1px 1px 0 black, 
                1px 1px 0 black;
	
	       /*Bordes del botón*/
           border: 1px solid rgba(0,0,0,0.5);
	       border-bottom: 3px solid rgba(0,0,0,0.5);	
	       border-radius: 50%;
	       background: rgba(0,0,0,0.25);
	       box-shadow: 
                0 2px 8px rgba(0,0,0,0.5), /* Sombra exterior */
                inset 0 1px rgba(255,255,255,0.3), /* Brillo del borde superior */
                inset 0 10px rgba(255,255,255,0.2), /* Brillo frontal superior */
                inset 0 10px 20px rgba(255,255,255,0.25), /* Brillo lateral */
                inset 0 -15px 30px rgba(0,0,0,0.3); /* Fondo oscuro */

            }
       .boton:hover {
	       background-color: red;
           box-shadow: 
                0 2px 8px red, /* Sombra exterior */
                inset 0 1px rgba(255,255,255,0.3), /* Brillo del borde superior */
                inset 0 10px rgba(255,255,255,0.2), /* Brillo frontal superior */
                inset 0 10px 20px rgba(255,255,255,0.25), /* Brillo lateral */
                inset 0 -15px 30px rgba(0,0,0,0.3); /* Fondo oscuro */