@charset "utf-8";

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

header .contenedora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: justify;
  gap: 2rem;
  flex-direction: row;
  padding: 1rem;
}

header nav a {
  
  color: white;
  background-color: rgb(221, 43, 153);
  display: block;
  width: 5em;
  padding-block: 0.25em .5em;
  text-align: center;
}

#logo {
  display: block;
  border-radius: .5rem;
  width: 15rem;
  padding: .25rem .5rem;
  background-color:  white;
  border: solid 3px  white;
}

a {
  text-decoration: none;
}
 

img { 
  max-width: 100%; 
  justify-content: center;
}

.contenedora {
  max-width: 100%;
  margin-inline: auto;
  padding: 1rem;
  overflow-x: hidden;
}
  

main {
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1em;
}


article .cande {
  color: white;
  background-color: hsl(325, 74%, 82%);
  display: block;
  width: 20em;
  padding-block: 0.25em .5em;
  border-radius: 0.5rem;
  text-align: center;
  margin: 1rem;
}

article .fati {
  color: white;
  background-color: hsl(325, 74%, 82%);
  display: block;
  width: 20em;
  padding-block: 0.25em .5em;
  border-radius: 0.5rem;
  text-align: center;
  margin: 1rem;
}

body { 
  background-color: white;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 90%;

}

header { 
    color: white;
    
}

ul,
 li{
  list-style-type: none;
  text-align: left;
  padding: 0,25rem;
  margin: 1rem;
}


  
article { 
color: white;
background-color: hsl(325, 74%, 82%);
display: block;
width: 30em;
padding-block: 0.25em .5em;
border-radius: 0.5rem;
text-align: center;
margin: 1rem;
}


article .materias {
  display: block;
  width: 25em;
}


header { background-color: hsl(325, 74%, 82%);}

h2 { 
    color: white ;
    background-color: rgb(221, 43, 153);
    display: block;
    width: 10em;
    padding-block: 0.25em .5em;
    text-align: center;
    width: 30rem;
}

h3 { 
  background-color: rgb(221, 43, 153);
}

.sobre-mi p{
text-align: left;
margin: 1rem;
padding: 0.25em;
}

footer { 
    background-color: hsl(325, 74%, 82%);
    color: white;
}

footer p {
  margin: 1em 2em 1em 2em;
  background-color: transparent;
  color: white;
}

p {
color: black;
background-color: white;
}



body section {
  display: flex; justify-content: center;
  background-color:  white;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
}

section .contenedora {
display: flex;
justify-content: space-around; 
align-items: flex-start;
gap: 1rem; 
}

.imagen-articulo {
background-color: hsl(325, 74%, 82%); 
padding: 1rem;
border-radius: 0.5rem;
color: white;
margin: auto;
align-items: center;
justify-content: center;
}



header .contenedora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

section .contenedor-flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  max-width: 90%;
  margin: 1em auto 1em auto;
}

@media screen and (min-width: 768px) {
 .materias {
  display: flex;
 }

}