@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200&display=swap');

html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.construction-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-image: url(/assets/images/a9b37c87-b7f5-47a2-8a18-51385d1a6df0.webp);
  background-position: center;
}

.construction {
  width: calc(100vw - 8px);
  height: calc(100vh - 8px);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14pt;
}

.title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5em;
  text-align: center;
  text-shadow: -3px 3px 2px white,
                3px 3px 2px white,
                3px -3px 2px white,
               -3px -3px 2px white;
}

.desc {
  font-family: "Roboto Slab", serif;
  font-size: 1em;
  color: black;
  background-color: #fffa;
  padding: 0.5em 0.5em;
}

@media screen and (orientation: landscape) and (max-width: 900px) {
  .centered { width: calc(100vw - 6em);  }
}

@media screen and (orientation: landscape) and (min-width: 900px) {
  .centered { width: 80vw; font-size: 16pt; }
}

@media screen and (orientation: landscape) and (min-width: 1100px) {
  .centered { width: 75vw; font-size: 24pt; }
}

@media screen and (orientation: landscape) and (min-width: 1400px) {
  .centered { width: 70vw; font-size: 32pt; }
}

@media screen and (orientation: portrait) and (max-width: 380px) {
  .centered { width: 80vw; font-size: 8pt; }
}

@media screen and (orientation: portrait) and (min-width: 380px) {
  .centered { width: 80vw;  }
}

@media screen and (orientation: portrait) and (min-width: 470px) {
  .centered { width: 80vw; font-size: 16pt; }
}