@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

*{
  margin: 0;
  padding:0;
}

body{
  background-color:#A9D3FF;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  
}
.menu{
  background-color:#F2F4FF;
  height:50px;
  padding:5px 10px;
  text-align:center;
  font-size:20px;
  text-transform: uppercase;
  font-family: "Dela Gothic One", sans-serif;
  color:#e5446d;
}
.banner{
  display:flex;
  justify-content:center;
  align-itens:center;
  width:100%;
  margin-top:10px;
  margin-bottom:20px;
}
.banner >img{
  margin-top:0px;
  width:100%;
  border-radius:20px;
}

main{
  background-color:#F2F4FF;
  margin:auto;
  min-width:300px;
  max-width:1000px;
  padding:20px 30px;
}
article{
  margin:10px 15px 10px 10px;
  
}
article > h3{
  font-size:25px;
  margin-bottom:20px;
  color:#e5446d;
}
.Capa-artigo{
  display:flex;
  justify-content: center;
  
}
.Capa-artigo >img{
  min-width:300px;
  min-height:80px;
  max-width:650px;
  max-height:300px;
  border-radius:20px;
  padding:10px;
  
}

.leiaMais{
  border-radius:20px;
  padding:5px 15px;
  color:#f2f4ff;
}
a{
  color:#f2f4ff;
  text-decoration:none;
}
a:hover{
  color:#2a2b2a;
  font-size:20px;
}

section{
  background-color:rgba(229, 68, 109,0.1);
  border-radius:20px;
  padding:5px;
  margin-right:20px;
  min-width:400px;
  max-width:100%;
}
.foto{
  display:flex;
  justify-content: center;
  padding:20px;
}
.foto>img{
  width:200px;
  border-radius:100px;
}
.sobre>h3{
  font-size:25px;
  margin-bottom:20px;
  color:#e5446d;
  text-align:center;
}
.sobre > p{
  text-align: justify;
}
container{
  display: flex;
}
footer > ul{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: row;
  gap:50px;
  list-style-type: none;
  padding-top:20px ;
}
footer>p{
  text-align:center;
  padding:10px;
}
footer{
  background-color:#706C61;
  color:#f2f4ff;
  padding-bottom:10px;
}

@media only screen and (max-width: 400px) {
  container {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap:50px;
  }
  section{
    background-color:rgba(229, 68, 109,0.1);
    border-radius:0px;
    padding:10px;
    margin:20px;
    min-width:250px;
    max-width:350px;
  }
  .leiaMais{
    border-radius:30px;
    margin-left:10px;
    max-width:290px;
    padding:5px 15px;
    color:#f2f4ff;
}
}