/* =========================================
   FONT
   ========================================= */

@font-face {
  font-family: 'LacyTheThree';

  src: url(
    'https://file.garden/arkcYFq0FjI2TvF7/lacythethree.ttf'
  ) format('truetype');
}


/* =========================================
   BODY
   ========================================= */

body {

  margin: 0;

  min-height: 100vh;

  display: flex;

  justify-content: center;
  align-items: center;

  font-family: 'LacyTheThree', sans-serif;

  color: #52493c;

  background-image:
    url("https://file.garden/arkcYFq0FjI2TvF7/k02-bg-cloth.gif");

  background-color: #cccccc;

}


/* =========================================
   LANDING PAGE
   ========================================= */

.landing {

  box-sizing: border-box;

  width: 500px;

  max-width: calc(100% - 30px);

  padding: 28px 35px 22px;

  text-align: center;

  background-color: #fffaf4;

  border-image:
    url("https://file.garden/arkcYFq0FjI2TvF7/border.png")
    5 fill round;

  border-style: solid;

  border-width: 5px;

  border-top: 0;

  border-bottom: 0;

  border-radius: 10px;

}


/* =========================================
   TOP DECORATION
   ========================================= */

.top-decoration {

  color: #94a9ba;

  font-size: 12px;

  margin-bottom: 12px;

}


/* =========================================
   HEADER
   ========================================= */

.landing-header {

  display: flex;

  flex-direction: column;

  align-items: center;

}


.landing-gif {

  display: block;

  max-width: 100%;

  margin-bottom: 8px;

}


h1 {

  margin: 4px 0 2px;

  color: #94a9ba;

  font-size: 27px;

  font-weight: normal;

}


.subtitle {

  margin: 0;

  color: #8b8174;

  font-size: 13px;

}


/* =========================================
   MAIN IMAGE
   ========================================= */

.landing-image {

  display: flex;

  justify-content: center;

  margin: 18px 0 14px;

}


.landing-image img {

  width: 125px;

  height: 125px;

  object-fit: cover;

  padding: 3px;

  background-color: #fffaf4;

  border: 1px solid #E9E2D8;

  border-radius: 4px;

}


/* =========================================
   WELCOME
   ========================================= */

.welcome {

  max-width: 350px;

  margin: 0 auto;

  font-size: 13px;

  line-height: 1.45;

}


.welcome p {

  margin: 7px 0;

}


.welcome-title {

  color: #94a9ba;

  font-size: 17px;

  margin-bottom: 9px !important;

}


/* =========================================
   STAMP MARQUEE
   ========================================= */

.stamp-marquee {

  width: 100%;

  height: 31px;

  box-sizing: border-box;

  margin: 16px 0;

  padding: 1px 0;

  overflow: hidden;

  background-color: #fffaf4;

  border-top: 1px dotted #E9E2D8;

  border-bottom: 1px dotted #E9E2D8;

}


.stamp-track {

  display: flex;

  align-items: center;

  width: max-content;

  height: 100%;

  gap: 4px;

  animation: stamp-scroll 20s linear infinite;

}


.stamp-track img {

  display: block;

  width: 88px;

  height: 28px;

  object-fit: contain;

  flex-shrink: 0;

  image-rendering: pixelated;

}


@keyframes stamp-scroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 2px));
  }

}


.stamp-marquee:hover .stamp-track {

  animation-play-state: paused;

}


/* =========================================
   ENTER BUTTON
   ========================================= */

.enter-button {

  display: inline-block;

  margin: 4px 0 14px;

  padding: 7px 18px;

  color: #fffaf4;

  background-color: #94a9ba;

  border: 1px solid #8298a9;

  border-radius: 4px;

  font-family: 'LacyTheThree', sans-serif;

  font-size: 15px;

  text-decoration: none;

  transition: all 0.2s ease;

}


.enter-button:hover {

  color: #52493c;

  background-color: #f5efe8;

  border-color: #E9E2D8;

}


/* =========================================
   SMALL NAVIGATION
   ========================================= */

.landing-links {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  font-size: 12px;

}


.landing-links a {

  color: #94a9ba;

  text-decoration: none;

}


.landing-links a:hover {

  color: #52493c;

}


.landing-links span {

  color: #E9E2D8;

}


/* =========================================
   FOOTER
   ========================================= */

footer {

  margin-top: 20px;

  color: #8b8174;

  font-size: 11px;

}


footer p {

  margin: 4px 0;

}


footer .copyright {

  color: #94a9ba;

  font-size: 12px;

}


/* =========================================
   SELECTION
   ========================================= */

::selection {

  background: #94a9ba;

  color: #ffffff;

}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 520px) {

  .landing {

    width: calc(100% - 30px);

    padding: 22px 20px 18px;

  }


  h1 {

    font-size: 23px;

  }


  .landing-image img {

    width: 105px;

    height: 105px;

  }

}