* { 
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  margin-inline: 0;
  margin-top: 2rem;
  margin-bottom: 0;
  display: block;
  color: #333;
  background-color: #f4f4f4;
  font-size: small;
  background-blend-mode: color-burn;
}  

header { 
  text-align: center;
  max-width: 80%;
  margin-inline: auto;
  padding-block: 0.6em 0.8em;
  padding-inline: 1rem;
  background-color: #f8bacf;
  border-radius: solid 2px #b39ddb;
  border: solid 2px #b39ddb;
  box-shadow: 2px 2px 0 #b39ddb;
  color: #4a4a4a;
}

header nav ul {
  margin-inline: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

header nav ul li {
  font-size: smaller;
  list-style: none; 
  padding: 1rem;
  border-radius: 0.5rem;
  color: #4a4a4a;
  background-color: #e1bee7; 
  border: solid 2px #9575cd; 
  box-shadow: 2px 2px 0 #9575cd;
}

header nav ul li:hover { 
  color: #fff;
  background-color: #9575cd; 
  border: solid 2px #e1bee7;
  box-shadow: 2px 2px 0 #e1bee7;
  transition: 0.5s;
}

a { 
  color: #4a4a4a;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

#logo { 
  width: 0rem;
  padding: 0.4rem 0.4rem;
  border-radius: 0.5rem;
  margin-block: 5rem;
}

#logo:hover { 
  border-radius: 0.5rem;
  width: 6rem;
  padding: .4rem .4rem;
}

p { 
  margin-bottom: 2rem;
}

.contenedoraclasica { 
  max-width: 80%;
  margin-inline: auto;
  background-color: #F7F3F0;
  padding: 1rem 3rem;
  margin-block: 1.5rem;
  color:#000100;
  border: solid 2px #e1bee7;
  box-shadow: 2px 2px 0 #e1bee7;
}

.contenedoraclasica img { 
  padding: 0;
  margin-inline: 0;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 0.5rem;

}

.contenedoraclasica ul { 
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  margin-inline: 1rem;
}


.contenedoracolor {   
  max-width: 80%;
  margin-inline: auto;
  padding: 1rem 2.4rem;
  background-color: #f8bacf;
  border: solid 2px #b39ddb; 
  box-shadow: 2px 2px 0 #b39ddb;
}

.contenedoracolor .infointegrantes { 
  text-align: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
}

.contenedoracolor .infointegrantes a { 
  display: block;
  margin-top: 1rem;
  padding-block: 1rem;
  border-radius: 0.5rem;
  background-color: #e1bee7; 
  border: solid 2px #9575cd; 
  box-shadow: 2px 2px 0 #9575cd;
  text-align: center;
}

.contenedoracolor .infointegrantes a:hover {
  color: #fff;
  background-color: #9575cd; 
  border: solid 2px #e1bee7;
  box-shadow: 2px 2px 0 #e1bee7;
  transition: 0.5s;
  cursor: pointer;
}

#equipo a { 
  display: block;
  margin-top: 1rem;
  padding-block: 1rem;
  border-radius: 0.5rem;
  background-color: #e1bee7; 
  border: solid 2px #9575cd; 
  box-shadow: 2px 2px 0 #9575cd;
  text-align: center;
}

#equipo a:hover { 
  color: #fff;
  background-color: #9575cd; 
  border: solid 2px #e1bee7;
  box-shadow: 2px 2px 0 #e1bee7;
  transition: 0.5s;
  cursor: pointer;
}

#equipo div img { 
  object-fit: cover;
  width: 11rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
}

#prototipo { 
  margin-top: 1rem;
  margin-bottom: 2rem;
  object-fit: contain;
  max-width: 100%;
  border-radius: 0.5rem;
}

.contenedoracolumnas { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 1.5rem;
  max-width: 80%;
  margin-inline: auto;
  font-size: x-small;
  margin-bottom: 2rem;
}

.contenedoracolumnas article { 
  padding: 2rem;
  border-radius: rem;
  background-color: #F7F3F0;
  border: solid 2px #e1bee7;
  box-shadow: 2px 2px 0 #e1bee7;
}

.contenedoracolumnas article div { 
  object-fit: contain;
  display: block;
}

.contenedoracolumnas img { 
  max-width: 100%;
}

.contenedoracolumnas ul { 
  padding-inline: 1rem;
}

h1 {
  color: #9575cd;
  font-size: x-large;
}
h2, h3 {
  color: #333;
}

h4 {
  color: #333;
  text-align: center;
}

ul {
  display: block;
  list-style: square;
  margin-inline-start: 0;
  padding-inline: 0;
}

footer{
  background-color: #f8bacf;
  padding: 1rem 2.4rem;
}

footer div {
  max-width: 80%;
  margin-inline: auto;
  color: #333;
  font-size: x-small;
}