.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 12; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: black;
    margin: 4% auto; /* 15% from the top and centered */
    padding: 3em;
    border: 1px solid #a5a5a5;
    width: 50%; /* Could be more or less, depending on screen size */
    border-radius: 6px;
    position: relative;
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    z-index: 5;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
  }
  
  .close:hover,
  .close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }

.modal-form{
    display: flex;
    flex-direction: column;
}

.form-names{
  display: flex;
  justify-content: space-between;
}

.form-names input{
  /* width: 47%; */
}

.modal-title{
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  margin: auto;
  width: 100%;
  padding: 1em 1em 2em 1em;
  text-align: center;
}

.inputs-form{
  background-color: black ;
  color: white;
  padding: 1vh;
  border-radius: 0;
  border: 2px solid white;
  margin: 1vh 0;
}

.accept-tac{
  color: white;
  margin: 2vh 0;
  display: flex;
  align-items: center;
  font-size: 0.8em;
  gap: 7px;
}

#submit-button{
  background-color: #ff1100;
  font-weight: 700;
  width: fit-content;
  margin: 2vh auto;
  padding: 1vh 5vh;
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
#submit-button:disabled{
  background-color: #642722;
  color: #888;
  cursor: auto;
}

@media (max-width: 768px) {
  .form-names{
    display: flex;
    flex-direction: column;
  }
  
  .form-names input{
    /* width: 92%; */
  }

  .modal-title{
    /* color: white; */
    /* font-weight: bold; */
    /* font-size: 1rem; */
    /* margin: 2vh 22%; */
    /* width: 100%; */
  }

  .modal-content {
    background-color: black;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
}