body {
      background: #fff;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      font-family: Arial, sans-serif;
      padding: 30px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    @media screen and (max-width: 768px) {
      .container {
        margin: 10px;
      }
      body {
        background-image: url('white.jpg');
        background-repeat: no-repeat;
        background-size: cover;
      }
    }

    @media screen and (min-width: 768px) {
      body {
        background-image: url('white.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      label {
        color: black;
        font-size: 20px;
      }
    }

    h1 {
      font-size: 2.3em;
      margin-bottom: 35px;
      text-align: center;
      color: #333;
      animation: slidein 1.2s forwards ease-out;
    }
    @keyframes slidein {
      from {
        transform: scale(0);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }


    img {
      width: 10em;
      height: 10em;
      border-radius: 10em;
      display: block;
      margin: 0 auto;
      animation: scale 2s forwards linear;
    }
    @keyframes scale{
      0%{transform: rotate(0)}
      50%{transform: rotate(360deg)}
      100%{transform: rotate(360deg)}
    }

    form {
      display: grid;
      gap: 10px;
    }

    label {
      font-size: 16px;
      color: #333;
    }

    input {
      padding: 18px;
      outline: none;
      border: none;
      background: aliceblue;
      border-radius: 15px;
    }

    .btn, #continueButton, #getIdBtn {
      padding: 10px 20px;
      background-color: #45a049;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 18px;
    }
    .idSubmit{
     border-radius: 15px;
     padding: 10px 20px;
      background-color: #45a049;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 18px;
    }

    .btn:hover {
      background-color: #387a36;
    }

    .par {
      text-align: center;
      color: #333;
    }

    .spinner {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 8px solid #f3f3f3;
      border-top: 8px solid #45a049;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      display: none;
      z-index: 1000;
      margin: 0 auto;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .modal {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 1001;
      overflow: auto;
      font-family: Arial, Helvetica, sans-serif;
    }

    .modal-content {
      background-color: #fefefe;
      margin: 5% auto;
      padding: 25px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px;
      border-radius: 15px;
      position: relative;
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover {
      color: black;
    }

    .modal-link {
      display: block;
      text-align: center;
      padding: 10px;
      margin-top: 20px;
      background-color: #45a049;
      color: white;
      text-decoration: none;
      border-radius: 15px;
    }

    marquee {
      font-family: Arial, Helvetica, sans-serif;
    }

    .mode, .first-mode {
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
    }

    .first-mode {
      margin-top: 2em;
    }
    a{
      text-decoration: none;
    }