html {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background-color: #ffffff;
  scroll-behavior: smooth;
}

.header__bg-image {
    background-image: url('../assets/header-img.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 70vh;
}

.header__bg-image__small--modern {
    background-image: url('../assets/grey-building.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
}

.header__bg-image__small--modern-wide {
    background-image: url('../assets/white-modern-house-wide.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
}

.header__bg-image__small--modern-grey {
    background-image: url('../assets/modern-building-grey.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
}

.header__bg-image__small--classic {
    background-image: url('../assets/classic-brown-building.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
}

.header__bg-image__small--classic-windows {
    background-image: url('../assets/classic-brown-house-black-windows.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
}

.header__bg-image__small--modern {
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
}

.header__bg-image__small--long-building {
    background-image: url('../assets/long-brown-building.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
}

.article__bg-image {
    background-image: url('../assets/svg/window.svg');
    background-repeat: no-repeat;
    background-position: top 0 left -9rem;
    background-size: 80%;
}

.article__bg-image--select {
    background-image: url('../assets/svg/window.svg');
    background-repeat: no-repeat;
    background-position: top 5rem left -9rem;
    background-size: 80%;
}

.article__bg-image--reverse {
    background-image: url('../assets/svg/window.svg');
    background-repeat: no-repeat;
    background-position: top 0 right -9rem;
    background-size: 80%;
}

.article__bg-image--down {
    background-image: url('../assets/svg/window.svg');
    background-repeat: no-repeat;
    background-position: bottom -3rem left -9rem;
    background-size: 80%;
}

.footer__bg-image {
    background-image: url('~/assets/footer-img.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.footer__bg-image--window {
    background-image: url('../assets/svg/window.svg');
    background-repeat: no-repeat;
    background-position: top 11rem right -9rem;
    background-size: 80%;
}

.icon {
  height: 14px;
  width: 80px;
  top: 30px;
  background-color: black;
  border-radius: 20px;
  position: absolute;
  transition-duration: 0.5s;
}
.icon:before {
  left: 0;
  position: absolute;
  top: -25px;
  height: 14px;
  width: 80px;
  background-color: black;
  content: '';
  border-radius: 20px;
  transition-duration: 0.5s;
}

.icon:after {
  left: 0;
  position: absolute;
  top: 25px;
  height: 14px;
  width: 80px;
  background-color: black;
  content: '';
  border-radius: 20px;
  transition-duration: 0.5s;
}

.menu {
  width: 80px;
  height: 80px;
  position: relative;
  transition-duration: 1s;
  display: inline-block;
  margin: 40px;
  cursor: pointer;
}

.burger.open .icon {
  background: transparent;
}
.burger.open .icon:before {
  transition: transform 0.5s;
  transform: rotateZ(45deg) translate(15px, 20px);
}

.burger.open .icon:after {
  transition: transform 0.5s;
  transform: rotateZ(-405deg) translate(15px, -20px);
}

.label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  .article__bg-image {
    background-size: auto;
  }

  .article__bg-image--select {
    background-size: auto;
  }

  .article__bg-image--reverse {
    background-size: auto;
  }

  .article__bg-image--down {
    background-size: auto;
  }

  .footer__bg-image--window {
    background-position: top 5rem right -9rem;
    background-size: auto;
  }
}

@media screen and (min-width: 1024px) {
  .header__bg-image {
    height: 85vh;
  }

  .article__bg-image--select {
    background-position: top 9rem left -5rem;
  }
}

@media screen and (min-width: 1440px) {
  .header__bg-image {
    height: 100vh;
  }

  .article__bg-image {
    background-position: top 0 left -5rem;
  }

  .article__bg-image--reverse {
    background-position: top 0 right -5rem;
  }

  .article__bg-image--down {
    background-position: bottom -3rem left -3rem;
  }
}


.bg-red-grey {
    --tw-bg-opacity: 1;
    background-color: rgb(219 96 66 / var(--tw-bg-opacity));
}

.bg-yellow-grey {
    --tw-bg-opacity: 1;
    background-color: rgb(199 189 51 / var(--tw-bg-opacity));
}