.contact {
   display: grid;
   grid-template-columns: 1fr 1fr;   
   align-items: center;
   min-height: 100vh;
   width: 100%;
   padding: 1rem;
   background-color: black;
 }

 .contact h1,
 .contact h2 {
  color: white;
 }

 .contact div {
  max-width: 80%;
 }

 .contact img {
  max-width: 100%;
 }

 .contact > div > h1 {
  padding-left: 20px;
 }
 
 .contact > div > form {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   max-width: 900px;
   margin: auto;
   padding: 20px;
   border-radius: 5px;
   box-shadow: var(--boxshadowwithopacity);
 }
 
 .contact > div > form > div {
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;
 }
 
 .contact > div > form > div > label {
   margin-bottom: 5px;
   font: 600 clamp(16px, 2vw, 22px) 'Roboto';
   text-align: start;
   /* color: var(--textColor); */
   color: white;
 }
 
 .contact > div > form > div input[type="text"],
 .contact > div > form > div input[type="email"],
 .contact > div > form > div textarea {
   padding: 10px;
   border-radius: 5px;
   border: none;
   margin-bottom: 10px;
 }
 
 .contact > div > form > div input[type="text"]:focus,
 .contact > div > form > div input[type="email"]:focus,
 .contact > div > form > div textarea:focus {
   outline: none;
 }
 
 .contact > div > form > button,
 .contact > div > form #verify-code-button{
   align-self: flex-end;
   background-color: var(--background);
   font-size: clamp(12px, 2vw, 16px);
   color: var(--text);
   padding: 5px 10px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .contact > div > form > button:hover,
 .contact > div > form #verify-code-button:hover {
   background-color: var(--hoverColor);
 }
 
 .contact > div > form > button.loading:before {
   content: "Sending...";
   display: inline-block;
   margin-right: 5px;
   font-weight: bold;
 }
 .contact > div > form #verify-code-button.loading:before {
   content: "Verifying...";
   display: inline-block;
   margin-right: 5px;
   font-weight: bold;
 }
 
 .contact > div > form > button.loading:after,
 .contact > div > form #verify-code-button.loading:after {
   content: "";
   display: inline-block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 3px solid #ccc;
   border-top-color: #333;
   animation: spin 0.8s linear infinite;
   vertical-align: middle;
   margin-top: -2px;
   margin-right: 5px;
 }
 
 .contact > img {
   height: auto;
   width: 100%;
 }

 @media screen and (max-width: 768px) {

    .contact {
      grid-template-columns: 1fr;
    }

    .contact div,
    .contact img {
      max-width: 100%;
     }

    .contact > img {
      display: none;
    }
  
  }