
*{
    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) ;
    
}


.salida{
 
        width: 60rem;
        height: 35rem;
  
}

.salida canvas{
    width: 60rem;
    height: 35rem;
}

.video div{
    background-color: #3298dc;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}
.salida div{
    background-color: #3298dc;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

h1{
    font-size: 2.5rem;
    padding: 1rem;  
    text-align: center;
}
.container {
    /*border: solid;*/
    max-width: 1300px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
   

}
.container video{
/*border: solid;*/
max-width: 600px;
max-height: 350px;

}

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;
        }
       

.video video{
    width: 100%;
}

        .video div{
            background-color: #3298dc;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        
        }
        .salida div{
            background-color: #3298dc;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        
        h1{
            font-size: 1.5rem;
            padding: 1rem;  
            text-align: center;
        }
        .container {
            /*border: solid;*/
            max-width: 30rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-top: 100px;
           
        
        }

        .salida{
 margin-top: 3rem;
            width: 100%;
            height: 35rem;
      
    }
        
        .salida canvas{
            width: 30rem;
            height: 15rem;
        }
        



  }
  .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); } }












