:root {
  --text-color: #D4D4D4;
  --button-color: rgb(82, 6, 223);
  --button-color-hover: rgb(101, 32, 231);
}

.contact > label {
  display: block;
  margin-top: 20px;
  color: var(--text-color);
}

.contact {
  color: var(--text-color);
  font-size: 20px;
}

div.contact {
  margin-top: 40px;
}

form > input, textarea {
  width: 200px;
  border: 2px solid var(--button-color);
  background-color: rgb(46, 46, 46);
  color: var(--text-color);
  padding: 10px;
  margin: 10px 0;
  border-radius: 10px;
  transition: all 0.5s;
}

textarea {
  height: 50px;
}

form > input[type="submit"] {
  color: #ffffff;
  background-color: var(--button-color);
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.563rem 1.125rem;
  font-size: 100%;
  width: 225px;
  transition: all 0.5s;
}

form > input[type="submit"]:hover,
form > input[type="submit"]:focus,
form > input[type="submit"]:active {
  background-color: var(--button-color-hover);
  border: 1px solid var(--button-color);
}

form > input[type="email"]:focus,
form > input[type="text"]:focus,
textarea:focus,
textarea:active,
textarea:hover,
form > input[type="email"]:active,
form > input[type="email"]:hover,
form > input[type="text"]:active,
form > input[type="text"]:hover {
  outline: none;
  border: 2px solid var(--button-color-hover);
}

@media screen and (max-width: 820px) and (min-width: 401px) {
  iframe {
    width: 200px !important;
    height: 300px !important;
    border: none;
    margin-top: 100px;
  }
}

@media screen and (max-width: 400px) {
  div.contact {
    font-size: 15px;
  }
}