body {
       animation: fadeIn 1s ease-in;
     }

     @keyframes fadeIn {
       from {
         opacity: 0;
         transform: translateY(20px);
       }

       to {
         opacity: 1;
         transform: translateY(0);
       }
     }

     .navbar {
       position: relative;

     }

     .container {
       display: flex;
       flex-direction: column;
       align-items: center;
     }

     form {
       width: 50rem;
     }

     label {
       display: block;
     }

     .hero-heading {
       font-size: 3rem;
     }

     .form-label {
       color: var(--white);
     }

     .hero-paragraph {
       font-size: 1rem;
     }

     #course-title {
       font-size: 1.1rem;
       font-weight: 500;
     }

     .input-row {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       gap: 1rem;
       color: var(--white);

       >div {
         flex: 1 1 45%;
         min-width: 220px;
       }
     }

     @media (max-width:900px) {
       .input-row {
         flex-direction: column;
         gap: 0.5rem;
       }

       .input-row>div {
         min-width: 0;
         width: 100;

       }
     }