:root {
  /* 16px * 1.125 = 18px */
  font-size: 112.5%;

  --transition-duration: 700ms;
  --transition-timing-function: ease;
  --transition-delay: 0ms;

  --default-transition:
    var(--transition-duration)
    var(--transition-timing-function)
    var(--transition-delay);

  /* Color palette */
  --usn-light-base: #f5f5f7;
  --usn-dark-base: #212124;
  --usn-purple: #7800f0;
  --usn-purple-medium: #9359ef;
  --usn-purple-light: #cdb9fc;
  --usn-indigo: #2f0b63;
  --usn-indigo-medium: #9595f9;
  --usn-indigo-light: #dad9ff;
  --usn-orange: #ff6202;
  --usn-beige: #ffd9b1;
  --usn-beige-medium: #ffebd3;
  --usn-beige-light: #fff5ee;
  --usn-pink: #ef7dbb;
  --usn-pink-medium: #ffcced;
  --usn-green: #cfff1f;
  --usn-green-medium: #e4ff7d;
}

@font-face {
  font-family: Clearface;
  src: url("/static/fonts/ITCClearfaceRegular.3515e87a4b35.woff2") format("woff2");
}

@font-face {
  font-family: Maison;
  src: url("/static/fonts/MaisonNeueWEB-Book.98ab4e48a461.woff2") format("woff2");
}

body {
  /* Light theme defaults */
  color: var(--usn-dark-base);
  background-color: var(--usn-purple-light);
  background-image: url("/static/images/bg-light.09d764cf134f.png");

  /* Common */
  font-family: Maison, Arial, Helvetica, sans-serif;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition:
    background-color var(--default-transition),
    background-image var(--default-transition);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Clearface, "Times New Roman", Times, serif;
  color: var(--usn-purple);
  transition: color var(--default-transition);
}

/* Override Bootstraps dynamic font size */
h2 {
  font-size: 2rem;
}

p, li {
  transition: color var(--default-transition);
}

a {
  color: inherit;
  text-decoration-color: var(--usn-purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--default-transition);
}

a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.container {
  background-color: var(--usn-beige-light);
  padding: 1.67rem;
  padding-bottom: .83rem;
  border-radius: 1.39rem;
  max-width: 26.67rem;
  transition: background-color var(--default-transition);
}

.logo-container {
  margin-bottom: 1.11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-container img {
  max-height: 2.67rem;
  transition: filter var(--default-transition);
}

.bottom-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.btn {
  --bs-btn-border-radius: 1.11rem;
}

.btn-primary {
  --bs-btn-bg: var(--usn-purple);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg), black 15%);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg), black 20%);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-disabled-bg);
}

.btn-outline-secondary {
  --bs-btn-color: var(--usn-indigo);
  --bs-btn-hover-bg: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-color);
  --bs-btn-border-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
}

.dropdown-menu {
  --bs-body-bg: var(--usn-beige-light);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--usn-purple-medium), transparent 90%);
  --bs-dropdown-link-active-bg: var(--usn-purple);
  --bs-dropdown-min-width: 8rem;
  --bs-dropdown-padding-x: .25rem;
  --bs-dropdown-padding-y: .25rem;
  --bs-dropdown-font-size: .875rem;
  border-radius: .5rem;
  box-shadow: var(--bs-box-shadow);
}

.dropdown-menu li + li {
  margin-top: .125rem;
}

.dropdown-menu .active {
  font-weight: 600;
}

.dropdown-item {
  border-radius: .25rem;
}

.bi {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
  overflow: visible;
}

/* Secondary link below the primary button, e.g. e-mail and SMS on the front page */
.link-card {
  display: flex;
  align-items: center;
  gap: .83rem;
  padding: .67rem 1rem;
  border-radius: 1.11rem;
  background-color: color-mix(in srgb, var(--usn-purple-medium), transparent 88%);
  text-decoration: none;
  transition: background-color .15s ease-in-out;
}

.link-card:hover {
  background-color: color-mix(in srgb, var(--usn-purple-medium), transparent 78%);
}

.link-card .bi {
  flex-shrink: 0;
  color: var(--usn-purple);
}

.link-card-icon {
  font-size: 1.25rem;
}

.link-card-label {
  display: block;
  font-size: .875em;
  opacity: .75;
}

.link-card-chevron {
  margin-left: auto;
  transition: transform .15s ease-in-out;
}

.link-card:hover .link-card-chevron {
  transform: translateX(.2rem);
}

/* Dark theme override */
[data-bs-theme=dark] body {
  color: var(--usn-light-base);
  background-color: color-mix(in srgb, var(--usn-purple), black);
  background-image: url("/static/images/bg-dark.54fa92d1a2b0.png");
}

[data-bs-theme=dark] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--usn-purple-medium);
}

[data-bs-theme=dark] a {
  text-decoration-color: var(--usn-purple-medium);
}

[data-bs-theme=dark] .link-card .bi {
  color: var(--usn-purple-medium);
}

[data-bs-theme=dark] .container {
  background-color: var(--usn-dark-base);
}

[data-bs-theme=dark] .logo-container img {
  filter: brightness(0%) grayscale(100%) invert(100%);
}

[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color: var(--usn-light-base);
  --bs-btn-hover-bg: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-color);
  --bs-btn-hover-color: var(--usn-dark-base);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-border-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
}

[data-bs-theme=dark] .dropdown-menu {
  --bs-body-bg: var(--usn-dark-base);
}

/* Mobile view */
@media only screen and (max-width: 480px) {
  body {
    background-color: var(--usn-beige-light);
    background-image: none;
  }

  [data-bs-theme=dark] body {
    background-color: var(--usn-dark-base);
    background-image: none;
  }

  .container {
    padding: .75rem;
    min-height: 100vh;
    min-width: 100%;
    border-radius: 0px;
  }
}

/* Hide icons when device width <= 370px */
@media only screen and (max-width: 370px) {
  .bottom-container .btn .bi {
    display: none;
  }
}