/* Hola */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto&display=swap');

body {
  align-self: center;
  background-image: linear-gradient(45deg, #f03737, #5485f2);
  text-align: center;
  font-family: 'Bebas Neue', cursive;
}
div {
  background-color: white;
  text-align: center;
  align-self: center;
}
.banda {
margin: 0 auto 0 auto;
align-items: flex-end;
text-align: center;
display: block;
margin: auto;
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);

}
.contenedor {
width: 80%;
margin: 0 auto 0 auto;
background-color: white;
text-align: center;
display: block;
margin: auto;
}
.cabeza {
text-align: center;
border: 2px solid black;
padding: 70px;
display: block;
margin: auto;
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);

}

.cuerpo1 {
border: 2px solid black;
font-weight: bold;
text-align: center;
background-color: #5485f2;
color: white;
font-size: 25px;
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);


}
.cuerpo2 {
  width: auto;
border: 2px solid black;
font-weight: bold;
text-align: center;
background-color: #f03737;
color: white;
font-size: 25px;
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);

}
.cuerpo3 {
width: auto;
border: 2px solid black;
font-weight: bold;
text-align: center;
background-color: #5485f2;
color: white;
font-size: 25px;
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);

}
.cuerpo4 {
  width: auto;
border: 2px solid black;
font-weight: bold;
border: 3px solid #f03737;
padding: 70px;
text-align: center;
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
}


.piedepagina {
  width: auto;
border: 2px solid black;
background-color: black;
color: white;
padding: 50px;
font-size: 15px;
text-align: center;
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
}

.adaptable {
  width: auto;
  height: auto;
  display: block;
margin: auto;
  -webkit-box-shadow: 2px 5px 34px 3px #000000;
  box-shadow: 2px 5px 34px 3px #000000;
}
.adaptable2 {
  width: 30%;
  height: 30%;
  margin: auto;
  -webkit-box-shadow: 2px 5px 34px 3px #000000;
  box-shadow: 2px 5px 34px 3px #000000;
}

h2 , h3 , h6 {
  font-family: 'Roboto', sans-serif;
}

.menu {
  align-items: center;
  color: black;
  border-style: outset;
  display:inline-block;
  font-size: 25PX;
  list-style: none;
  padding-right: 17px;

}

.vinculos {
  align-items: center;
  text-align: center;
  border-style: outset black;
  font-size: 25px;
  text-decoration: none;
  padding: 10px;
}

.vinculos:hover {
text-align: center;
  background-color:white;
  color: black;
  text-decoration:none;
}

@media screen and (max-width:600px) {
  .contenedor {
      align-self: center;
  width: 100%;
  margin: 0 auto 0 auto;
  background-color: white;
  text-align: center;
  display: block;
  margin: auto;
  }
  .banda {
  margin: 0 auto 0 auto;
  align-items: flex-end;
  text-align: center;
  display: block;
  margin: auto;
font-size: 15PX;
  -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
  box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);

  }
  .cabeza {
      align-self: center;
  text-align: center;
  border: 2px solid black;
  padding: 90px;
  display: block;
  margin: auto;
  -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
  box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);

  }
  .adaptable {
    align-self: center;
    width: 90%;
    height: auto;
    display: block;
  margin: auto;
    -webkit-box-shadow: 2px 5px 34px 3px #000000;
    box-shadow: 2px 5px 34px 3px #000000;
  }

}
@media screen and (max-width:200px) {
  .contenedor {
  width: 95%;
  margin: 0 auto 0 auto;
  background-color: white;
  text-align: center;
  display: block;
  margin: auto;
  }
  .adaptable {
    align-self: center;
    width: 90%;
    height: auto;
    display: block;
  margin: auto;

  }
  .banda {
  margin: 0 auto 0 auto;
  align-items: flex-end;
  text-align: center;
  display: block;
  margin: auto;
font-size: 15PX;
  -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);
  box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 1px 5px 15px 5px rgba(0,0,0,0);

  }
  .cabeza {
  text-align: center;
  border: 2px solid black;
  padding: 70px;
  display: block;
  margin: auto;

  }
  .cuerpo1 {
  padding:80% ;
  width: auto;
  }
  .cuerpo2 {

    padding:80% ;
    width: auto;
  }
  .cuerpo3 {
    padding:80% ;
    width: auto;
  }
  .cuerpo4 {
    padding:80% ;
    width: auto;

}
}