/*reset do navegador*/
* {
   padding: 0%;
   margin: 0;
   box-sizing: border-box;
   appearance: none;
   border-style: initial;
   border-color: initial;
   border-image: initial;
   border-width: 0px;
   text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
}

/* fonte */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300&display=swap');


/*container*/
body {
   display: flex;
   width: 100%;
   position: absolute;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-image: url("../static/img/background-portfolio.png");
   background-size: cover;
   font-family: 'Roboto Flex', sans-serif;
}


/*seção de conteúdo*/
section {
   background-color: #f8f8f8;
   width: 80%;
   border-radius: 50px;
   margin-top: 15rem;
}


/* menu */
.menu {
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.menu a {
   padding: 2rem;
   background-color: #E4BAFE;
   border-radius: 1rem;
   text-decoration: none;
   color: black;
}

.menu a:hover {
   text-decoration: none;
   color: #f8f8f8;
   background-color: #9a31db;
}

#foto {
   width: 25%;
   padding: 0.5rem;
   background-color: transparent;
   border-radius: 100%;
   transform: translateY(-50%);
}

#foto img {
   filter: saturate(140%);
   width: 100%;
   border-radius: 100%;
   border: 0.4rem solid #f8f8f8;
   background-color: #f8f8f8;
}


/*contatos*/
.contatos {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 5rem;
   width: 100%;
}

.links {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   text-align: center;
   width: 80%;
   margin-top: 1rem;
}

.links img{
   width: 3rem;
}

.links a {
   text-decoration: none;
   color: black;
   gap: 1rem;
}

.links a:hover {
   text-decoration: none;
   color: #9a31db;
}


/*footer*/
.rodape {
   margin: 0.5rem;
   color: antiquewhite;
}


/* ------ início responsividade ------ */

@media (max-width: 660px) {
   
   /* container */
   section {
      width: 100%;
   }
   
   /* menu mobile */
   .menu {
      flex-direction: column;
   }

   #foto {
      width: 30%;
      order: -1;
      height: 6rem;
      transform: translateY(-80%);
   }

   .menu a{
      width: 100%;
      border-radius: 0;
      margin: 0.5rem;
      text-align: center;
   }

   /* contatos mobile */
   .contatos{
      background-color: #E4BAFE;
      margin-bottom: 3rem;
   }

   .links{
      flex-direction: column;
   }

   .links img{
      width: 10%;
   }
}