.grid-container {
  display: grid;
  grid-template-areas: 
    'header header'
    'titulo titulo'
    'cont1 cont2'
    'buttons buttons'
    'footer footer';
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
} 

@media (max-width: 600px) {
    .grid-container {
        display: grid;
        grid-template-areas: 
          'header header'
          'titulo titulo'
          'cont1 cont1'
          'cont2 cont2'
          'buttons buttons'
          'footer footer';
          grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      } 
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  border-radius: 10px;
}

button:hover {
  opacity:1;
}




/* Float cancel and signup buttons and add an equal width */
.cancelbtn {
  float: left;
  width: 100%;
}


body {font-family: Arial, Helvetica, sans-serif;}
* {
  box-sizing: border-box;
  background-color: black;
  color:white;
  }
  .header {
  grid-area: header;
  background: linear-gradient(129deg, #003366 0%, #002566 100%);
  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.1, 1.1);
}

.contenido {
    grid-area: cont1;
    padding: 1vw;
}

.contenido2 {
    grid-area: cont2;
    padding: 1vw;
}

.clearfix {
    grid-area: buttons;
}


.footer {
  grid-area: footer;
  background-color: #003366;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  
}

.azul{
  background-color: #003366;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 4px;
  width: 33vw;
  background-color: #141f1f;
}


.titulo2{
  background-color:rgb(35, 60, 83);
}

.titulo{
    grid-area: titulo;
    /*background-color: #3d6868;*/
    padding: 20px;
    background-image: url("../img/metal.png");
    border-radius: 10px;
    border-style: inset;
    
}

.titulotext{
    background-color:  hsla(0, 0%, 0%, 0);
    text-shadow: 3px 3px black;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  color: white;
}