/* General page styling */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #74ebd5, #acb6e5);
    color: #333;
}

/* Main container styling */
.main-container {
    text-align: center;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

/* Heading styles */
h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #333;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
#welcomeText {
    font-size: 48px; /* Larger font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Centered alignment */
    color: #4CAF50; /* Green color */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Shadow effect */
    margin: 20px 0; /* Space above and below */
    animation: colorChange 5s infinite; /* Color change animation */
}

@keyframes colorChange {
    0% { color: red; }
    25% { color: orange; }
    50% { color: yellow; }
    75% { color: green; }
    100% { color: blue; }
}



/* Button container styles */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Button styling */
button {
    padding: 15px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 10px;
    color: #fff;
    background-color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Button hover effect */
button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Button active effect */
button:active {
    transform: scale(0.95);
}

.level-selection {
    display: none;              /* Initially hidden */
    background-color: #f4f4f4; /* Light grey background */
    padding: 20px;             /* Padding around the container */
    border-radius: 10px;       /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 300px;              /* Container width */
    margin: 0 auto;            /* Center align the div */
    text-align: center;        /* Center text */
}

.level-selection h2 {
    font-size: 24px;           /* Increased heading font size */
    color: #333;               /* Dark text color */
    margin-bottom: 15px;       /* Space below the heading */
    font-family: 'Arial', sans-serif; /* Font family */
    font-weight: bold;         /* Bold text */
    text-transform: uppercase;  /* Uppercase text */
    letter-spacing: 1px;       /* Spacing between letters */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-bottom: 2px solid #4CAF50; /* Green underline */
    padding-bottom: 10px;      /* Space between text and underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

.level-selection h2:hover {
    color: #2196F3;            /* Change color on hover */
}


.level-btn {
    width: 80%;                /* Button width relative to parent */
    height: 40px;              /* Button height */
    padding: 10px;             /* Padding inside the button */
    margin: 10px 0;           /* Space between buttons */
    border: none;              /* Remove default border */
    border-radius: 5px;        /* Rounded corners */
    background-color: #4cadaf; /* Green background */
    color: white;              /* White text color */
    font-size: 16px;           /* Text size */
    cursor: pointer;           /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.level-btn:hover {
    background-color: #45a049; /* Darker green on hover */
}

.level-btn:focus {
    outline: none;             /* Remove outline */
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5); /* Glow effect on focus */
}

  
  #startgame2 {
    background-color: #4caf50;  /* Green background */
    color: white;               /* White text */
    border: none;               /* No border */
    padding: 10px 20px;
    border-radius: 5px;         /* Rounded button */
    font-size: 16px;
    cursor: pointer;            /* Pointer on hover */
    transition: background-color 0.3s ease;
  }
  
  #startgame2:hover {
    background-color: #45a049;  /* Darker green on hover */
  }
  
  .difficulties-selection {
    display: none;              /* Initially hidden */
    background-color: #f4f4f4;  /* Light grey background */
    padding: 20px;              /* Padding around the container */
    border-radius: 10px;        /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 300px;               /* Container width */
    margin: 0 auto;             /* Center align the div */
    text-align: center;         /* Center text */
  }
  
  .difficulties-selection h2 {
    font-size: 18px;            /* Heading font size */
    color: #333;                /* Dark text color */
    margin-bottom: 15px;        /* Space below the heading */
  }
  
  #difficulty {
    width: 80%;                 /* Input width relative to parent */
    height: 40px;
    padding: 10px;
    border: 2px solid #4caf50;  /* Green border */
    border-radius: 5px;         /* Rounded corners */
    font-size: 16px;            /* Text size */
    background-color: #fff;     /* White background */
    color: #333;                /* Dark text color */
    margin-bottom: 15px;        /* Space below the input */
    outline: none;              /* Remove outline */
    transition: border-color 0.3s ease-in-out;
  }
  
  #difficulty:focus {
    border-color: #2196f3;      /* Blue border on focus */
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5); /* Blue glow */
  }
  
  #difficulty::placeholder {
    color: #aaa;                /* Placeholder text color */
  }