*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



:root{

  font-size: 62.5%;

}



body{

  width: 100vw;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: green;

  background: url(./images/fundo.png) no-repeat;

  background-size: cover;

  margin: 0 auto;

}



.container{

  width: 100%;

  max-width: 100rem;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  position: relative;

  margin-top: 20rem;

  padding: 0 3rem;

}



@keyframes opacity{
  0%{
    opacity: 0;
    transform: scale(1.1);
  }

  100%{
    opacity: 1;
    transform: scale(1);
  }
}



.container-links{

  display: flex;

}



.column-links{

  display: flex;

  flex-direction: column;

  height: 30rem;

}

.column-links--left, .column-links--right{
  
  animation-name: opacity_redes;

  animation-duration: 4s;

  transition: 1s;

  padding-top: -100vh;

}

@keyframes opacity_redes{
  0%{
    opacity: 0;
  }

  50%{
    opacity: 0;
    margin-top: -10vm;
  }

  100%{
    margin-top: 0vm;
    opacity: 1;
  }

}


.column-links--left a:nth-child(2){

  margin-left: 10rem;

}

.column-links--left a:nth-child(3){

  margin-left: 20rem;

}



.column-links--right{

  align-items: flex-end;

}



.column-links--right a:nth-child(2){

  margin-right: 10rem ;

}

.column-links--right a:nth-child(3){

  margin-right: 20rem ;

}



/* 924x831 */



.logo{

  width: 40rem;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 10rem;

  position: absolute;

  left: calc(50% - 40rem/2);

  
  animation-name: opacity;

  animation-duration: 3s;

  transition: 1s;


}



.logo--img{

  width: 100%;

}



.social-links img{

  width: 10rem;

}

.social-links img:hover{

  transform: scale(1.1);

}





@media screen and (max-width: 850px){

  .container{

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0;

    margin-top: 0;

  }

  .logo{

    position: initial;

    height: 40rem;

    margin: 0;

  }

  .column-links{

    flex-direction: row;

    height: initial;

    gap: 1rem;

    padding: 1rem;

  }

  .column-links--left a:nth-child(2),

  .column-links--left a:nth-child(3),

  .column-links--right a:nth-child(2),

  .column-links--right a:nth-child(3){

    margin-left: 0;

    margin-right: 0;

  }

}



@media screen and (max-width: 430px){

  .logo{

    width: 32rem;

  }



  .social-links img{

    width: 8rem;

  }

}