@font-face {
  font-family: "kulbaskervilleregular";

  src:
    url("../font/kulbaskerville-webfont.woff2") format("woff2"),
    url("../font/kulbaskerville-webfont.woff") format("woff");

  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  background: black;
  color: white;

  overflow-x: hidden;

  font-family: "kulbaskervilleregular";
}

/* =========================
   GLOBAL TYPO
========================= */

h1 {
  font-size: clamp(24px, 5vw, 42px);

  letter-spacing: clamp(2px, 1vw, 12px);

  line-height: 1.4;

  margin: 4vw 4vw 2vw;
}

h2 {
  font-size: clamp(10px, 1.5vw, 14px);

  letter-spacing: clamp(1px, 0.3vw, 3px);

  line-height: 1.8;

  margin: 0 4vw 5vw;

  color: white;

  word-break: break-word;
}

h3 {
  font-size: clamp(12px, 2vw, 18px);

  letter-spacing: clamp(1px, 0.5vw, 4px);

  line-height: 1.6;

  margin: 0 4vw 3vw;

  color: rgb(50, 90, 255);
}

/* =========================
   IMAGES
========================= */

.roof-image {
  width: 100%;

  height: auto;

  display: block;

  margin-top: 3vw;

  object-fit: cover;

  transition: 0.3s ease;
}

/* =========================
   DESKTOP
========================= */

@media screen and (min-width: 1000px) {
  body {
    max-width: 1600px;

    margin: auto;
  }

  .roof-image {
    max-height: 95vh;
  }
}

/* =========================
   MOBILE
========================= */

@media screen and (max-width: 768px) {
  h1 {
    margin-top: 8vw;

    line-height: 1.3;
  }

  h2 {
    line-height: 1.9;

    font-size: 10px;
  }

  h3 {
    font-size: 11px;
  }

  .roof-image {
    margin-top: 6vw;
  }
}