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

html {
   font-size: 62.5%;
   font-family: Open Sans, sans-serif;
}

body {
   text-align: center;
   font-size: 1.5rem;
   background-color: #8a71c9;
   color: #ffffff;
   line-height: 1.3;

}

header {
   width: 100%;
   height: 110px;
   position: fixed;
   top: 0;
   z-index: 1000;
   background-color: #8d57ea;
   box-shadow: 0 2px 10px #00000055;

}

h1 {
   font-size: 5rem;
   padding: 30px 0;
   font-style: italic;
   font-weight: 500;
   margin: 20px 0;
   width: 80%;
   margin: 0 auto;
}

h2 {
   color: #2a0074;
   font-size: 4.0rem;
}

.titulo-verde {
   color: #04ff9f;
   font-size: 2.2rem;
   font-style: italic;
   margin-bottom: 10px;
}

.titulo-vermelho {
   color: #FF9E9E;
   font-size: 2.2rem;
   font-style: italic;
   margin-bottom: 10px;
}

.titulo-amarelo {
   color: #ffe36d;
   font-size: 2.2rem;
   font-style: italic;
   margin-bottom: 10px;
}

main {
   width: 80%;
   margin: 0 auto;
   margin-top: 180px;
}

section {
   margin: 10px 0;
   padding: 30px 20px;
   background: #ffffff1a;
   border-radius: 10px;

   scroll-margin-top: 150px;
   /* impede que o conteúdo fique atrás do header */
}

p {
   font-size: 2.0rem;
   text-align: justify;
}

figure {
   margin: 20px 0;
   border-radius: 10px;
}

img {
   width: 100%;
   border-radius: 10px;
}



.principal {
   display: flex;
   justify-content: space-around;
   align-items: center;
   background-color: #ff6cb5;
   height: 45px;
   max-width: 80%;
   margin: 0 auto;
   border-radius: 10px;

}

.principal a {
   color: #ffffff;
   font-weight: normal;
   text-decoration: none;
   text-transform: uppercase;
}

.principal a:hover {
   color: #2a0074;
   font-weight: bolder;
   transition: 0.3s;
   text-decoration: underline;
}

ul {
   list-style-type: none;
   line-height: 2;
   padding-left: 0;
}

a {
   text-decoration: none;
   color: #99ffff;
   font-weight: 700;
}

a:hover {
   text-decoration: underline;
   color: #2a0074;
   font-weight: bolder;
   transition: 0.3s;
   cursor: pointer;
}

.contato {
   border: 1px solid #ffffff55;
   border-radius: 5px;
   margin: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 10px;
   text-align: left;
}

input {
   width: 100%;
   padding: 8px;
   margin-bottom: 10px;
   border: 1px solid #DDDDDD;
}


button {
   background: #0bba0b;
   border: 1px solid transparent;
   padding: 10px 20px;
   border-radius: 5px;
   color: #fff;
   font-weight: bolder;
   cursor: pointer;
}

button:hover {
   background: #2a0074;
}

footer {
   display: flex;
   justify-content: center;
   margin-top: 30px;
   font-size: 14px;
   font-style: italic;
   border-top: 1px solid #2a0074;
   padding: 20px;
}


@media screen and (max-width: 768px) {
   /* .container {
      display: flex;
      flex-direction: column;
      align-items: center;
   } */

   header {
      width: 100%;
      height: 70px;
   }

   main {
      width: 95%;
      margin-top: 190px;
   }

   h1 {
      margin: 0;
      padding: 10px 0;
      width: 100%;
      font-size: 2.1rem;
      margin-bottom: 0px;
      text-align: center;
   }

   h2 {
      font-size: 2rem;
   }

   p {
      font-size: 1.4rem;
   }

   .principal {
      background-color: transparent;
      margin: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
   }

   .principal li {
      margin: 3px 0;
      padding:  0;
      width: 100%;
      background-color: #ff6cb5;
      font-size: 1.5rem;
      max-width: 100%;

   }

   section {
      padding: 15px 10px 5px 10px;
      scroll-margin-top: 170px;
      /* font-size: 0.8rem; */
   }

   footer {
      text-align: center;
   }
}