@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Stack+Sans+Text:wght@200..700&display=swap');


body {
  font-family: 'Stack Sans Text', Arial, Helvetica, sans-serif;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
   background-image: url("../imagens/inicio.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  
}

header {
  display: flex;
  margin: 10px 0px 0px 0px;
  align-items: center;
  justify-content: center;
  background-color: rgba(97, 53, 43, 0.668);
  padding: 20px;
  height: 5%;
  
}
/* main {
  flex: 1;
} */



.footer-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 18px;
  background-color: rgb(97, 53, 43);
  color: #f8cf99;
  /* margin-bottom: 20px; */
  text-align: center;
  margin: 0px 0px 20px 0px;
  padding: 15px;
  align-items: center;
  
}


.footer-container .devicon-github-original {
  font-size: 25px;

}

.links {
  font-size: 18px;
    border-radius: 9px;
    padding: 7px 3px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    margin: 5px;
    transition: background-color 0.2s, transform 0.2s;
}


.links:hover {
  background-color: rgb(198, 99, 17);
  transition: 1s ease,;
  /* Transição suave de 0.3 segundos para background-color e transform */
  color: aliceblue;
}




.footer-container > p > a {
    color: #f8cf99;
}


/*Tablets*/
@media (min-width: 600px) and (max-width: 960px) {
  .main-menu {
    text-align: center;
    margin: 10px;
    /* max-width: 50%; */
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
  }

  .links {
    margin: 0px 10px 0px 10px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: rgb(241, 220, 213);
    padding: 13px;
    border: solid 3px #c8652d;
    color: black;
    text-decoration: none;
  }

  .links:hover {
    background-color: rgb(97, 53, 43);
    /* Transição suave de 0.3 segundos para background-color e transform */
    color: aliceblue;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 10px;
    min-width: 97%;
    min-height: 60px;
    margin-top: 200px; /* Empurra o footer para baixo */
    margin-bottom: 20px;
    text-align: center;
  }
  .footer-container > p {
    margin: 5px;
  }

  .devicon-github-original {
    display: none;
    font-size: 21px;
    position: absolute;
  }



}


@media (min-width: 480px) and (max-width: 600px) {
  #container {
    display: flex;
    align-items: top;
    padding: 80px;
    background-color: rgb(97, 53, 43);
    max-width: 1000px;
    max-height: 500px;
    border-radius: 20px;
    border: solid 3px rgb(200, 101, 45);
    color: white;
  }

  .main-menu {
    text-align: center;
    margin: 10px;
    /* max-width: 50%; */
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
  }

  .links {
    margin: 0px 10px 0px 10px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: rgb(241, 220, 213);
    padding: 13px;
    border: solid 3px #c8652d;
    color: black;
    text-decoration: none;
    
  }

  .links:hover {
    background-color: rgb(97, 53, 43);
    /* Transição suave de 0.3 segundos para background-color e transform */
    color: aliceblue;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    min-width: 97%;
    min-height: 60px;
    margin-top: 200px; /* Empurra o footer para baixo */
    margin-bottom: 20px;
    text-align: center;
  }
  .footer-container > p {
    margin: 5px;
  }

 

  .devicon-github-original {
    display: none;
    font-size: 21px;
    position: absolute;
  }
}