*,

*::after,

*::before {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

}



@font-face {

  font-family: "Work Sans";

  src: url("font/WorkSans-Regular.eot");

  src: url("font/WorkSans-Regular.eot?#iefix") format("embedded-opentype"),

    url("font/WorkSans-Regular.woff2") format("woff2"),

    url("font/WorkSans-Regular.woff") format("woff"),

    url("font/WorkSans-Regular.ttf") format("truetype"),

    url("font/WorkSans-Regular.svg#svgWorkSans") format("svg");

  font-weight: 400;

}



@font-face {

  font-family: "Work Sans";

  src: url("font/Wprksans-Bold.eot");

  src: url("font/WorkSans-Bold.eot?#iefix") format("embedded-opentype"),

    url("font/WorkSans-Bold.woff2") format("woff2"),

    url("font/WorkSans-Bold.woff") format("woff"),

    url("font/WorkSans-Bold.ttf") format("truetype"),

    url("font/WorkSans-Bold.svg#svgWorkSans") format("svg");

  font-weight: 700;

}



@keyframes rotation {

  0% {

    transform: translateY(-500px);

  }

  40% {

    transform: translateY(0);

  }

  50% {

    transform: rotate(0deg);

  }

  65% {

    transform: rotate(360deg) scale(1);

  }

  100% {

    transform: rotate(740deg) scale(100);

  }

}



@-webkit-keyframes rotation {

  0% {

    -webkit-transform: translateY(-500px);

  }

  40% {

    -webkit-transform: translateY(0);

  }

  50% {

    -webkit-transform: rotate(0deg);

  }

  65% {

    -webkit-transform: rotate(360deg) scale(1);

  }

  100% {

    -webkit-transform: rotate(740deg) scale(100);

  }

}



/* @-moz-keyframes rotation {

  0% {

    -moz-transform: translateY(-500px);

  }

  40% {

    -moz-transform: translateY(0);

  }

  50% {

    -moz-transform: rotate(0deg);

  }

  65% {

    -moz-transform: rotate(360deg) scale(1);

  }

  100% {

    -moz-transform: rotate(740deg) scale(100);

  }

}



@-ms-keyframes rotation {

  0% {

    -ms-transform: translateY(-500px);

  }

  40% {

    -ms-transform: translateY(0);

  }

  50% {

    -ms-transform: rotate(0deg);

  }

  65% {

    -ms-transform: rotate(360deg) scale(1);

  }

  100% {

    -ms-transform: rotate(740deg) scale(100);

  }

}



@-o-keyframes rotation {

  0% {

    -o-transform: translateY(-500px);

  }

  40% {

    -o-transform: translateY(0);

  }

  50% {

    -o-transform: rotate(0deg);

  }

  65% {

    -o-transform: rotate(360deg) scale(1);

  }

  100% {

    -o-transform: rotate(740deg) scale(100);

  }

} */



@keyframes loderotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}



.body {

  font-family: "Work Sans", sans-serif;

  font-weight: 400;

  color: #000000;

  background-color: #ece001;

  overflow: hidden;

}



.body.scroll {

  overflow: visible;

}



/* _____________INTRO-ANIMATION_____________ */



.first-animation {

  background-color: #000000;

  position: relative;

  height: 100vh;

  width: 100%;

  margin: 0 auto;

  z-index: 2;

  display: none;

  overflow: hidden;

}



.first-animation.show {

  display: inline-block;

}



.first-animation__img {

  position: absolute;

  inset: 0;

  margin: auto;

  width: 100px;

  height: 100px;

}



.first-animation__img.animated {

  animation: rotation 4s forwards cubic-bezier(0.7, 0.14, 0.38, 1.19);

}



.second-animation {

  position: fixed;

  z-index: 1;

  left: 0;

  top: 0;

  width: 100%;

  height: 100vh;

  background-color: #ece001;

  transition: 1s;

  overflow: hidden;

}



.second-animation.up {

  transform: translateY(-100vh);

}



.second-animation.none {

  display: none;

}



.second-animation__h1 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: #000000;

  font-size: 100px;

  text-align: center;

}



.h1 {

  position: relative;

  display: inline-block;

  opacity: 0;

}



.h1.active {

  bottom: 0;

  opacity: 1;

  transition: ease-in-out 0.5s;

}



.h1.fade {

  bottom: 150px;

  opacity: 0;

  transition: ease-in-out 0.5s;

}



.bold {

  font-weight: 700;

}



/* _____________MAIN_____________ */



.main {

  display: flex;

  flex-direction: column;

  position: relative;

  color: #000000;

  height: 100vh;

  width: 100%;

}



header {

  width: 100%;

  display: flex;

  padding: 0.5rem 2rem;

  margin: auto;

}



.header__logo {

  display: inline-block;

  margin-right: auto;

  width: 40px;

}



.main__text {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  flex-basis: 90%;

  gap: 1em;

  color: #000000;

}



h1 {

  font-size: 100px;

  font-weight: 400;

  text-align: center;

}



.main__logo-rotate {

  animation: loderotation 2s infinite linear;

  width: 50px;

  height: 50px;

}



/* _____________FOOTER_____________ */



footer {

  display: inline-flex;

  align-items: center;

  gap: 0.5em 2em;

  width: 100%;

  margin: 0 auto;

  padding: 0.5rem 2rem;

  font-size: 14px;

}



.footer__right {

  display: flex;

  align-items: center;

  gap: 0.5em;

}



.footer__logo-img {

  display: inline-block;

  width: 30px;

  height: 30px;

}



.footer__contact {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 2em;

  padding: 0.5em 1em;

  border-radius: 0.5em;

}



.contact__insta {

  background-image: url(img/instagram-black.svg);

}



.contact__mail {

  background-image: url(img/mail-black.svg);

}



.contact__insta,

.contact__mail {

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  width: 25px;

  height: 25px;

  cursor: pointer;

  transition: transform 0.2s;

}



.contact__mail:hover,

.contact__insta:hover {

  transform: scale(1.5);

}



.footer__left {

  display: inline-flex;

  margin-left: auto;

  gap: 0.5em 2em;

}



.copyright {

  min-width: max-content;

}



@media (max-width: 700px) {

  h1 {

    font-size: 60px;

  }



  .second-animation__h1 {

    font-size: 55px;

  }



  footer {

    flex-direction: column;

    padding-left: 0;

    padding-right: 0;

    justify-content: center;

  }



  .footer__left {

    flex-direction: column;

    text-align: center;

    margin-left: unset;

  }

}