.contact-form {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  color: white;
  padding: 2em;
  z-index: 1000;
  background-color: #272a31;
  border-radius: 1em;
  box-shadow: 0 0 10px #272a31;
}

.contact-form h2 {
  margin: 2em 0;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-form div {
  border-bottom: 1px solid rgb(211, 211, 211, 0.2);
  width: 80%;
  align-items: baseline;
  padding-bottom: 0.5em;
}

input,
textarea {
  background-color: transparent;
  border: none;
  padding-left: 1em;
  width: 100%;
  color: white;
}

textarea {
  height: 100px;
}

input:focus,
textarea:focus {
  outline: none;
}

.form-btn {
  background-color: #ec5242;
  padding: 1em 2em;
  border: none;
  border-radius: 2em;
  color: white;
  box-shadow: inset 0 0 10px #d3d3d3;
}

.contact-popup-hidden {
  display: none !important;
}

.contact-close {
  font-size: 22px;
  color: #868990;
  float: right;
  cursor: pointer;
  padding: 10px 10px 0 0;
}

.contact-background {
  background-color: #c1c7d0;
  mix-blend-mode: multiply;
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 999;
}

@media screen and (max-width: 768px) {
  .contact-form {
    width: 80%;
    padding: 1em;
  }
}