/* Fonts */
.tomorrow-thin {
  font-family: "Tomorrow", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.tomorrow-extralight {
  font-family: "Tomorrow", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.tomorrow-light {
  font-family: "Tomorrow", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.tomorrow-regular {
  font-family: "Tomorrow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tomorrow-medium {
  font-family: "Tomorrow", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.tomorrow-semibold {
  font-family: "Tomorrow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.tomorrow-bold {
  font-family: "Tomorrow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.tomorrow-extrabold {
  font-family: "Tomorrow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.tomorrow-black {
  font-family: "Tomorrow", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.tomorrow-thin-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.tomorrow-extralight-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.tomorrow-light-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.tomorrow-regular-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.tomorrow-medium-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.tomorrow-semibold-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.tomorrow-bold-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.tomorrow-extrabold-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.tomorrow-black-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* Background */
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  background-image: url("pictures/code-screen-green.jpg");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* IDs from index.html */
#start-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(43, 85, 68, 0.15);
  border: 2px solid #00ff08;
  color: #00ff08;
  font-size: 40px;
  padding: 12px 30px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 3px;
  backdrop-filter: blur(6px);
}

#blinking-text-button {
    animation: blinkFade 3s ease-in-out infinite;
}

@keyframes blinkFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

#text-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline;
  white-space: pre;
  text-align: center;
  color: #00ff08;
  font-size: 32px;
  text-shadow: 0 0 10px #000;
}

#blinking-cursor {
    display: inline-block;
    color: #00ff08;
    animation: blinkCursor 1s step-start infinite;
    opacity: 0;
}

@keyframes blinkCursor {
  50% { opacity: 0; }
}

#continue-button {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(43, 85, 68, 0.15);
    border: 2px solid #00ff08;
    color: #00ff08;
    font-size: 40px;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 3px;
    backdrop-filter: blur(6px);
    opacity: 0;
}

/* IDs from game-instructions.html */
#game-instructions {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00ff08;
    font-size: 32px;
    text-shadow: 0 0 10px #000;
    white-space: pre;
    text-align: center;
    overflow: hidden;
}

#blinking-cursor-instructions {
    display: inline-block;
    color: #00ff08;
    animation: blinkCursor 1s step-start infinite;
    opacity: 0;
}

#start-challenge {
    position: absolute;
    top: 87%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(43, 85, 68, 0.15);
    border: 2px solid #00ff08;
    color: #00ff08;
    font-size: 40px;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 3px;
    backdrop-filter: blur(6px);
    opacity: 0;
}

#blinking-text-button-instructions {
    animation: blinkFade 3s ease-in-out infinite;
}