@font-face {
  font-family:'DS-Digital7';
  src: url(../fonts/digital-7.ttf);
  
} 

body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: hidden;

}


.grid-container {
  /*Grid contenedor*/
  background-color: rgb(13, 51, 132);
  height: 100vh; 
  width: 100%;
  display: grid;
  grid-template-columns: 15% 60% 4% 21%;
  grid-template-rows:  22% 6% 6% 6% 60%;
  justify-items: stretch;
  align-items:stretch;
}


.c01 {
  /*Logo Izquierdo*/
  grid-column: 1/2;
  grid-row:1/2;
  width: 100%;
  background-color:transparent;
  text-align: center;
}

.c01 img {
  height: 100%;
}

.c02 {
  /*Texto central*/
  color: rgb(246, 237, 10);

font-size: 8vb;

  text-align: center;
 
  grid-column: 2/4;
  grid-row:1/2;
  background-color:transparent;
  align-self: center;

   
   


}

.c022 {
  /*Longitud Carrera*/
  color: rgb(6, 173, 250);
  text-align: center;
  font-size: 18vh;
  font-weight: bold;
  grid-column: 4/5;
  grid-row: 1/2;
  background-color:transparent;
  align-self: center;
  margin-right: 5px;
}


 .c03  {
  /*Hora minutos*/
  background-color:transparent;
  color: rgb(246,237,10);
  font-family:'DS-Digital7';
  font-size: 83vh;
  grid-column: 1/4;
  grid-row:2/6;
  text-align:center;



}

.c04  {
  /*Segundos*/
  background-color:transparent;
  color: rgb(246,237,10);
  font-family:'DS-Digital7';
  font-size: 25vh;
  grid-column: 4/5;
  grid-row:5/6;
  text-align:left;
padding-top: 10vh;
}



button {
  color: rgb(246,237,10);
  background-color:transparent;
  font-size: 20px;
  border-radius: 10px;
text-align: center;
  align-self: center;
  }

.c05 {
 /*Boton pantalla completa*/
 background-color:transparent;
 grid-column: 4/5;
 grid-row: 2/3;
margin: 0px 18px 0px 0px;
text-align: center;
}

.c06 {

   /*Botoon reiniciar cronometro*/  
  background-color:transparent;
  grid-column: 4/5;
  grid-row: 3/4;
margin: 0px 18px 0px 0px;
text-align: center;
}

.c07 {
  /*Botoon Alternar 5k 10k*/
  background-color:transparent;
  grid-column: 4/5;
  grid-row: 4/5;
  margin: 0px 18px 0px 0px;
  text-align: center;
  
}




        @media (max-width:1600px) {
    
    
          button {
            color: rgb(246, 237, 10);
            background-color: transparent;
            font-size: 5px;
            border-radius: 5px;
            text-align: center;
            align-self: center;
          }
    
          .grid-container {
            /*Grid contenedor*/
            background-color: rgb(13, 51, 132);
            height: 100vh;
            width: 100%;
            display: grid;
            grid-template-columns: 15% 60% 5% 20%;
            grid-template-rows: 22% 10% 10% 10% 48%;
            justify-items: stretch;
            align-items: stretch;
          }
    
          .c04  {
            /*Segundos*/
            background-color:transparent;
            color: rgb(246,237,10);
            font-family:'DS-Digital7';
            font-size: 20vh;
            grid-column: 4/5;
            grid-row:5/6;
            text-align:left;
            padding-top: 1vh;
            
          }
    
          button {
            color: rgb(246,237,10);
            background-color:transparent;
            font-size: 12px;
            border-radius: 10px;
          text-align: center;
            align-self: center;
            }


            .c03  {
              /*Hora minutos*/
              background-color:transparent;
              color: rgb(246,237,10);
              font-family:'DS-Digital7';
              font-size: 65vh;
              grid-column: 1/4;
              grid-row:2/6;
              text-align:center;





            }
        }