* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  --gray: #8c8c8c;
  --orange: #ff9b00;
  --blue: #00006a;
}

@font-face {
  font-family: "Recoleta-Bold";
  src: local(Recoleta-Bold), url(../fonts/Recoleta-Bold.ttf);
}

@font-face {
  font-family: "Montserrat-Bold";
  src: local(Montserrat-Bold), url(../fonts/Montserrat-Bold.ttf);
}

@font-face {
  font-family: "Montserrat-Regular";
  src: local(Montserrat-Regular), url(../fonts/Montserrat-Regular.ttf);
}

@font-face {
  font-family: "Montserrat-SemiBold";
  src: local(Montserrat-SemiBold), url(../fonts/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: "Montserrat-Light";
  src: local(Montserrat-Light), url(../fonts/Montserrat-Light.ttf);
}

@font-face {
  font-family: "Montserrat-Medium";
  src: local(Montserrat-Medium), url(../fonts/Montserrat-Medium.ttf);
}

body {
  font-family: "Montserrat", sans-serif;
}

main {
  margin-top: 10rem;
}

main h1 {
  color: var(--blue);
  font-family: "Recoleta-Bold";
  font-size: 4.5em;
}

#construction {
  display: flex;
  justify-content: center;
  margin-left: 2rem;
}

#construction-img {
  width: 40%;
}

#construction div {
  width: 50%;
  margin-left: 5rem;
}

.btn {
  color: var(--orange);
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 2rem;
}

.btn img {
  margin-left: 5px;
}

@media (max-width: 999px) {
  main h1 {
    font-size: 4em;
  }

  #construction {
    flex-direction: column;
  }

  #construction div {
    width: 100%;
    margin-left: 0rem;
  }
}

@media (max-width: 760px) {
  main {
    text-align: center;
  }

  main h1 {
    font-size: 2em;
    text-align: center;
    width: 80%;
    margin-left: 2rem;
    margin-top: 2rem;
  }

  #construction {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 0;
  }

  #construction div {
    width: 100%;
    margin-left: 0rem;
    align-items: center;
    justify-content: center;
  }

  #construction-img {
    width: 90%;
  }

  .btn {
    justify-content: center;
  }
}
