body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Copperplate', sans-serif;
    background-color: black;
    transition: background-color 5s ease;
}

:root {
    font-size: 3vh;
    height: 100vh;
    /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    cursor: url('CursorStan.svg'), url('StanC2.svg'), default;
    --breathing-color1: #000000;
    --breathing-color2: #ffffff;
}

#main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: white;
    font-family: 'Copperplate', sans-serif;
}

#animationCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* This places the canvas behind other content */
}

@font-face {
    font-family: League Gothic;
    src: url('LeagueGothic-Regular.otf');
}

#loadingScreen {
    height: 100vh;
    /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    overflow: hidden;
    white-space: nowrap;
    left: 0;
    top: 0;
    width: 100vw;
    background-color: black;
    transition: transform 2s ease;
    z-index: 100;
    /* Ensure this is higher than other elements */
}

.movingText {
    position: fixed;
    bottom: 1vmin;
    margin: 0;
    font-size: 8vh;
    font-family: 'League Gothic';
    color: #404040;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
    /* Start from the left edge of the screen */
    animation: slide 10s linear infinite;
}

.white-text {
    color: white;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

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

@keyframes breathingBackground {
    0% {
      background-color: var(--breathing-color1);
    }
    50% {
      background-color: var(--breathing-color2);
    }
    100% {
      background-color: var(--breathing-color1);
    }
  }
  
  .breathing-effect {
    animation: breathingBackground 5s infinite alternate;
  }

.hidden {
    display: none;
}

.title-line {
    display: flex;
    align-items: baseline;
    font-family: 'Copperplate', sans-serif;
}

.small-font {
    font-size: 14vmin;
    /* Adjust values as needed */
    letter-spacing: 0.8vmin;
    margin-left: 2.4vmin;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'League Gothic';
}

.large-font {
    font-size: 29.5vmin;
    /* Adjust values as needed */
    margin-right: 0px;
    margin-left: 0.8vmin;
    margin-bottom: 0px;
    margin-top: 0px;
    letter-spacing: 0.8vmin;
    font-family: 'League Gothic';
}

.subtitle {
    font-size: 34.5vmin;
    /* Adjust values as needed */
    margin-top: calc(-1vmin * 12);
    /* Adjust value to scale with screen size */
    margin-bottom: 0px;
    letter-spacing: 0.8vmin;
    font-family: 'League Gothic';
}

#play-button {
    padding: 2vmin 2.6vmin;
    font-size: 6vmin;
    cursor: pointer;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 2vmin;
    margin-top: 1vmin;
    transition: background-color 1s;
    font-family: 'Copperplate', sans-serif;
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

#play-button:hover {
    transition: background-color 1s;
    background-color: #585858;
}

#contribution-message {
    position: fixed;
    bottom: 0px;
    right: 0px;
    margin: 1vmin;
    color: #999;
    /* Adjust the color as needed */
    font-family: 'Copperplate', sans-serif;
    font-size: 3vmin;
}

#unmuteButton {
    position: fixed;
    top: 6px;
    /* Adjust as needed */
    left: 0px;
    /* Adjust as needed */
    margin: 1vmin;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 6vmin;
    /* Adjust size as needed */
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

#toggleCredits {
    position: fixed;
    bottom: 1.6vmin;
    left: 1vmin;
    padding: 0.5vmin 0.8vmin;
    font-size: 2vmin;
    cursor: pointer;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 0.4vmin;
    transition: background-color 0.5s;
    font-family: 'Copperplate', sans-serif;
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

#toggleCredits:hover {
    transition: background-color 0.5s;
    background-color: #585858;
}

#creditsContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: none;
    text-align: center;
}

#credits {
    color: white;
    font-size: 5vmin;
    white-space: pre-wrap;
    /* Allows text to wrap and respects whitespace */
    overflow-wrap: break-word;
    /* Ensures long words do not overflow */
    font-family: 'Copperplate', sans-serif;
    width: 100%;
    position: absolute;
}

#choices-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vmin;
    /* Space between buttons */
}

.choice-button {
    cursor: pointer;
    padding: 1vmin 1.2vmin;
    margin: 0;
    /* Adjust spacing around buttons */
    margin-top: 4vmin;
    margin-right: 1.5vmin;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 1vmin;
    transition: background-color 0.3s;
    font-size: 3.5vmin;
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

.choice-button:hover {
    background-color: #585858;
}

#chapter-select-icon {
    cursor: pointer;
    position: fixed;
    top: 2vmin;
    right: 2vmin;
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

.bar {
    width: 6vmin;
    height: 1vmin;
    background-color: white;
}

#chapter-select-menu {
    display: none;
    flex-direction: column;
    /* Align children vertically */
    justify-content: center;
    /* Center children vertically */
    align-items: center;
    /* Center children horizontally */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 100;
    box-sizing: border-box;
    padding: 20px;
    /* Add padding to prevent content from touching the edges */
}

#chapter-select-title {
    color: white;
    /* Adjust color as needed */
    font-size: 8vmin;
    /* Adjust font size as needed */
    text-align: center;
    /* Center the title text */
    font-family: League Gothic;
    letter-spacing: 1px;
    /* Increase space between letters */
    line-height: 1;
    /* Less space between lines of text */
    margin-top: 2px;
    /* Reduce space below the element, if needed */
    margin-bottom: 4px;
    /* Reduce space below the element, if needed */
}

#chapter-list {
    list-style-type: none;
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Center the list in the flex container */
    width: auto;
    /* Adjust width based on content */
    text-align: center;
    /* Center text for each item */
    max-height: 80%;
    /* Adjust based on your needs */
    overflow-y: auto;
    /* Enables vertical scrolling */
    scrollbar-width: none;
}

#chapter-list button {
    display: block;
    width: 60vmin;
    /* Adjust to content size or set a max-width */
    margin: 0px auto;
    /* Add auto margin to horizontally center */
    margin-bottom: 1vmin;
    padding: 1vmin 1.2vmin;
    font-size: 3.5vmin;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 0.7vmin;
    color: white;
    background-color: #2C2C2C;
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

#chapter-list button:hover {
    color: black;
    background-color: #f5f5f5;
}

#close-chapter-select {
    cursor: pointer;
    position: fixed;
    top: 2vmin;
    right: 2vmin;
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

#reset-game {
    position: fixed;
    bottom: 1.6vmin;
    right: 0vmin;
    background-color: transparent;
    margin: 0;
    border: none;
    font-size: 6vmin;
    cursor: pointer;
    color: #3498db;
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

#codeEntryText {
    font-size: 3.5vmin;
    color: white;
    margin: 0 auto 1vmin auto;
    text-align: center;
}

#codeSubmitButton {
    padding: 0.5vmin 0.8vmin;
    font-size: 3.5vmin;
    background-color: #3498db;
    /* Button color */
    color: white;
    /* Text color */
    border: none;
    border-radius: 1vmin;
    cursor: pointer;
    transition: background-color 0.3s ease;

    /* Positioning */
    display: block;
    /* Replace with 'flex' or 'inline-block' if needed */
    margin: 2vmin auto;
    /* Center the button. Adjust the margin as needed */
    cursor: url('CursorStanPoint.svg'), url('StanC2.svg'), pointer;
}

#codeSubmitButton:hover {
    background-color: #2980b9;
    /* Darker shade on hover */
}

#codeInput {
    padding: 0.5vmin 0.8vmin;
    font-size: 3.5vmin;
    border: 0.3vmin solid #3498db;
    /* Border color to match button */
    border-radius: 1vmin;
    color: #333;
    /* Text color */
    background-color: white;
    /* Background color */

    /* Positioning and layout */
    display: block;
    /* Use 'inline-block' if you prefer it next to the button */
    width: 40%;
    /* Adjust based on your layout preferences */
    margin: 0 auto 1vmin auto;
    /* Center the input field and provide spacing */

    /* Improving text entry experience */
    text-align: center;
    /* Center text inside input field */
}

#codeInput:focus {
    border-color: #1b557a;
    /* Darker border color on focus for visibility */
    outline: none;
    /* Remove the default focus outline */
}

#advance-indicator {
    width: 0;
    height: 0;
    border-left: 3vmin solid transparent;
    border-right: 3vmin solid transparent;
    border-top: 3vmin solid white;
    /* Adjust the color as needed */
    position: fixed;
    left: 50%;
    bottom: 1vmin;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    color: black;
}

@keyframes animateUpDown {

    0%,
    100% {
        transform: translateY(0);
        animation-timing-function: ease-in-out;
    }

    50% {
        transform: translateY(-6vmin);
        animation-timing-function: ease-in-out;
    }
}

.small-font,
.large-font,
.subtitle {
    animation: animateUpDown 3s infinite;
    display: inline-block;
    /* Ensure transform applies */
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-3vmin);
    }
}

#game-screen {
    color: white;
    margin-top: 5.5vmin;
}

#game-title {
    font-family: League Gothic;
    font-size: 8vmin;
    letter-spacing: 0.3vmin;
    /* Increase space between letters */
    line-height: 0;
    /* Less space between lines of text */
    margin-bottom: 3.5vmin;
    /* Reduce bottom margin */
    margin-top: 0;
    margin-left: 1.5vmin;
}

#game-text {
    font-size: 3.5vmin;
    max-height: calc(100vh - 16vmin);
    overflow-y: auto;
    scrollbar-width: none;
    margin-top: 0;
    /* Reduce top margin */
    margin-left: 1.5vmin;
    margin-right: 1.5vmin;
}

.click-challenge-button {
    padding: 1vmin 2vmin;
    font-size: 4vmin;
    cursor: pointer;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 1vmin;
    margin: 2vmin;
    font-family: 'Courier New', Courier, monospace;
}

.click-challenge-button:hover {
    background-color: #2980b9;
}