@media only screen and (max-width: 280px){
  body {
      background-color: black;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .container {
      display: flex;
      flex-direction: column; /* Change flex direction to column */
      justify-content: center;
      align-items: center;
      height: 100vh;
      padding: 20px; /* Add padding for spacing */
    }
    
    .image {
      width: 50%;
      text-align: center;
      margin-bottom: 20px; /* Add margin bottom to space out the form */
    }
    
    .image img {
      max-width: 50%;
    }
    
    .spin-zoom {
      animation: spin-zoom 4s linear forwards;
    }
    
    @font-face {
      font-family: myfont;
      src: url(Blessed.ttf);
    }
    
    Blessed {
      font-family: myfont;
    }
    
    @keyframes spin-zoom {
      0% {
        transform: rotate(0deg) scale(1);
      }
      50% {
        transform: rotate(360deg) scale(1.5);
      }
      100% {
        transform: rotate(360deg) scale(2.5);
      }
    }
    
    .form {
      width: 74%;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 15px;
      border-radius: 50px;
    }
    
    h1 {
      text-align: center;
    }
    
    form {
      display: flex;
      flex-direction: column;
    }
    
    input[type="text"],
    input[type="email"],
    textarea {
      margin-bottom: 20px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      border-radius: 10px;
    }
    
    input[type="submit"] {
      background-color: #008080;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 10px;
    }
    
    button {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
    }
    
    button img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    
}

@media only screen and (max-width: 412px){
  body {
      background-color: black;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .container {
      display: flex;
      flex-direction: column; /* Change flex direction to column */
      justify-content: center;
      align-items: center;
      height: 100vh;
      padding: 20px; /* Add padding for spacing */
    }
    
    .image {
      width: 50%;
      text-align: center;
      margin-bottom: 20px; /* Add margin bottom to space out the form */
    }
    
    .image img {
      max-width: 50%;
    }
    
    .spin-zoom {
      animation: spin-zoom 4s linear forwards;
    }
    
    @font-face {
      font-family: myfont;
      src: url(Blessed.ttf);
    }
    
    Blessed {
      font-family: myfont;
    }
    
    @keyframes spin-zoom {
      0% {
        transform: rotate(0deg) scale(1);
      }
      50% {
        transform: rotate(360deg) scale(1.5);
      }
      100% {
        transform: rotate(360deg) scale(2.5);
      }
    }
    
    .form {
      width: 74%;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 15px;
      border-radius: 50px;
    }
    
    h1 {
      text-align: center;
    }
    
    form {
      display: flex;
      flex-direction: column;
    }
    
    input[type="text"],
    input[type="email"],
    textarea {
      margin-bottom: 20px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      border-radius: 10px;
    }
    
    input[type="submit"] {
      background-color: #008080;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 10px;
    }
    
    button {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
    }
    
    button img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    
}