/* Variáveis de cor */
:root {
  /* blue */
  --fist-blue: #4374B5;
  --second-blue: #86BAFF;
  --third-blue: #D2E5FF;
  --fouth-blue: #FFE4C9;
  /* black */
  --fist-black: #FBA418;
  --second-black: #1e1e1e;
  --third-black: #242424;
  --fourth-black: #c8c8c8;
  --five-color: #EA9409;
  /* white */
  --fist-white: #f1f1f1;
  --second-white: #ffffff;
  /* outras cores */
  --whatsapp-color: #3BC24D;
  /* Font-size */
  --default-font: 1rem;
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html,
input,
button,
select,
textarea {
  font-family: 'Roboto', sans-serif;
  font-size: var(--default-font);
  background-color: var(--fist-black);
  /* background-image: url(./assets/img/bg.png); */
  color: var(--fist-white);
}

/* nav,
header,
main,
footer {

  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  padding: 1rem;
  margin: 0 auto;

} */

.container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  padding: 1rem;
  margin: 0 auto;
}

.flex {
  display: flex;
  align-items: center;

}

.border {
  border: solid 1px red;
}

/* Nav bar */
nav {
  height: 60px;

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
  }

  .logo p {
    color: var(--second-black);
  }

  .logo h2 {
    color: var(--second-black);
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 800;
    letter-spacing: -1px;
    font-size: 1.6rem;
  }

  ul {
    display: none;
  }

  .mobileMenu a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--five-color);
    padding: 0.3rem;
    border-radius: 2px;
  }

  .mobileMenu a:hover {
    background-color: var(--third-black);
  }

  a {
    color: var(--fist-white);
  }

  a:hover {
    color: var(--fist-black);
  }

}

header {
  height: auto;

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  div img {
    width: 180px;
    padding: 1rem 0;
  }

  h2 {
    color: var(--fist-white);
    font-size: 4rem;
    font-weight: 800;
    margin-top: -4rem;

  }

  h3 {
    color: var(--second-black);
    font-size: 2.6rem;
    margin-top: -2.8rem;
    font-weight: 800;
  }

  p {
    text-align: center;
    font-size: 0.8rem;
    color: var(--second-black);
    font-family: 'Roboto Mono', monospace;
  }

  .social {
    display: flex;
    gap: 1.4rem;


    a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      color: var(--fist-white);
      background-color: var(--five-color);
      border-radius: 100%;
      padding: 0.4rem;
    }

    a:hover {
      background-color: var(--second-black);
      color: var(--five-color);
    }
  }

  a {
    color: var(--second-black)
  }
}

main {
  background-color: var(--second-black);
  height: auto;

  /* Projetos */
  section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1.4rem;
  }

  /* Titulo das páginas */
  section h2 {
    font-size: 1.6rem;
    font-family: 'Roboto Flex', sans-serif;
    padding: 1rem 0;
  }

  .projetos div {
    padding: 0.8rem;
    background-color: var(--third-black);
    border-radius: 2px;
  }

  .projetos img {
    width: 100%;
    border-radius: 2px;
  }

  h3 {
color: var(--fist-black);
    padding: 1rem 0.6rem;
  }

  .tecnologias {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }

  .tecnologias p {
    color: var(--fourth-black);
  }

  .tecnologias .botoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
  }

  .tecnologias .botoes a {
    display: flex;
    align-items: center;
    padding: 0.4rem;
    color: var(--fouth-black);
    background-color: var(--second-black);
    border-radius: 2px;
  }

  .tecnologias .botoes a:hover {
    background-color: var(--five-color);
    color: var(--second-black);
  }

  /* Aboute --------------------------------  */
  .about {

    .info p {
      text-align: justify;
      line-height: 1.6rem;
      color: var(--fist-white);
    }

    .info strong {
      margin: 1.4rem 0;
      display: flex;
      gap: 0.6rem;
      align-items: center;
      padding: 0.4rem 1rem;
      color: var(--fist-black);
    }

    .info strong p {
      color: var(--fist-white);

    }

    .info .tech {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 1.6rem;
    }

    .info .tech p {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.6rem;
      color: var(--fist-white);
      font-size: 0.8rem;
    }

    .info .tech span {
      display: flex;
      gap: 0.6rem;
      flex-direction: column;
      align-items: center;
      color: var(--fist-black);
    }


    .info .experience div {
      margin: 1rem;
    }

    .photo {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 1.4rem;
      width: 100%;
      position: relative;

      a {
        top: 80%;
        display: flex;
        text-decoration: none;
        align-items: center;
        border-radius: 2px;
        padding: 0.6rem 1.4rem;
        background-color: var(--fist-black);
        color: var(--second-black);
        position: absolute;
        z-index: 2;
        gap: 0.4rem;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }

      a:hover {
        color: var(--fist-black);
        background-color: var(--second-black) ;
      }
    }

    /* Photo */
    .photo img {
      width: 100%;
      border-radius: 2px;
    }
  }

  /* Contate-me ------------------------------*/

  .contacte-me {
    display: flex;
    flex-direction: column;
    align-items: center;

    form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    form input,
    textarea,
    select,
    button {
      width: 100%;
      height: 55px;
      border-radius: 6px;
      border: solid 1px var(--fourth-black);
      padding: 0.4rem 1rem;
      background-color: var(--second-black);
    }

    form textarea {
      height: 120px;
      resize: none;
      padding-top: 0.8rem;
    }

    form p {
      font-size: 0.8rem;
      color: var(--fist-white);
      padding: 0.6rem 0;
      margin: 0 auto;
    }

    form a {
      display: flex;
      margin: 0 auto;
      text-decoration: none;
      align-items: center;
      border-radius: 4px;
      padding: 0.6rem 1.4rem;
      background-color: var(--five-color);
      color: var(--second-black);
      gap: 0.4rem;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    form a:hover {
      background-color: var(--fist-black);
    }

    /* Whatsapp Banner */

    .whatsapp {
      display: flex;
      flex-direction: column;
      position: relative;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        border-radius: 2px;
        object-fit: cover;
      }

      a {
        display: flex;
        /* margin: 0 auto; */
        text-decoration: none;
        align-items: center;
        border-radius: 2px;
        padding: 0.6rem 1.4rem;
        background-color: var(--whatsapp-color);
        color: var(--fist-white);
        gap: 0.4rem;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        position: absolute;
        z-index: 3;
        margin-top: 90%;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}

footer {
  height: 120px;

  section {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;

    .logo {
      display: flex;
      gap: 0.6rem;
    }

    .logo p {
      color: var(--second-black);
      padding: 1rem 0;
    }

    .logo h2 {
    color: var(--second-black);
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 800;
    letter-spacing: -1px;
    font-size: 1.6rem;
    }

    .social {
      display: flex;
      gap: 1.4rem;

      a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      color: var(--fist-white);
      background-color: var(--five-color);
      border-radius: 100%;
      padding: 0.4rem;
      }
    }

    span {
      padding: 1rem 0;
      color: var(--second-black); 
    }
  }
}