/* Importing Google Font VT323 for monospace style */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Setting up general styling for the body */
body {
    font-family: "VT323", monospace; /* Using VT323 font */
    font-size: x-large; /* Setting font size to x-large */
    letter-spacing: 2px; /* Adding letter spacing */
    background-image: url('asset/better\ view\ 2.png'); /* Setting background image */
    background-size: cover; /* Making sure the background image covers the entire screen */
    margin: 0; /* Removing default margins */
    padding: 0; /* Removing default padding */
    background-repeat: no-repeat; /* Preventing background image from repeating */
    background-position: center; /* Centering the background image */
    background-attachment: fixed; /* Fixing the background image */
}

/* Styling for the start screen */
#startScreen {
    position: fixed; /* Fixing the start screen position */
    top: 0; /* Aligning start screen to top */
    left: 0; /* Aligning start screen to left */
    width: 100%; /* Setting start screen width to 100% */
    height: 100%; /* Setting start screen height to 100% */
    background-color: black; /* Setting background color to black */
    color: white; /* Setting text color to white */
    display: flex; /* Using flexbox for layout */
    flex-direction: column; /* Setting flex direction to column */
    align-items: center; /* Centering items horizontally */
    justify-content: center; /* Centering items vertically */
    z-index: 9999; /* Setting z-index to keep the start screen on top */
}

/* Styling for paragraphs inside the start screen */
#startScreen p{
    font-size: 35px; /* Setting font size to 35px */
}

/* Animation for color loop */
@keyframes colorLoop {
    0% { color: white; } /* Starting color white */
    50% { color: yellow; } /* Midpoint color yellow */
    100% { color: white; } /* Ending color white */
}

/* Styling for h1 inside the start screen */
#startScreen h1 {
    font-size: 2em; /* Setting font size to 2em */
    text-align: center; /* Centering text */
    margin-bottom: 20px; /* Adding margin at bottom */
    animation: colorLoop .5s infinite; /* Applying color loop animation */
}

/* Styling for buttons inside the start screen */
#startScreen button {
    padding: 10px 20px; /* Adding padding */
    font-size: 1.2em; /* Setting font size */
    background-color: yellow; /* Setting background color */
    border: none; /* Removing border */
    border-radius: 5px; /* Adding border radius */
    cursor: pointer; /* Changing cursor on hover */
}

/* Styling for specific backgrounds */
.leader-background {
    background-image: url('asset/view\ 3.png'); /* Setting specific background image */
}
.pollution-bg{
    background-image: url('asset/view\ 4\ polluted\ river.png'); /* Setting specific background image */
}
.drought-bg{
    background-image: url('asset/better\ view\ 5.png'); /* Setting specific background image */
}
.final-bg{
    background-image: url('asset/better\ view\ 2.png'); /* Setting specific background image */
}

/* Animation for color change */
@keyframes colorChange {
    0% { color: rgb(0, 0, 0); } /* Starting color black */
    50% { color: #018085; } /* Midpoint color #018085 */
    100% { color: rgb(0, 0, 0); } /* Ending color black */
}

/* Styling for h1 inside #msg1 */
#msg1 h1 {
    animation: colorChange 1s infinite; /* Applying color change animation */
}

/* Styling for the center box */
#centerBox {
    position: absolute; /* Positioning */
    top: 50%; /* Centering vertically */
    left: 50%; /* Centering horizontally */
    transform: translate(-50%, -50%); /* Centering */
    background-color: #b9edf863; /* Setting background color */
    padding: 20px; /* Adding padding */
    border-radius: 10px; /* Adding border radius */
    text-align: center; /* Centering text */
}

/* Styling for options box */
.options-box {
    border: 1px solid #ccc; /* Adding border */
    padding: 10px; /* Adding padding */
    margin-bottom: 10px; /* Adding margin */
}

/* Styling for various buttons */
#continueButton0,
#continueButton,
#continueButton1,
#continueButton2,
#continueSubChoiceButton,
#continueSubChoiceButton1,
#continueSubChoiceButton2 {
    display: block; /* Displaying as block element */
    font-family: "VT323", monospace; /* Setting font family */
    margin: 20px auto; /* Adding margin */
    padding: 10px 20px; /* Adding padding */
    font-size: 30px; /* Setting font size */
    cursor: pointer; /* Changing cursor on hover */
    background-color: #4CAF50; /* Setting background color */
    color: white; /* Setting text color */
    border: none; /* Removing border */
    border-radius: 5px; /* Adding border radius */
}

/* Styling for submit buttons */
#submitButton,
#additionalSubmitButton,
#additionalSubmitButton1,
#additionalSubmitButton2 {
    font-family: "VT323", monospace; /* Setting font family */
    margin-top: 30px; /* Adding margin */
    margin-bottom: 20px; /* Adding margin */
    font-size: larger; /* Setting font size */
    cursor: pointer; /* Changing cursor on hover */
    border: none; /* Removing border */
}

/* Styling for additional sub choice submit buttons */
#additionalSubChoiceSubmitButton,
#additionalSubChoiceSubmitButton1,
#additionalSubChoiceSubmitButton2 {
    font-family: "VT323", monospace; /* Setting font family */
    margin-top: 30px; /* Adding margin */
    margin-bottom: 20px; /* Adding margin */
    font-size: larger; /* Setting font size */
    cursor: pointer; /* Changing cursor on hover */
    border: none; /* Removing border */
}

/* Styling for various buttons */
#restartButton,
#restartButton0,
#homepageButton,
#homepageButton0 {
    font-family: "VT323", monospace; /* Setting font family */
    margin-top: 30px; /* Adding margin */
    margin-bottom: 20px; /* Adding margin */
    font-size: larger; /* Setting font size */
    cursor: pointer; /* Changing cursor on hover */
    border: none; /* Removing border */
}

/* Styling for the game form */
#gameForm {
    text-align: left; /* Aligning text to left */
}

/* Styling for additional options */
#additionalOptions {
    text-align: left; /* Aligning text to left */
}

/* Styling for additional options */
#additionalOptions1 {
    text-align: left; /* Aligning text to left */
}

/* Styling for additional options */
#additionalOptions2 {
    text-align: left; /* Aligning text to left */
}

/* Styling for response */
#response {
    text-align: center; /* Centering text */
}

/* Styling for additional sub choice */
#additionalSubChoice {
    text-align: left; /* Aligning text to left */
}

/* Styling for response1 */
#response1 {
    text-align: center; /* Centering text */
}

/* Styling for points and hearts display */
#pointsDisplay,
#heartsDisplay {
    margin-left: 20px; /* Adding margin */
    font-weight: bold; /* Setting font weight to bold */
    font-size: larger; /* Setting font size */
}

/* Styling for hearts container */
#heartsContainer {
    display: flex; /* Using flexbox */
    align-items: center; /* Aligning items vertically */
}

/* Styling for additional sub choice */
#additionalSubChoice1 {
    text-align: left; /* Aligning text to left */
}

/* Styling for additional sub choice */
#additionalSubChoice2 {
    text-align: left; /* Aligning text to left */
}

/* Styling for heart container */
#heartContainer {
    display: inline-flex; /* Using inline flexbox */
}

/* Styling for heart images */
#heartContainer img {
    width: 5%; /* Setting width */
}

/* Styling for fullscreen button */
#fullscreenButton {
    position: absolute; /* Positioning */
    top: 10px; /* Aligning to top */
    left: 50%; /* Centering horizontally */
    transform: translateX(-50%); /* Centering */
    padding: 10px; /* Adding padding */
    font-size: 30px; /* Setting font size */
    background-color: #3498db; /* Setting background color */
    color: #fff; /* Setting text color */
    border: none; /* Removing border */
    border-radius: 5px; /* Adding border radius */
    cursor: pointer; /* Changing cursor on hover */
    z-index: 9999; /* Setting z-index */
    font-family: "VT323", monospace; /* Setting font family */
}

/* Styling for move */
#move {
    padding: 0; /* Removing padding */
    font-size: larger; /* Setting font size */
    margin-top: 80px; /* Adding margin */
    background-color: rgba(0, 0, 0, 0.24); /* Setting background color */
}

/* Styling for game over screen */
#gameOverScreen {
    display: none; /* Hiding by default */
    position: fixed; /* Positioning */
    top: 50%; /* Aligning to top */
    left: 50%; /* Aligning to left */
    transform: translate(-50%, -50%); /* Centering */
    text-align: center; /* Centering text */
    background-color: rgba(0, 0, 0, 0.5); /* Setting background color */
    color: white; /* Setting text color */
    padding: 20px; /* Adding padding */
}