*{
    margin: 0%;
    padding: 0%; 
 
    box-sizing: border-box;
    font-size: 62.5%;

}
body{
    font-family: 'Krub', sans-serif;
    font-size: 2rem;
    color: white;
}
.main{

min-height: 100vh;
width: 100%;
background: linear-gradient(rgba(5, 7, 12, 0.2), rgba(5, 7, 12, 0.2)), url('../img/portadapagfac.jpg');
background-repeat: no-repeat;
background-size: cover;
position: relative;

}
.nombrepagina a span{
    font-size: 2rem;  
}


a{
    color: white;
    text-decoration: none ;
    font-size: 2rem;  
}
.cabecera{
    width: 100%;
    background-color: #00416d;
    box-shadow: -1px 2px 5px 7px rgba(10, 35, 82, 0.15);
}
header{
   /*border: solid red;*/
   max-width: 120rem;
   margin: auto;
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
   /* background-color: rgba(41, 4, 163, 0.3);*/
}


nav a{
     margin: 1.5rem;
     padding: .5rem;
     font-size: 1.6rem;
    
}
nav a:hover{
    border-radius: .5rem;
   
    border-bottom: solid 3px rgb(248, 243, 43);
    color:  rgb(248, 243, 43) ;
    
}


.clockdate-wrapper {
  

   width:auto;
   
    text-align:center;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
   
 
}
#clock{
    
    font-family: 'Share Tech Mono', monospace;
    font-size:8rem;
    text-shadow:0px 0px 1px rgb(255, 255, 255);
    color:#00416d;
    text-shadow: 0 0 20px rgba(5, 17, 78, 0.595),  0 0 20px rgba(10, 175, 230, 0);
}
/*
#0079ca*/
#clock span {
    color:#00416d;
    text-shadow: 0 0 20px rgba(3, 35, 161, 0.781),  0 0 20px rgba(10, 175, 230, 0);
    font-size:6rem;
    position:relative;
    top:-27px;
    left:-10px;
}
#date {
    letter-spacing:.5rem;
    font-size:2rem;
    font-family: 'Share Tech Mono', monospace;
    color:#c91910;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
}


footer {
    position: absolute;
    bottom: 0;
    color: beige;
    font-size: 2.5rem;

    display: flex;
    width: 100%;
    justify-content: center;

}

footer p {
    background-color: rgba(41, 4, 163, 0.3);
    padding: 10px 50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    text-align: justify;
}




@media (max-width: 700px) {
    
    .main{

        min-height: 100vh;
        width: 100%;
        background: linear-gradient(rgba(5, 7, 12, 0.4), rgba(5, 7, 12, 0.5)), url('../img/portadapagfac.jpg');
        background-repeat: no-repeat;
        background-size:cover;
        background-position:top;
        position: relative;
        
        }
        .nombrepagina a span{
            display: none;  
        }
        .nombrepagina {
            margin-left: 1rem;
        }
       
        .clockdate-wrapper {
  
            width:auto;
             text-align:center;
             top:50%;
             left: 10%;
             transform: none;
            
          
         }

        #clock{
    
            font-family: 'Share Tech Mono', monospace;
            font-size:4.5rem;
            text-shadow:0px 0px 1px rgb(255, 255, 255);
            color:#0097fc;
            text-shadow: 0 0 20px rgba(5, 17, 78, 0.595),  0 0 20px rgba(10, 175, 230, 0);
        }
        /*
        #0079ca*/
        #clock span {
            color:#0097fc;
            text-shadow: 0 0 20px rgba(3, 35, 161, 0.781),  0 0 20px rgba(10, 175, 230, 0);
            font-size:3rem;
            position:relative;
            top:-27px;
            left:-10px;
        }
        #date {
            letter-spacing:.5rem;
            font-size:2rem;
            font-family: 'Share Tech Mono', monospace;
            color:#fa0e02;
            text-shadow: 0 0 20px rgb(143, 155, 159),  0 0 20px rgba(10, 175, 230, 0);
        }


  }
  .nombrepagina  .rueda{
    font-size: 2.5rem;
    margin-left: 1rem;
 
  }

 .rueda i{
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
  }
  @-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }