/* --------------------------
   Fonts
-------------------------- */
@font-face {
  font-family: "Gothic";
  src: url("fonts/Gothic-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Gothic";
  src: url("fonts/Gothic-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "OldEnglish";
  src: url("fonts/OldEnglish.woff2") format("woff2");
}

/* --------------------------
   Reset
-------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --------------------------
   Base Layout
-------------------------- */
html, body {
  height: 100%;
}
body {
  background: #31FF2F;
  color: #000;
  font-family: "Gothic", sans-serif;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --------------------------
   Marquees
-------------------------- */
.marquee {
  flex: 0 0 90px;
  height: 90px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  box-sizing: border-box;
}

.marquee-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: scroll 28s linear infinite;
}

.sep {
  width: 1em;      /* scales with the text size */
  height: 1em;
  vertical-align: middle;
  margin: 0 0.4em;   /* replaces the old space-space around ◆ */
  display: inline-block;
}

.marquee-bottom .marquee-track {
  animation-direction: reverse;
}

/* each span is one identical half of the loop —
   flex-shrink:0 stops them being squashed/wrapped,
   which was the cause of the "gaps and breaks" */
.marquee span {
  flex-shrink: 0;
  font-family: "OldEnglish";
  font-size: 3rem;
  white-space: pre;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "calt" 0;
}

/* -50% = width of exactly one span, since both spans
   contain identical text → loop is seamless */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------
   Main Content Area
-------------------------- */
main {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: 20px;
}

/* Logo sits in the middle grid row → vertically centered
   in main, which (since both marquees are equal height)
   is also dead-center of the full viewport */
.logo {
  grid-row: 2;
  align-self: center;
  width: min(800px, 80vw);
  max-height: 40vh;
  object-fit: contain;
}

/* Info block fills the leftover space below the logo
   and centers itself within it */
.info {
  grid-row: 3;
  align-self: center;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.1px;
  text-align: center;
  max-width: 490px;
}

.info a {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}
.info a:hover {
  opacity: 0.6;
}

/* --------------------------
   Mobile tweaks
-------------------------- */
@media (max-width: 700px) {
  .marquee span {
    font-size: 2rem;
  }
  .info {
    font-size: 0.85rem;
    max-width: 320px;
  }
  main {
    padding: 16px;
  }
}