.theme-toggle {
  width: 62px;
  height: 270px;
  min-height: 270px;
  justify-content: center;
  gap: 18px;
  padding: 18px 10px 20px;
  border-width: 2px;
  border-color: var(--green);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  background: rgba(5, 12, 8, .96);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .42), 0 0 22px rgba(180, 231, 91, .08);
  font-size: 12px;
  letter-spacing: .13em;
}

.theme-toggle:hover {
  transform: translateY(-50%) translateX(4px);
  background: #101d14;
}

.theme-toggle-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 19px;
  writing-mode: horizontal-tb;
}

html.theme-light .theme-toggle {
  background: rgba(250, 253, 248, .98);
}

html.theme-light .contact-form {
  background: #ffffff;
  border-color: rgba(23, 54, 34, .24);
  box-shadow: 0 18px 48px rgba(28, 59, 37, .13);
}

html.theme-light .contact-form label,
html.theme-light .contact-form h2 {
  color: #102017;
}

html.theme-light .contact-form input,
html.theme-light .contact-form textarea,
html.theme-light .contact-form select {
  color: #102017;
  background: #ffffff;
  border-bottom-color: rgba(23, 54, 34, .34);
}

html.theme-light .contact-form input:focus,
html.theme-light .contact-form textarea:focus,
html.theme-light .contact-form select:focus {
  border-bottom-color: #587e26;
}

html.theme-light .contact-form input::placeholder,
html.theme-light .contact-form textarea::placeholder,
html.theme-light .contact-form small {
  color: #536259;
}

html.theme-light .contact-form small a {
  color: #365d1e;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .theme-toggle {
    top: 50%;
    bottom: auto;
    width: 52px;
    height: 220px;
    min-height: 220px;
    transform: translateY(-50%);
    padding: 14px 7px;
    font-size: 10px;
  }

  .theme-toggle:hover {
    transform: translateY(-50%) translateX(3px);
  }
}