/* General Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    @keyframes buttonHover {
      0% {
        /* Initial state */
        background-color:white;
        color: #4682b4;
        transform: scale(1.02);
      }
      25% {
        /*Slightly Enlarged State*/
        background-color: white;
        color: #4682b4;
        transform: scale(1.035);
      }

      50% {
        /* Intermediate state */
        background-color: #95c0e3;
        transform: scale(1.05);
      }
      75% {
        /* Final state on hover */
        background-color: #8fbadd;
        transform: scale(1.065);
      }
      100% {
        /* Maintain final state */
        background-color: #95c3e9;
        transform: scale(1.08);
      }
    }

    /* Keep the hover state after animation */
    .login-button:hover {
      animation: buttonHover 0.5s ease-in-out forwards;
    }

    body {
      font-family: 'Arial', sans-serif;
      background-color: #e6f7ff;
      color: #333;
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100vh;
    }

    header {
      background-color: #4682b4;
      color: white;
      text-align: center;
      padding: 10px 15px;
      position: relative;
    }

    header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }

    nav ul {
      display: flex;
      justify-content: center;
      list-style: none;
      padding: 0;
    }

    nav ul li {
      margin: 0 10px;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      font-size: 1rem;
      text-transform: uppercase;
    }

    nav ul li a:hover {
      color: #add8e6;
    }

    .login-container {
      position: absolute;
      top: 20px;
      right: 20px;
    }

    .login-button {
      background-color: white;
      color: #4682b4;
      padding: 8px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    main {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .center-box {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 80%;
      max-width: 600px;
    }

    .center-box h2 {
      color: #4682b4;
      font-size: 2rem;
      margin-bottom: 20px;
    }
 
    .center-box p {
      font-size: 1rem;
      margin-bottom: 20px;
    }
    copy {
      text-align: center;
      padding: 10px 0;
      background-color: #f4f4f4;
      font-size: 0.9rem;
      color: #666;
    }