/* =========================
   AFFILIATION
========================= */

.affiliation-updated {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding-top: 30px;
}

.affiliation {
  font-size: var(--footer-text);
  color: var(--light-gray);
}

.last-updated {
  font-size: var(--footer-text);
  color: var(--orange);
}

/* =========================
   SOCIALS
========================= */

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 4.86px + 0.357vw, 10px);
  margin-bottom: clamp(6px, 4.86px + 0.357vw, 10px);
}

.line {
  width: var(--socials);
  height: var(--socials);
  color: #00b900;
}

.line-button {
  display: inline-flex;
  width: fit-content;
  height: fit-content;
  border-radius: var(--button-radius);
  background-color: var(--socials-bg);
}

.discord {
  width: var(--socials);
  height: var(--socials);
  color: #5865f2;
}

.discord-button {
  display: inline-flex;
  width: fit-content;
  height: fit-content;
  border-radius: var(--button-radius);
  background-color: var(--socials-bg);
}

/* =========================
    CONTACT
========================= */

.form-subtitle {
  display: block;
  color: var(--light-gray);
  font-size: var(--modal-subtitle);
  margin: 10px 0 10px 0;
}

.form-input {
  color: var(--white);
  font-size: var(--modal-subtitle);
  background-color: var(--dark-blue);
  font-family: "Cal Sans";
  border: none;
  border-radius: 10px;
  padding: 10px;
  outline: none;
  transition: box-shadow 0.25s ease;
  resize: none;
  min-height: 200px;
}

.form-input:focus-within {
  box-shadow: 0 0 0 3px var(--orange);
}

.mail-form {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 3.57px + 0.446vw, 10px);
}

.mail-form button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 3px 0;
  background-color: var(--orange);
  color: white;
  font-size: var(--modal-subtitle);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

button {
  font-family: inherit;
  font-size: inherit;
}

.mail-form button:active {
  transform: scale(0.95);
}

.mail-form button.success {
  background-color: #28a745;
  pointer-events: none;
}