body {
    background-image: url('images/mictlan-background2.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Helvetica, sans-serif;
    text-align: center;
  }

  h1 {
    color: #f7f2f2;
  }

  #login-section {
    font-size: 1.5rem;
    font-family: 'Pirata One', cursive; /* Folklore-style font */
    color: #fff;
    text-shadow: 2px 2px 5px #0d6638, 0 0 10px #FFD700;
    margin-top: 50px;
  }

  #game-section {
    margin-top: 20px;
  }

  button {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }

  button:hover {
    background-color: #45a049;
  }

  /* styling the canvas for the maze */
  #maze-canvas {
    border: 2px solid black;
  }
  #title-container {
    display: inline-flex; /* adjusting to fit the size of the title */
    justify-content: center;
    align-items: center;
    padding: 20px 40px; /* reduced padding to shrink the oval */
    border-radius: 50%; /* keeps the oval shape */
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.8), rgba(255, 69, 0, 0.8)); /* Gradient background inside the oval */
    animation: oval-spark 3s infinite alternate; /* animation for the glowing background, main part from the sourcing.txt fiek */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 69, 0, 0.6); /* glowing effect */
    position: relative;
    margin: 0 auto;
  }

  /* Styling for the title*/
  #mictlan-title {
    font-size: 3rem;
    color: #fff;
    font-family: 'Pirata One', cursive;
    text-shadow: 2px 2px 5px #0d6638, 0 0 10px #FFD700; /* Glowing text effect */
    position: relative;
    z-index: 1;
    margin: 0; /* No extra spacing inside the oval */
  }

  /* Oval Spark Animation - primarily relied on sourcing.txt linked videos */
  /*Created interval animations with changes on opacity/timing/color which causes this color change in oval title*/
  @keyframes oval-spark {
    0% {
      background: linear-gradient(45deg, rgba(255, 215, 0, 0.8), rgba(255, 69, 0, 0.8));
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 69, 0, 0.6);
    }
    50% {
      background: linear-gradient(45deg, rgba(255, 69, 0, 0.8), rgba(255, 215, 0, 0.8));
      box-shadow: 0 0 30px rgba(255, 69, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.8);
    }
    100% {
      background: linear-gradient(45deg, rgba(255, 215, 0, 0.8), rgba(255, 69, 0, 0.8));
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 69, 0, 0.6);
    }
  }

  #game-title {
    position: relative;
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-family: 'Pirata One', cursive;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* subtle shadow effect */
  }
  input[type="text"],
  input[type="password"],
  button {
    font-family: 'Pirata One', cursive; /* matching the font */
    font-size: 20px;
    padding: 10px 15px;
    margin: 10px 0;
    width: 250px;
    border: 2px solid #fff;
    border-radius: 5px;
    background-color: #001a24;
    color: #fff;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
  }

  /* Button Specific Styles */
  button {
    cursor: pointer; /* pointer cursor for buttons */
  }

  button:hover {
    background-color: #444;
    border-color: #888;
  }

  /* Focus Styling for Inputs */
  input:focus {
    border-color: #888; /* Softer border when focused */
    background-color: #333; /* Slightly lighter background */
  }

  /* Centering Forms */
  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
  }