main.css

body {
  background-color: aliceblue;
  margin:0;
  font-family: "open_sansbold",'Open Sans',Arial,Helvetica,sans-serif;
 }
 
 main {
   padding-left:1%;
   padding-right:1%;
 }
 
 header {
   width:auto;
   height:10%;
   padding-top:1%;
   background-color: aliceblue;
 }
 
 header hr {
   background-color:black;
   height:2px;
   margin-block-end:0em;
 }
 header img {
   display:inline-block;
   width:12%; 
   height:auto;
   vertical-align: middle;
 }
 
 header h1 {
   display:inline-block;
   font-size:2.7vw;
   font-family: "open_sansbold",'Open Sans',Arial,Helvetica,sans-serif;
 }
 
 #contato {
   width:15%;
   float:right;
   margin-top:4%;
 }
 
 #contato a { font-size: 1.5vw; }
 
 a { color:black; }
 
 #contato img {
   width:20%;
   height:auto;
 }
 
 #contato li {
   display:inline;
   vertical-align: middle;
 }
 
 .button {
   width:100%;
   color: white;
   background-color:#195128;
   border:none;
   cursor:pointer;
   font-size:1.5vw;
   padding-top:3%;
   padding-bottom:3%;
   border-radius:1.5vh;
   display:inline;
 } 
 
 
section .button  {
  width:15%;
  margin:auto;
  display:flex;
  padding:1% 3% 1% 3%;
  color: white;
}

 .button:hover { background-color:rgb(18, 128, 33); }

 .aab {
  color: white;
  text-decoration: none;
 }
a { text-decoration: none; }
 #botaosite {

  background-color:#195128;
  border:none;
  cursor:pointer;
  font-size:1.5vw;
  padding-top:1.5%;
  padding-bottom:1.5%;
  border-radius:1.5vh;
  margin-bottom:2%;
  margin-left:0.5%;
  outline-color: #195128;
 }
 #funcoes { margin: auto; }
 
 #funcoes ul {
   list-style: none;
   text-transform: uppercase;
   display: flex;
   padding: 0;
   margin: auto;
   align-items: center;
 }
 
 #funcoes li {
   width:33%;
   background-color: #195128;
   border-radius: 1.5vh ;
   margin: 1%;
   padding:1%;
   font-size: 1.5vw;
   text-align:center;
   font-family: "open_sansbold",'Open Sans',Arial,Helvetica,sans-serif;
   padding:0;
 }
 
 
 #barra-de-pesquisa button {
   display:inline;
   background-color:#195128;
   color:white;
   border-radius:1vh;
   padding:1%;
   outline:none;
   width:10%;
 }
 
 #barrapesq {
   display:inline;
   border-radius:1vh;
   margin-bottom:1%;
   padding:1%;
   width:87%;
 }
 
 #barra-de-pesquisa button:hover { background-color:rgb(18, 128, 33); }
 
 section {
   background-color: rgba(90, 199, 90, 0.445);
   height: auto;
   margin-bottom: 15px;
   border-radius: 1.5vh;
   padding-top:1%;
   padding-left:1%;
 }
 
 article {
   padding:0.5%;
   margin-bottom:1%;
   word-wrap:break-word;
 }
 
 article img {
   display:inline-block;
   vertical-align:top;
   width:20%;
   height:200px;
   border-radius:1.5vh;
   margin-right:1%;
 }
 
 .texto {
   display: inline-block;
   width: 75%;
   text-align:justify;
   font-size:1vw;
 
 }

 
 /* CSS dos artigos de eventos */
 #artigo {
   background-color:aliceblue;
   width:80%;
   height:auto;
   margin-left:9%;
   margin-right:10%;
   padding-right:1%;
   word-wrap:break-word;
   margin-top:5%;
 }
 
 
 #artigo h5 {
    padding-bottom:5%;
    text-align:right;
    margin-right:2%;
 }
 
 #desc {
   text-align:justify-all;
   font-size:2vw;
   margin-top: 8vh; 
   padding-bottom: 10vh;
 }

 #artigoloading { padding-top:1.5%; }



/* CSS do artigo aberto */
.informacoes-artigo img, p, h2, h3, h5 {
  width:100%;
  border-radius:1vh;
  font-size:1.5vw;
}


.atividades {
  font-size:1.5vw;
  margin-bottom:10%;
}

.atividades hr {
  height:3px;
  border:none;
  background-color:black;
}
/* Views */
 @media screen and (max-width:1025px) {
 
 #contato img { width:20%; }
 
 #contato {
   width:18%;
   padding:0;
   vertical-align: bottom;
   margin-left:9%;
 }
 
 #contato a { font-size:2vw; }
 
 #funcoes { margin-bottom:5%; }
 
 #funcoes li { height:3vh; }
 #barrapesq { width:86%; }
 
 .button {
   padding-top:6%;
   font-size:3vw;
 }
 
 #carregar {
   width:100%;
   padding-left: 40%;
 }

 article img {
   width:75%;
   height:360px;
   margin-bottom:5%;
   margin-left:12.5%;
 }
 
 .texto {
   width:100%;
   font-size:3vw;
 }
 
 .texto h2 { margin-top:0; }

 #desc { font-size:2.5vw;}

#artigoloading { margin-bottom:10%; }

}
 

 
 @media screen and (max-width:426px) {

 header {width:100%;}
 
 header img {
   width:25%;
   height:auto;
 }
 header h1 { font-size:5vw; }
 
 #contato {
   width:25%;
   padding:0;
   height:20%;
   margin-top:8%;
 }
 
 #contato a {font-size:3vw}
 
 #barrapesq {width: 85%;}
 
 #funcoes ul {display:initial;}
 
 #funcoes {margin-right:2%;}
 
 #funcoes button {
   font-size:3vw;
   padding-top:3%;
 }
 #funcoes li {
   width:100%;
   height: fit-content;
 }
 
 #barra-de-pesquisa button {display:none;}
 
 #barrapesq {width:97%;}
 
 
 article {margin: 10% 5% 10%;}
 
 .texto {
   width:100%;
   font-size:3vw;
 }
 article img {
   display:block;
   margin-left: auto;
   margin-right: auto;
   width:100%;
   height:150px;
 }

 #desc { font-size:5vw;}

 }