/* =========================
   Self-hosted Montserrat Fonts
   ========================= */
@font-face {
  font-family: "Montserrat";
  src: url("/Montserrat-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("/Montserrat-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

/* =========================
   Global Styles
   ========================= */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #171925; /* dark background for minimal luxury */
  font-family: "Montserrat", sans-serif;
  font-weight: 300; /* default weight */
  font-size: clamp(12px, 1vw, 16px); /* responsive font size */
  line-height: 1.5;
  overflow: hidden;
}

.more-pens {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
}

a.white-mode,
a.white-mode:link,
a.white-mode:visited,
a.white-mode:active {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 1vw, 14px);
  text-decoration: none;
  background: #212121;
  padding: 4px 8px;
  color: #f7f7f7;
  border-radius: 4px;
  transition: all 0.3s ease;
}

a.white-mode:hover,
a.white-mode:link:hover,
a.white-mode:visited:hover,
a.white-mode:active:hover {
  background: #edf3f8;
  color: #212121;
}

/* =========================
   Title Styles
   ========================= */
.title {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Montserrat", sans-serif;
  text-align: center;
  width: clamp(80%, 60%, 50%);
  padding: 0 10px;
}

.title h1 {
  position: relative;
  color: #FFFFFF;
  font-weight: 300; /* Light */
  font-size: clamp(36px, 6vw, 60px);
  padding: 0;
  margin: 0;
  line-height: 1.1;
}

.title h1 span {
  font-weight: 600; /* SemiBold */
  font-size: clamp(36px, 6vw, 60px);
}

.title h3 {
  font-weight: 200; /* Thin */
  font-size: clamp(14px, 2vw, 20px);
  padding: 0;
  margin: 10px 0 0 0;
  line-height: 1.2;
  color: #FFFFFF;
  letter-spacing: 2px;
}

/* =========================
   Responsive Media Queries
   ========================= */
@media (max-width: 768px) {
  .title {
    width: 90%;
  }
  .title h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
  .title h1 span {
    font-size: clamp(28px, 8vw, 40px);
  }
  .title h3 {
    font-size: clamp(12px, 4vw, 18px);
  }
  a.white-mode {
    font-size: clamp(10px, 3vw, 12px);
    padding: 3px 6px;
  }
}