/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #000000;

  /* Metallic foil layer + textured background */
  background-image:
    linear-gradient(
      120deg,
      rgba(255, 190, 0, 0.09),
      rgba(0, 255, 220, 0.12),
      rgba(255, 100, 0, 0.10),
      rgba(255, 215, 0, 0.09)
    ),
    url("img/DarkBG.png");

  background-repeat: repeat;
  background-size: 180% 180%, cover;
  background-position: 0% 50%, center 0;

  /* Slow foil / texture movement */
  animation: foil-background 18s ease-in-out infinite alternate;

  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;

  margin: 0;
  padding: 50px 0 30px;
}


/* =========================
   BACKGROUND FOIL MOVEMENT
   ========================= */

@keyframes foil-background {
  from {
    background-position:
      0% 50%,
      center 0;
  }

  to {
    background-position:
      100% 50%,
      center 150px;
  }
}


/* =========================
   GENERAL
   ========================= */

h2 {
  letter-spacing: 3px;
}


.mt-5 {
  margin-top: 30px !important;
}


p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 8px;
}


img {
  max-width: 90%;
  height: auto;
}


/* General spacing between centered elements */
center > * {
  margin-top: 8px;
  margin-bottom: 8px;
}


.pixel-text {
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;

  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.8),
    0 0 6px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(255, 255, 255, 0.3);
}


/* =========================
   IMAGE BUTTONS
   ========================= */

.button-row {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 12px;

  width: 100%;
  box-sizing: border-box;
}


.image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 200px;
  height: 60px;

  background-image: url("img/buttons.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;

  text-decoration: none;
  text-transform: uppercase;

  /* Old-school double border */
  border: 3px double #ffffff;
  border-radius: 0;

  box-sizing: border-box;
  cursor: pointer;

  transition:
    filter 0.2s ease,
    border-color 0.2s ease;
}


.image-button:hover {
  filter: brightness(1.25);
  border-color: #ffffff;
}


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

@media screen and (max-width: 600px) {

  body {
    margin: 0;
    padding: 5px 0;
    box-sizing: border-box;
  }


  /*
     Homepage only.
     Prevents the blog and guestbook from inheriting
     the full-screen flex layout.
  */

  .home-page {
    min-height: 100svh;
  }


  .home-page center {
    min-height: calc(100svh - 10px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    transform: translateY(15px);
  }


  .home-page center > * {
    margin: 0;
  }


  .pixel-text {
    font-size: 11px;
    line-height: 1.5;

    margin-left: 10px;
    margin-right: 10px;

    text-shadow: none;
  }


  p {
    font-size: 13px;
    line-height: 1.4;
  }


  /* THE MEDIUM LOGO */

  img[alt="The Medium Comic Logo"] {
    width: 210px;
  }


  /* HOMEPAGE COMIC IMAGE */

  img[alt="The Medium Comic"] {
    width: 175px;
  }


  /* COMING SOON */

  img[alt="Coming Soon"] {
    width: 130px;
  }


  /* KICKSTARTER */

  img[alt="Kickstarter"] {
    width: 165px;
  }


  /* INSTAGRAM */

  img[alt="Instagram"] {
    width: 24px;
  }


  /* IMAGE BUTTONS */

  .button-row {
    gap: 8px;
    padding: 0 10px;
  }


  .image-button {
    width: 145px;
    height: 48px;

    font-family: "Space Grotesk", sans-serif !important;
    font-size: 13px;
    font-weight: 700;

    border: 3px double #ffffff;
  }
}


/* =========================
   GUESTBOOK
   ========================= */

.guestbook-box {
  width: 520px;
  max-width: 88%;

  background: #2f2f2f;

  border: 2px solid #8a8a8a;

  padding: 18px;
  margin: 18px auto;

  box-sizing: border-box;

  text-align: left;

  font-family: "Space Grotesk", sans-serif;
}


/* GUESTBOOK HEADINGS */

h2.guestbook-box,
h3.guestbook-box {
  font-family: "Space Grotesk", monospace;

  font-size: 13px;
  line-height: 1.6;

  text-align: center;

  letter-spacing: 1px;

  background: #1b1b1b;

  border: 3px double #ffffff;

  padding: 12px;
}


/* LABELS */

.guestbook-box label {
  display: block;

  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;

  margin-bottom: 5px;
}


/* INPUTS */

.guestbook-box input,
.guestbook-box textarea {
  width: 100%;

  box-sizing: border-box;

  background: #171717;
  color: #ffffff;

  border: 1px solid #777777;

  padding: 9px;

  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;

  outline: none;
}


/* INPUT PLACEHOLDER */

.guestbook-box input::placeholder,
.guestbook-box textarea::placeholder {
  color: #888888;
}


/* INPUT FOCUS */

.guestbook-box input:focus,
.guestbook-box textarea:focus {
  border-color: #ffffff;

  box-shadow:
    0 0 3px rgba(255, 255, 255, 0.5);
}


/* SUBMIT BUTTON */

.guestbook-box button {
  background: #171717;
  color: #ffffff;

  border: 2px solid #888888;

  padding: 8px 14px;

  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}


.guestbook-box button:hover {
  background: #ffffff;
  color: #000000;

  border-color: #ffffff;
}


/* =========================
   GUESTBOOK MESSAGES
   ========================= */

.guestbook-entry {
  width: 520px;
  max-width: 88%;

  background: #2f2f2f;

  border: 1px solid #777777;

  padding: 12px;
  margin: 12px auto;

  box-sizing: border-box;

  text-align: left;

  font-family: "Space Grotesk", sans-serif;
}


/* NAME + DATE ROW */

.guestbook-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 15px;

  margin-bottom: 8px;
}


.guestbook-entry strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 700;
}


.guestbook-entry-date {
  font-size: 12px;
  color: #dddddd;
}


/* MESSAGE */

.guestbook-entry p {
  margin: 8px 0 0;

  font-size: 14px;
  line-height: 1.5;
}


/* OPTIONAL WEBSITE */

.guestbook-entry-site {
  border-left: 3px solid #888888;

  padding-left: 10px;
  margin: 6px 0 10px;

  font-size: 13px;
}


.guestbook-entry-site a {
  color: #ffffff;
}


/* =========================
   GUESTBOOK NAV / PAGINATION
   ========================= */

.guestbook-pagination {
  width: 520px;
  max-width: 88%;

  margin: 15px auto;

  display: flex;
  justify-content: space-between;

  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
}


.guestbook-pagination a {
  color: #ffffff;
}


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

@media screen and (max-width: 600px) {

  .guestbook-box,
  .guestbook-entry,
  .guestbook-pagination {
    width: 92%;
    max-width: 92%;
  }


  h2.guestbook-box,
  h3.guestbook-box {
    font-size: 9px;
  }


  .guestbook-entry-header {
    flex-direction: column;
    align-items: flex-start;

    gap: 2px;
  }


  .guestbook-entry-date {
    font-size: 11px;
  }


  .guestbook-box input,
  .guestbook-box textarea {
    font-size: 13px;
  }

}
/* =========================
   BLOG LANDING PAGE
   ========================= */

.blog-heading {
  font-family: "Space Grotesk", sans-serif;
  text-align: center;

  font-size: 28px;
  letter-spacing: 2px;
}


.blog-list {
  width: 600px;
  max-width: 85%;

  margin: 20px auto;
}


.blog-post {
  font-family: "Space Grotesk", sans-serif;
  text-align: left;

  padding: 20px 0;

  border-bottom: 1px dashed #ffffff;
}


.blog-post:first-child {
  border-top: 1px dashed #ffffff;
}


.blog-date {
  font-family: "Space Grotesk", sans-serif;

  font-size: 11px;
  letter-spacing: 1px;

  margin-bottom: 5px;
}


.blog-title {
  font-family: "Space Grotesk", sans-serif;

  font-size: 22px;

  margin: 5px 0 10px;
}


.blog-title a {
  color: #ffffff;
  text-decoration: none;
}


.blog-title a:hover {
  text-decoration: underline;
}


.blog-post p {
  font-family: "Space Grotesk", sans-serif;

  font-size: 16px;
  line-height: 1.6;

  margin: 10px 0;
}


.read-more {
  font-family: "Space Grotesk", sans-serif;

  font-size: 13px;
  font-weight: 700;

  color: #ffffff;
}


.blog-home {
  font-family: "Space Grotesk", sans-serif;

  font-size: 13px;

  margin-top: 30px;
}


.blog-home a {
  color: #ffffff;
}


/* =========================
   RETRO BLOG POST WINDOW
   ========================= */

.retro-post {
  width: 900px;
  max-width: 88%;

  margin: 25px auto;

  border: 4px double #ffffff;

  background: rgba(0, 0, 0, 0.88);

  padding: 0 25px 30px;

  box-sizing: border-box;

  text-align: left;
}


/* =========================
   BLOG POST HEADER
   ========================= */

.retro-post-bar {
  font-family: "Space Grotesk", monospace;

  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 2px;

  border-bottom: 2px solid #ffffff;

  padding: 18px 5px 15px;
  margin-bottom: 12px;
}


.retro-icon {
  margin-right: 8px;
}


/* DATE */

.retro-post .post-date {
  font-family: "Space Grotesk", monospace;

  font-size: 8px;

  margin: 15px 0 18px;
}


/* =========================
   BLOG POST INTRO
   ========================= */

.post-intro {
  display: flex;
  align-items: flex-start;

  gap: 22px;

  margin-bottom: 15px;
}


.post-profile {
  width: 170px;
  flex: 0 0 170px;

  border: 2px solid #ffffff;

  box-sizing: border-box;
}


.post-profile img {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin: 0;
}


.post-profile-label {
  border-top: 1px solid #ffffff;

  padding: 7px 5px;

  font-family: "Space Grotesk", monospace;
  font-size: 8px;

  text-align: center;
}


.post-intro-copy {
  flex: 1;
}


/* =========================
   BLOG ARTICLE COPY
   ========================= */

.post-intro-copy p,
.post-content p {
  font-family: "Space Grotesk", sans-serif;

  font-size: 16px;
  line-height: 1.7;

  margin-top: 0;
  margin-bottom: 18px;
}


.post-content {
  width: 100%;
}


/* RETRO DIVIDER */

.post-content::before {
  content: "------------------------------------------------------------";

  display: block;

  font-family: "Space Grotesk", monospace;
  font-size: 7px;

  white-space: nowrap;
  overflow: hidden;

  margin: 18px 0 22px;
}


/* =========================
   BLOG SIGN OFF
   ========================= */

.post-signoff {
  margin-top: 30px;

  border-top: 1px dashed #ffffff;

  padding-top: 20px;
}


/* =========================
   BACK TO BLOG
   ========================= */

.post-nav {
  margin: 25px 0;

  font-family: "Space Grotesk", monospace;
  font-size: 9px;
}


.post-nav a {
  color: #ffffff;
  text-decoration: none;
}


.post-nav a:hover {
  text-decoration: underline;
}


/* =========================
   MOBILE BLOG POST
   ========================= */

@media screen and (max-width: 600px) {

  .retro-post {
    width: 92%;
    max-width: 92%;

    margin: 20px auto;

    padding: 0 15px 22px;

    border: 3px double #ffffff;
  }


  .retro-post-bar {
    font-size: 10px;
    line-height: 1.7;

    padding: 14px 2px 12px;
  }


  .retro-post .post-date {
    font-size: 7px;
  }


  .post-intro {
    flex-direction: column;
    align-items: center;

    gap: 12px;
  }


  .post-profile {
    width: 135px;

    flex: none;
  }


  .post-profile-label {
    font-size: 7px;
  }


  .post-intro-copy {
    width: 100%;
  }


  .post-intro-copy p,
  .post-content p {
    font-size: 14px;
    line-height: 1.6;
  }


  .post-content::before {
    font-size: 5px;
  }


  .post-nav {
    font-size: 7px;
    margin-bottom: 20px;
  }
}

/* =========================
   SECRET HOTSPOT
   ========================= */

.cutscene-area {
  position: relative;
  display: inline-block;
}

.secret-hotspot {
  position: absolute;

  /* Adjust these to move the secret */
  right: -35px;
  top: 62%;

  width: 40px;
  height: 40px;

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

  text-decoration: none;
  cursor: default;
}


/* Favicon is hidden normally */
.secret-hotspot img {
  width: 28px;
  height: 28px;
  object-fit: contain;

  opacity: 0;

  transition:
    opacity 0.15s ease,
    filter 0.15s ease,
    transform 0.15s ease;
}


/* Reveal favicon when secret area is found */
.secret-hotspot:hover img {
  opacity: 1;

  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.5));

  transform: scale(1.1);
}


/* Pointer only appears once they're over the secret */
.secret-hotspot:hover {
  cursor: pointer;
}


/* Desktop-only secret */
@media screen and (max-width: 600px) {
  .secret-hotspot {
    display: none;
  }
}

.home-page center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-page center > a {
  display: block;
}

.cutscene-area {
  position: relative;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.secret-hotspot:hover img {
  opacity: 1;
  animation: secret-flicker 0.4s steps(2);
}

@keyframes secret-flicker {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  35%  { opacity: 0; }
  50%  { opacity: 1; }
  70%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* =========================
   TERMINAL PAGE
   ========================= */

.terminal-page {
  background: #000000;
  color: #00ff66;

  margin: 0;
  padding: 0;

  min-height: 100vh;

  font-family: "VT323", monospace;
}


.terminal-screen {
  width: 800px;
  max-width: 85%;

  margin: 0 auto;
  padding: 70px 20px;

  box-sizing: border-box;

  text-align: left;

  cursor: pointer;
}


.terminal-start {
  font-size: 28px;
  letter-spacing: 3px;

  text-align: center;

  color: #00ff66;

  text-shadow:
    0 0 4px rgba(0, 255, 102, 0.8),
    0 0 10px rgba(0, 255, 102, 0.4);

  animation: terminal-blink 1s steps(2) infinite;
}


.terminal-copy {
  white-space: pre-wrap;

  font-size: 24px;
  line-height: 1.45;

  color: #00ff66;

  text-shadow:
    0 0 3px rgba(0, 255, 102, 0.7),
    0 0 8px rgba(0, 255, 102, 0.25);
}


@keyframes terminal-blink {
  50% {
    opacity: 0.3;
  }
}


/* MOBILE */

@media screen and (max-width: 600px) {

  .terminal-screen {
    width: 90%;
    max-width: 90%;

    padding: 40px 5px;
  }


  .terminal-start {
    font-size: 20px;
  }


  .terminal-copy {
    font-size: 20px;
    line-height: 1.4;
  }

}