body {
    background: #fbfaf5;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.hero {
    text-align: center;
}

.form-section {
    display: grid;
    justify-content: center;
    width: max-content;
    text-align: center;               
}

form {
    border-radius: 15px;
    border-style: none;
    display: grid;
    justify-content: center;
    max-width: 100vw;
    width: 450px;
    margin-top: 50px;
    padding: 15px;
}

.field {
     border: none;
     -webkit-appearance: none;
     -ms-appearance: none;
     -moz-appearance: none;
     appearance: none;
    background: transparent;
    padding: 12px;
    border-radius: 3px;
    width: 250px;
    outline: none;
    font-size: 14px;
}

.field:focus::placeholder {
    color: transparent;
}

.field::placeholder {
    color: #222;
    transition: color 0.3s ease;
}

.custom-field {
    position: relative;
    font-size: 14px;
    padding-top: 20px;
    margin-bottom: 5px;
}

.custom-field .placeholder {
    position: absolute;
    left: 12px;
    top: calc(50% + 10px);
    transform: translateY(-50%);
    color: #aaa;
    transition: 
        top 0.3s ease,
        font-size 0.3s ease,
        color 0.3s ease;
}

.custom-field input {
    background: none;
    border: 2px solid #ddd;
    transition: border-color 0.3s ease;
}

.custom-field input:valid,
.custom-field input:focus {
    border-color: #222;
    transition-delay: 0.1s;
}

.custom-field input:valid + .placeholder,
.custom-field input:focus + .placeholder {
    top: 20px;
    font-size: 10px;
    background: white;
    color: #222;
    padding: 0 5px;
}

.custom-field input:valid + .placeholder,
.custom-field input:focus + .placeholder {
    top: 20px;
    background: white;
    padding: 0 5px;
}

.custom-select {
    background-color: transparent;
    background: none;
    border: 2px solid #ddd;
    margin-bottom: 5px;
    position: relative;
    font-size: 14px;
    appearance: none;
}

button {
    background-color: orange;
    padding: 10px;
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    width: max-content;
    margin-top: 20px;
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: right;
    font-size: 12px;
    text-decoration: underline;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: fit-content;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 0%;
    margin-left: 0px;
    font-size: 14px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 90%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

footer {
    width: 100%;
    font-size: small;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}