* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Nerko One', sans-serif;
}
/*------------------------------------------------------------LINKTREE---------------------------------------------------------------------*/
/*                  TOPO                        */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 1rem 0 0;
  justify-content: center;
}
body{
  background-image: url(images/BG-folder/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  max-width: 100vw;
}
header{  
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
}
#foto{
    background: none;
    width: 11rem;
    height: 11rem;
    margin-top: 2rem;
}
#brilhos01{
    background: none;
    width: 11rem;
    height: 11rem;
    animation: opacity 3s linear infinite;
}
#lua{
    background: none;
    width: 9rem;
    height: 9rem;
    animation: rotate 6s linear infinite;
}

/*                    BIO                      */

.bioBoard{
    display: flex;
    flex-direction: row; 
    gap: 5rem;
    text-align: center;
}
#bioBoard {
  background-image: url(./images/windows/boardBio.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  color: #2CA49C;
  font-size: 1.5rem;
  padding: 3.5rem 3rem 2rem 2rem;
  width: 100%;
  max-width: 400px;
}
#brilhos02{
    background: none;
    width: 7rem;
    height: 7rem;
    padding-right: 1rem;
    animation: opacity 5s linear infinite;
}
#estrela02{
    background: none;
    width: 5rem;
    height: 5rem;
    margin-top: 7rem;
    animation: rotate2 4s linear infinite;
}

/*                    MAIN BOARD                      */

.mainBoard {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}
#board {
    background-image: url(./images/windows/buttonsBoard.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    height: auto;
    padding: 6rem 5rem 4rem 4rem;
    margin: -2rem 2.8rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}
#estrela{
    background: none;
    width: 12rem;
    height: 12rem;
    animation: rotate 4s linear infinite;
}
#brilhos03{
    background: none;
    width: 7rem;
    height: 7rem;
    animation: opacity 2s linear infinite;
}
a{
    background: none;
    text-decoration: none;
}
button {
  background-color: #E7FFF8;
  color: #2CA49C;
  font-size: 1.5rem;
  cursor: pointer;
  width: 13rem;
  height: 2.5rem;
  padding: .1rem .5rem;
  border: .2rem solid #2CA49C;
  border-radius: .7rem;
  box-shadow: .2rem .2rem .01rem #545454;
}

button:hover {
  background-color: #cee3dc;
  box-shadow: none;
}

/*                        FOOTER                        */

#clouds {
  background-image: url(./images/clouds.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100vw;
  max-width: 100%;
  height: auto;
  aspect-ratio: 15 / 9;
  margin-top: -25rem;
}

footer > p {
  text-align: end;
  color: #2CA49C;
  font-size: 1.2rem;
  z-index: 2; 
  margin: -4rem 2rem 2rem 0;
}

/*                           ANIMAÇÃO                   */

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(30deg);
    }
    100%{
        transform: rotate(0deg);
    }

}
@keyframes rotate2{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(-30deg);
    }
    100%{
        transfom: rotate(30deg);
    }

}
@keyframes opacity{
    0%{
        opacity: 100%;
        image-rendering: 1rem 1rem 1rem #FFFF;
    }
    50%{
        opacity: 50%;
    }
    100%{
        opacity: 100%;
    }
}

/*                           RESPONSIVIDADE                                 */

@media (max-width: 1023px) and (min-width: 768px) {
    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 1rem;
        gap: 2rem;
    }
  
    #foto{
        width: 8rem;
        height: 8rem;
    }
    #brilhos01{
        width: 6rem;
        height: 6rem;
    }
    #lua{
        width: 6rem;
        height:6rem;
    }
  
    .bioBoard {
        flex-direction: row;
        gap: 2rem;
    }
  
    #bioBoard {
      max-width: 90%;
      font-size: 1.4rem;
      padding: 3.5rem 4rem 3rem 3rem;
    }
    
    #brilhos02{
      width: 5rem;
      height: 5rem;
      margin: 4rem 0 0 5rem;
    }
    #estrela02{
      width: 5rem;
      height: 5rem;
      margin: 4rem 3rem 0 0;
    }
    
    .mainBoard {
      flex-direction: row;
      gap: .3rem;
      margin-top: -2rem;
    }
    
    #board {
      max-width: 90%;
      padding: 4rem 3.5rem 3.5rem 3.5rem;
      margin-right: 0;
      gap: 1.2rem;
    }
    
    #brilhos03 {
      width: 8rem;
      height: 8rem;
      margin: 0 2rem 4rem 0;
    }
    #estrela{
      width: 8rem;
      height: 8rem;
      margin: 0 0 6rem 1.9rem;
    }
    
    button {
      width: 12rem;
      max-width: 300px;
      font-size: 1.3rem;
      height: 3rem;
    }
    
    #clouds {
      margin-top: -15rem;
      aspect-ratio: 15 / 9;
    }
    
    footer > p {
      font-size: 1rem;
      margin: -3rem 1rem 1rem 0;
    }
  }


  @media (max-width: 425px) {
  header {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;
    }
    .container {
      padding-top: 1rem;
      margin: 0;
    }
    #foto{
        width: 7rem;
        height: 7rem;
    }
    #brilhos01{
        width: 4rem;
        height: 4rem;
        margin-left: 2rem;
    }
    #lua{
        width: 4rem;
        height: 4rem;
    }
  
    .bioBoard {
        flex-direction: row;
        gap: 1rem;
    }
    #bioBoard {
      max-width: 70%;
      font-size: .8rem;
      padding: 2rem 2rem 2rem 1.6rem;
    }
    #brilhos02{
      width: 2.5rem;
      height: 2.5rem;
      margin: 2rem 0 0 1rem;
    }
    #estrela02{
      width: 2rem;
      height: 2rem;
      margin: 3rem .3rem 0 0;
    }
    
    .mainBoard {
      display: flex;
      flex-direction: row;
      gap: .15rem;
      margin-top: 5rem;
    }
    
    #board {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;  
      max-width: 70%;
      margin: -4rem 0 0 .4rem;
      padding: 2.6rem 1rem 2.5rem .8rem;
      gap: .7rem;
    }
    
    #brilhos03 {
      width: 3rem;
      height: 3rem;
      margin: -3rem 2rem 4rem 0;
    }
    #estrela{
      width: 3rem;
      height: 3rem;
      margin: -2rem 0 6rem 1.9rem;
    }
    button {
      width: 6rem;
      max-width: 300px;
      font-size: .8rem;
      height: 1.7rem;
      border: .15rem solid #2CA49C;
    }
  
    #clouds {
      margin-top: -10rem;
      aspect-ratio: 15 / 9;
    }
    
    footer > p {
      font-size: 1rem;
      margin: -1.8rem 1rem 0 0;
    }
  }
  @media (max-width: 374px) {
  header {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .container {
      padding: 0;
      margin: 0;
    }
    #foto{
        width: 7rem;
        height: 7rem;
    }
    #brilhos01{
        width: 4rem;
        height: 4rem;
        margin-left: 2rem;
    }
    #lua{
        width: 4rem;
        height: 4rem;
    }
  
    .bioBoard {
        flex-direction: row;
        gap: .5rem;
        margin-top: 1.8rem;
    }
    #bioBoard {
      max-width: 70%;
      font-size: .8rem;
      padding: 2.2rem 2rem 2rem 2rem;
    }
    #brilhos02{
      width: 2.5rem;
      height: 2.5rem;
      margin: 2rem 0 0 1rem;
    }
    #estrela02{
      width: 2rem;
      height: 2rem;
      margin: 3rem .8rem 0 0;
    }
    
    .mainBoard {
      display: flex;
      flex-direction: row;
      gap: .15rem;
      margin-top: -2rem;
    }
    
    #board {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;  
      max-width: 90%;
      margin: 4rem 0 0 -1.2rem;
      padding: 3rem 4rem 3.2rem 3.5rem;
      gap: .4rem;
    }
    
    #brilhos03 {
      width: 3rem;
      height: 3rem;
      margin: 3rem 1rem 4rem 0;
    }
    #estrela{
      width: 3rem;
      height: 3rem;
      margin: 5rem 1.4rem 6rem 1rem;
    }
    button {
      width: 6rem;
      max-width: 300px;
      font-size: .8rem;
      height: 1.7rem;
      border: .15rem solid #2CA49C;
    }
  
    #clouds {
      margin-top: -9rem;
      aspect-ratio: 15 / 9;
    }
    
    footer > p {
      font-size: 1rem;
      margin: -2.2rem 1rem 1rem 0;
    }
  }
  @media (max-width: 320px) {
  header {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .container {
      padding-top: 1rem;
      margin: 0;
    }
    #foto{
        width: 6.5rem;
        height: 6.5rem;
    }
    #brilhos01{
        width: 4rem;
        height: 4rem;
        margin-left: 1rem;
    }
    #lua{
        width: 4rem;
        height: 4rem;
    }
    .bioBoard {
        flex-direction: row;
        gap: 1rem;
        margin-top: -.8rem;
    }
    #bioBoard {
      max-width: 90%;
      font-size: .8rem;
      padding: 3rem 1rem 2.5rem .8rem;
    }
    #brilhos02{
      width: 2.5rem;
      height: 2.5rem;
      margin: 2rem 0 0 1rem;
    }
    #estrela02{
      width: 2rem;
      height: 2rem;
      margin: 3rem .3rem 0 0;
    }
    
    .mainBoard {
      display: flex;
      flex-direction: row;
      gap: .15rem;
      margin-top: 1rem;
    }
    
    #board {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;  
      max-width: 90%;
      margin: -4rem 0 0 .4rem;
      padding: 5rem 3.2rem 5rem 3rem;
      gap: .4rem;
    }
    
    #brilhos03 {
      width: 3rem;
      height: 3rem;
      margin: -1rem 2rem 4rem 0;
    }
    #estrela{
      width: 3rem;
      height: 3rem;
      margin: 1rem 0 6rem 1.9rem;
    }
    button {
      width: 6rem;
      max-width: 300px;
      font-size: .8rem;
      height: 1.7rem;
      border: .15rem solid #2CA49C;
    }
  
    #clouds {
      margin-top: -10rem;
      aspect-ratio: 15 / 9;
    }
    footer > p {
      font-size: 1rem;
      margin: -1.7rem 1rem 0 0;
    }
  }  


/*----------------------------------------------------------------PORTFOLIO----------------------------------------------------------------*/
nav{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.container2{
  padding: 1rem 3rem;
  justify-content: center;
}
.languages img{
  width: 2rem;
  margin-right: .5rem;
}
.menu ul{
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  max-width: 10rem;
  gap: 1rem;
  margin: 3rem;
}
.container2{
  margin: 2rem 3rem;
}
#headerPortfolio{
  display: grid;
  grid-template-columns: 50% 47%;
  gap: 3rem;
  background-color: rgba(219, 255, 237, 0.3);
  padding-bottom: 3rem;
  border-radius: 2rem;
  margin-left: 2rem;
}
.presentation h1{
  font-family: 'Quicksand';
  color: #2CA49C;
  font-size: 6rem;
  font-weight: 700;
  text-shadow: .2rem .2rem .01rem #545454;;
}
.presentation p{
  font-size: 1.6rem;
  color: #2CA49C;
  text-shadow:.1rem .1rem .01rem #545454;
}
#picture{
  max-width: 30rem;
  margin: -5rem 2rem 0 0;
  position: relative;
}
#art{
  position:absolute;
  max-width: 20rem;
  top: 20rem;
  right: 35rem;
}
#curiosity{
  position:absolute;
  max-width: 18rem;
  top: 30rem;
  right: 3.5rem;
}