@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;
}

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

  src:
    url("../font2/kulblackletter-webfont.woff2") format("woff2"),
    url("../font2/kulblackletter-webfont.woff") format("woff");

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

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

* {
  box-sizing: border-box;
}

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

  background: black;

  overflow-x: hidden;
}

/* =========================
   IMAGE WRAPPER
========================= */

.image {
  width: 100%;

  display: flex;
  justify-content: center;

  margin: 0;
}

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

#end,
#logo,
#logo2 {
  display: block;

  max-width: 100%;

  height: auto;
}

/* =========================
   LOGO
========================= */

#logo {
  width: min(220px, 55vw);

  margin-top: 12vh;
  margin-bottom: 4vh;
}

/* =========================
   TITLE IMAGE
========================= */

#logo2 {
  width: min(700px, 92vw);

  margin-bottom: 10vh;
}

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

#end {
  width: 100%;

  margin: 0;

  object-fit: cover;
}

/* =========================
   TEXT
========================= */

p {
  color: white;

  font-family: "kulblackletter";

  letter-spacing: 2px;

  line-height: 1.6;

  margin: 40px 5vw 80px;

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

/* =========================
   POPUP BUTTON
========================= */

.popup {
  position: relative;

  display: inline-block;

  cursor: pointer;

  color: white;

  margin: 5vh 5vw;

  font-family: "kulblackletter";

  letter-spacing: 3px;

  font-size: clamp(14px, 2vw, 22px);
}

/* =========================
   POPUP CONTENT
========================= */

.popup .popuptext {
  visibility: hidden;

  width: min(92vw, 700px);

  background: black;

  border: 1px solid white;

  color: white;

  font-family: "kulblackletter";

  letter-spacing: 2px;

  line-height: 1.6;

  text-align: left;

  padding: 20px;

  position: absolute;

  left: 0;
  top: 120%;

  z-index: 999;
}

/* popup visible */

.popup .show {
  visibility: visible;

  animation: fadeIn 0.4s ease;
}

/* =========================
   FADE
========================= */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media screen and (max-width: 768px) {
  #logo {
    width: 150px;

    margin-top: 8vh;
  }

  #logo2 {
    width: 85vw;

    margin-bottom: 6vh;
  }

  .popup {
    margin: 4vh 4vw;
  }

  .popup .popuptext {
    width: 90vw;

    font-size: 13px;

    padding: 16px;
  }

  p {
    letter-spacing: 1px;
  }
}