body {font-family: Arial, Helvetica, sans-serif;}

* {
    box-sizing: border-box;
    background-color: black;
    color: white;    
}
a {color: yellow;}

.header {
  
  background-color: #003366;
  padding: 30px;
  margin-bottom: 10px;
  border-radius: 10px;
}
#logo {
    max-width:100%;
    max-height:100%;
    display: block;
    background-color:  hsla(0, 0%, 0%, 0);
    filter: drop-shadow(11px 7px 4px #000);
}

#logo:hover{
  transform: scale(1.05, 1.05);
}

.topnav {
    overflow: hidden;
    background-color: #141f1f;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    background-color: #141f1f;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color:#141f1f;
  }
  
  .topnav a.active {
    background-color: #003366;
    color: white;
  }
  
  .topnav .icon {
    display: none;
    background-color: #141f1f;
  }
  
  /* The grid container */
.grid-container {
  display: grid;
  padding: 10px;
  grid-template-areas: 
    'originaldiv'
    'ataridiv'
    /*grid-column-gap: 10px;*/ 
    /*grid-row-gap: 10px;*/
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
    /*grid-template-columns: repeat(auto-fit, minmax(0, 1fr));*/
    /*grid-template-columns: auto auto ;*/
    }
    
    .originaldiv {
    grid-area: originaldiv;
    padding: auto;
    margin: 1%;
    width: 98%;
    left: -100%;
    background-color: #141f1f;
    border-radius: 10px 40px;
    position: relative;
    display: block;
    }

    .ataridiv {
    grid-area: ataridiv;
    padding: auto;
    margin: 1%;
    width: 98%;
    left: 100%;
    background-color: #141f1f;
    border-radius: 10px 40px;
    position: relative;
    display: block;
    }

    .imagen{
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-color:  hsla(0, 0%, 0%, 0);
        padding-top: 2%;
        padding-bottom: 2%;
        filter: drop-shadow(19px 21px 5px #000);
    }
    .imagen:hover{
        transform: scale(1.1, 1.1);
        
      }
  
  
  
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
    'originaldiv'
    'ataridiv'
    
  }
}
  

  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  .footer {
  grid-area: footer;
  background-color: #003366;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  
}

.azul{
  background-color: #003366;
}

#facebook_logo{
  background-color: hsla(0, 0%, 0%, 0);
  filter: drop-shadow(7px 7px 4px #000);
}

#facebook_logo:hover{
  transform: scale(1.1, 1.1);
  
}