*
{
    box-sizing: border-box;
    margin:0;
    padding: 0;
font-family: 'Lobster', cursive;

    
}
html{
    height: 100%;
    
}
body
{
    height: 100%;
    
}


.sidebar
{
    grid-area: sidebar;
    
  
}
.main
{
    grid-area: main;
 
}
.logo
{
    grid-area: logo;
    
 
}
.logo2
{
    grid-area: logo2;
    
 
}
.footer 
{
    grid-area: footer;
 

}
.image
{
    display: flex;
    justify-content: center;
    margin-top: 5%;
    animation: movimiento 2.5s linear infinite;
}
.nubes1
{
    
    display: flex;
    height : 100%;
    width:100%;
     justify-content: right;
 
}
.nubes2
{
    
    
      
    display: flex;
    height : 100%;
    width:100%;
  justify-content: left;
     
}
.nubes3
{
    display: flex;
    height : 100%;
     

  justify-content: left;
     
}


.grid-container
{
    display: grid;
    
    
}

@media(min-width:900px)
{
    .grid-container
    {
        background: linear-gradient(to left, #FFC9CE,#FFFF);
        grid-template-columns:33% auto auto;
        grid-template-rows:50%  50% ;
        grid-template-areas:
        "sidebar main main2"
        "footer  logo logo2" 
        
      
        
        
        
        ;
    }
}
.burbuja{
    border-radius: 50%;
    background: #00AAE4;
    opacity: .3;

    position: absolute;
    bottom: -150;
    
    animation: burbujas 3s linear infinite ;
}
.burbuja:nth-child(1){
    width: 80px;
    height: 80px;
    left: 5%;
    animation-duration: 3s;
    animation-delay: 3s;
}

.burbuja:nth-child(2){
    width: 100px;
    height: 100px;
    left: 35%;
    animation-duration: 3s;
    animation-delay: 5s;
}

.burbuja:nth-child(3){
    width: 20px;
    height: 20px;
    left: 15%;
    animation-duration: 1.5s;
    animation-delay: 7s;
}

.burbuja:nth-child(4){
    width: 50px;
    height: 50px;
    left: 90%;
    animation-duration: 6s;
    animation-delay: 3s;
}

.burbuja:nth-child(5){
    width: 70px;
    height: 70px;
    left: 65%;
    animation-duration: 3s;
    animation-delay: 1s;
}

.burbuja:nth-child(6){
    width: 20px;
    height: 20px;
    left: 50%;
    animation-duration: 4s;
    animation-delay: 5s;
}

.burbuja:nth-child(7){
    width: 20px;
    height: 20px;
    left: 50%;
    animation-duration: 4s;
    animation-delay: 5s;
}

.burbuja:nth-child(8){
    width: 100;
    height: 100px;
    left: 52%;
    animation-duration: 5s;
    animation-delay: 5s;
}

.burbuja:nth-child(9){
    width: 65px;
    height: 65px;
    left: 51%;
    animation-duration: 3s;
    animation-delay: 2s;
}

.burbuja:nth-child(10){
    width: 40px;
    height: 40px;
    left: 35%;
    animation-duration: 3s;
    animation-delay: 4s;
}
@keyframes burbujas
{
    0%
    {
        bottom: 0;
        opacity: 0;
    }
    30%
    {
        transform: translateX(30px);
    }
    50%
    {
        opacity: .4;
    }
    100%
    {
        bottom: 100vh;
        opacity: 0;
    }

}
@keyframes movimiento
{
    0%
    {
        transform: translateY(0);
    }
  
    50%
    {
        transform: translateY(40px);
    }
  
    100%
    {
        transform: translateY(0);
    }
}
.table{
 
    max-width: 50%;
   margin-top: 20px;
   border-radius: 5px;
   position:relative;
}
.table td{
   
    text-align: left;
    font-size: 25px;
     color: rgba(0,0,0,0.5);
    padding: 0;
    text-align: center;
    
   

   
   
  }
  
  .table th{
      
         font-size: 50px;
          color:#77dd77;
          font-weight: bold;
          border-radius: 5px;
          text-align: center;
       
  }
  .table2{
 
    
    margin-top: 20px;
   border-radius: 5px;
   margin-right: 40px;
   position:relative;
}
.table2 td{
   
    text-align: left;
    font-size: 20px;
     color: rgba(0,0,0,0.5);
    padding: 0;
    
    
   

   
   
  }
  
  .table2 th{
      
         font-size: 50px;
          color:#f7bd56;
          font-weight: bold;
          border-radius: 5px;
          text-align: center;
       
  }
  .table3{
    
    max-width: 50%;
   margin-top: 20px;
   margin-left:47%;
   border-radius: 5px;
   position:relative;
  
}
.table3 td{
   
    text-align: left;
    font-size: 25px;
    color: rgba(0,0,0,0.5);
    padding: 0;
    text-align: center;
    
   

   
   
  }
  
  .table3 th{
   color:#FDFD96;
         font-size: 50px;
          font-weight: bold;
          border-radius: 5px;
          text-align: center;
       
  }