/*==============================================================*
 *                           CSS MAP
 *==============================================================*
 *
 *  1) DESIGN TOKENS (ROOT VARIABLES)
 *     - global variables used everywhere
 *     - JS can overwrite some of these at runtime
 *
 *  2) DOCUMENT BASE + BACKGROUND
 *     - html/body scroll ownership (JS swaps this)
 *     - base typography + background color safety
 *
 *  3) CANVAS LAYER
 *     - #constellations fixed full-screen
 *     - background image lives here
 *
 *  4) PAGE STRUCTURE + TYPOGRAPHY
 *     - spacing and text sizing rules
 *     - divider styling (hr + .divider)
 *
 *  5) CONTENT CONTAINERS
 *     - article layout + [hidden] behavior
 *
 *  6) LINKS
 *     - base link style + hover effects
 *     - utility variants (.clean, .dead, .premium)
 *
 *  7) IMAGES + IMAGE WRAPPERS
 *     - circular avatars
 *     - .imgBorder ring frame
 *     - .imgButton (homepage badge-style images)
 *     - .navButtons icons
 *
 *  8) BUTTONS
 *     - base button typography + hover behavior
 *     - note: shares visuals with .imgButton on purpose
 *
 *  9) GROUP INTERACTIONS
 *     - .hoverTogether “hover whole card” behavior
 *     - nav icon hover/active behavior
 *
 * 10) SCRIPT CHARACTER NAME COLORS
 *     - character classes for script pages
 *
 * 11) SLIDE-IN PAGE TRANSITION SYSTEM
 *     - #transitionContainer and JS-driven states
 *     - .homeJs / .otherJs / .noJs
 *
 * 12) REDUCED-MOTION ACCESSIBILITY
 *     - disables animated canvas + transitions when requested
 *
 *  NOTE: Sections use /* #region ... *\/ for editor folding.
 *==============================================================*/


/* #region 1) DESIGN TOKENS (ROOT VARIABLES) */
/*========================================*
 *  1) DESIGN TOKENS (ROOT VARIABLES)
 *========================================*
 *  These are your “global knobs”.
 *  Step-by-step:
 *   1) Define default values here.
 *   2) Reference them everywhere else with var(--NAME).
 *   3) JS can overwrite specific ones (slide distance/duration).
 */

:root {
  /* Step 1: Slide system defaults (JS overwrites per page/transition) */
  --SLIDE_DISTANCE: 100vh;
  --SLIDE_DURATION: 0.6s;

  /* Step 2: Shared glow recipe (used for text-shadow + box-shadow) */
  --SHADOW: 0 0 20px rgba(200, 0, 0, 1);

  /* Step 3: Brand colors (links and neutral UI color) */
  --LINK_LIGHT: #ee0000;
  --LINK_DARK:  #550000;
  --BASE_COLOR: #bdbdbd;

  /* Step 4: Transition speeds (grouped so everything “feels” consistent) */
  --SLOW_TRANSFORM: 0.3s ease-out;
  --SLOW_BORDER:    0.3s ease-out;
  --SLOW_SHADOW:    0.7s ease-out;
  --SLOW_COLOR:     0.5s ease-out;
  
  /* Placeholders */
  --PLACEHOLDER_COLOR: rgba(90, 90, 90, 0.5);
}

/* #endregion 1) DESIGN TOKENS (ROOT VARIABLES) */



/* #region 2) DOCUMENT BASE + BACKGROUND */
/*========================================*
 *  2) DOCUMENT BASE + BACKGROUND
 *========================================*
 *  Important: scroll ownership is intentionally unusual.
 *  JS swaps between html/body/container as the scroller.
 *
 *  This section is the foundation:
 *   1) Remove default browser margins/padding.
 *   2) Set a safe black background behind everything.
 *   3) Set base font + default text color.
 *
 *  The "DONT TOUCH" notes are real:
 *   - changing overflow/height here can break the transition system
 *   - and can also break iOS scroll behavior
 */

/*---------- Root document ----------*/
/* The site's font, Bpmf Huninn (SIL Open Font License), in two parts so a page only downloads what it
   shows: its Latin letters, numbers, Greek, and symbols (24 KB, every page; the pages preload it), and
   its Chinese, Japanese, and Bopomofo characters (1.8 MB, only when a page has one, like an entry titled
   in Chinese). Both come from BpmfHuninn-Regular.ttf, which no page loads anymore. */
@font-face {
  font-family: "Main Font";
  src: url("/Fonts/MainFont-Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-02FF, U+0370-03FF, U+2000-27BF;
}

@font-face {
  font-family: "Main Font";
  src: url("/Fonts/MainFont-More.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-31FF, U+3300-33FF, U+4E00-9FFF, U+F000-F5FF, U+FE30-FE52, U+FF00-FFEF, U+2546E, U+2AE5A;
}

html {
  /* Step 1: eliminate default spacing */
  margin: 0;
  padding: 0;
  inset: 0;

  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
    
  /* Step 3: edge color visible during transitions */
  background-color: black;
}

/*---------- Body (content wrapper) ----------*/
body {
  /* Step 1: establish a vertical flex layout so footer/page structure behaves */
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Step 2: ensure body covers the screen height */
  min-height: 100vh;

  /* Step 3: default is “no body scroll” (JS may change this) */
  height: auto;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;

  /* Step 4: remove default spacing */
  margin: 0;
  padding: 0;
  inset: 0;

  /* Step 5: keep body visually transparent so canvas/background shows */
  background: transparent;

  /* Step 6: base typography */
  text-align: center;
  font-family: 'Main Font', sans-serif; /* Letters the font doesn't have (like ñ) use a plain sans-serif */
  font-size: 7vmin;
  color: var(--BASE_COLOR);
  user-select: none;
  -webkit-user-select: none;
}

/* Main content wrapper (JS toggles who scrolls) */
#transitionContainer {
  flex: 1;
  min-height: 96vh;
  height: auto;
  width: 96vw;
  padding:2vh 2vw;
  inset: 0;

  /* DONT TOUCH: JS swaps scroll responsibility */
  overflow-x: hidden;
  overflow-y: hidden;
}

/* #endregion 2) DOCUMENT BASE + BACKGROUND */



/* #region 3) CANVAS LAYER */
/*========================================*
 *  3) CANVAS LAYER
 *========================================*
 *  The canvas is both:
 *   - the starfield drawing surface
 *   - and the background image layer
 *
 *  Step-by-step:
 *   1) Fix it to the viewport so it never scrolls.
 *   2) Stretch it to full size.
 *   3) Put the background image here.
 *   4) Send it behind content (z-index:-1).
 *   5) Disable pointer events so it never steals taps.
 */

/* Full-screen starfield canvas (above bg, below content) */
#constellations {
  position: fixed;
  inset: 0;
  
  width: 100lvw;
  height: 100lvh;
  
  background-image: url("/Resources/Background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: -1;

  pointer-events: none;
}

/* #endregion 3) CANVAS LAYER */



/* #region 4) PAGE STRUCTURE + TYPOGRAPHY */
/*========================================*
 *  4) PAGE STRUCTURE + TYPOGRAPHY
 *========================================*
 *  This section controls content spacing + text sizes.
 *
 *  Step-by-step:
 *   1) main gets padding so text doesn't touch edges.
 *   2) headings and paragraphs get consistent sizing.
 *   3) footer uses smaller text.
 *   4) hr is decorative (image-based divider).
 *   5) .divider is a narrower hr variant.
 */

 .logo{
  text-shadow: 0 0 10px rgb(0, 0, 0);
 }

h3 {
  font-size: 12vmin;
}

.aboveName {
  /* To remove space in scripts bewteen h3 and name lines */
  margin-bottom:0em;
}

h4 {
  font-size: 7vmin;
}

p {
  /* Step 3: tight paragraph layout (no extra margin) */
  margin: 0;
  font-size: 6vmin;
}


footer p, footer a{
  /* Step 4: footer text is smaller and padded */
  font-size: 3vmin;
  padding: 2vmin;
}

/* Divider art */
hr {
  /* Step 5: divider sizing */
  width: 75vw;
  height: 4px;
  border: none;

  /* Step 6: hr is image-driven instead of a plain line */
  background-image: url("/Resources/Hr.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Smaller divider variant */
.divider {
  width: 45vw;
}

/* #endregion 4) PAGE STRUCTURE + TYPOGRAPHY */



/* #region 5) CONTENT CONTAINERS */
/*========================================*
 *  5) CONTENT CONTAINERS
 *========================================*
 *  Articles are your “content cards”.
 *
 *  Step-by-step:
 *   1) stack content vertically
 *   2) center it
 *   3) shrink-wrap to its contents
 *   4) allow hiding with [hidden]
 */

article {
  /* Step 1: vertical stacking */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Step 2: shrink to content and center on page */
  width: fit-content;
  margin: 0 auto 3vmin;
}

/* Hide anything with [hidden] (chapters, etc.), even elements given a display (like inputs) */
[hidden] {
  /* Step 3: hard-hide for safety */
  display: none !important;
}

/* #endregion 5) CONTENT CONTAINERS */



/* #region 6) LINKS */
/*========================================*
 *  6) LINKS
 *========================================*
 *  Links are styled like “interactive text buttons”.
 *
 *  Step-by-step:
 *   1) inline-block so transform works nicely
 *   2) default neutral color
 *   3) hover grows slightly + glows + turns red
 *   4) utility variants override specific behavior
 */

a {
  /* Step 1: give the link a box so scaling doesn't break layout */
  display: inline-block;
  margin: 0 auto;
  padding-bottom: 1vmin;

  /* Step 2: default color */
  color: var(--BASE_COLOR);

  /* Step 3: smooth transitions */
  transition:
    transform var(--SLOW_TRANSFORM),
    color var(--SLOW_COLOR),
    text-shadow var(--SLOW_SHADOW);
}

a:hover {
  /* Step 4: hover treatment */
  transform: scale(1.05);
  text-shadow: var(--SHADOW);
  color: var(--LINK_LIGHT);
}

/* Utility variants */
.clean { color: var(--BASE_COLOR); }
.clean:hover { transform: scale(1.1); }

/* “Dead” links: locked down, dim, no scaling */
.dead,
.dead:hover {
  transform: scale(1);
  color: var(--LINK_DARK);
}

/* “Premium” links: purple glow accent */
.premium {
  text-shadow: 0 0 20px rgba(100, 0, 100, 1);
}

/* #endregion 6) LINKS */



/* #region 7) IMAGES + IMAGE WRAPPERS */
/*========================================*
 *  7) IMAGES + IMAGE WRAPPERS
 *========================================*
 *  This section defines:
 *   - base circular image rules
 *   - decorative ring frame (.imgBorder)
 *   - badge-style image buttons (.imgButton)
 *   - nav icon strip (.navButtons)
 *
 *  Important note:
 *   .imgButton and button share a block on purpose
 *   so they feel like they belong to the same UI “family”.
 */

/*---------- Base circular images ----------*/
img {
  /* Step 1: default avatar sizing */
  width: 40vmin;
  height: 40vmin;

  /* Step 2: circular crop */
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}

/*---------- Decorative border wrapper (.imgBorder) ----------*/
.imgBorder {
  /* Step 1: shrink-wrap around the image */
  display: inline-block;
  position: relative;

  /* Step 2: keep it circular */
  border-radius: 50%;

  /* Step 3: remove inline baseline gap */
  line-height: 0;
  
  margin:4vmin;
}

/* The ring frame lives on a pseudo-element behind the image */
.imgBorder::before {
  content: "";
  position: absolute;

  /* Step 4: inset controls ring thickness */
  inset: -2vmin;

  /* Step 5: image-based frame */
  background-image: url("/Resources/Image Border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  /* Step 6: match circle and sit behind */
  border-radius: 50%;
  z-index: -1;
}

/* Ensure the image behaves as a block (no baseline gap) */
.imgBorder img {
  display: block;
}

/*---------- Homepage badge-style image buttons ----------*/
/* Note: .imgButton shares a block with button here on purpose */
.imgButton {
  /* Step 1: make it a block so it centers cleanly */
  display: block;

  /* Step 2: let width fit content, set consistent height */
  width: auto;
  height: 20vmin;

  /* Step 3: spacing + padding */
  margin-top: 3vmin;
  padding: 5vmin;

  /* Step 4: black backing */
  background-color: black;

  /* Step 5: fallback font if images fail */
  font: 1vmin Arial;

  /* Step 6: for replaced elements (img), harmless for buttons */
  object-fit: contain;

  /* Step 7: pill shape + border */
  border-radius: 10vmin;
  border: 3px solid var(--BASE_COLOR);

  /* Step 8: smooth transitions */
  transition:
    transform var(--SLOW_TRANSFORM),
    box-shadow var(--SLOW_SHADOW),
    border-color var(--SLOW_BORDER),
    color var(--SLOW_COLOR);
}



/* #region 8) BUTTONS */
/*========================================*
 *  8) BUTTONS
 *========================================*
 *  Reminder:
 *   - button already gets some shared visuals above (with .imgButton)
 *   - THIS section is where button typography and hover “personality” lives
 */

button {

  -webkit-appearance: none;
  appearance: none;

  display: block;
  margin: 3vmin auto 1vmin;
  padding: 0.5em 1.5em;
  height: auto;
  
  object-fit: contain;

  /* Step 3: pill */
  border: 3px solid var(--BASE_COLOR);
  border-radius: 9999px;
  background: transparent;

  /* Step 4: typography */
  color: var(--BASE_COLOR);
  font-family: 'Main Font', sans-serif;
  font-size: 5vmin;

  /* Step 8: smooth transitions */
  transition:
    transform var(--SLOW_TRANSFORM),
    box-shadow var(--SLOW_SHADOW),
    border-color var(--SLOW_BORDER),
    color var(--SLOW_COLOR);
}

button:hover {
  /* Step 6: scale + glow + brand color */
  transform: scale(1.05);

  text-shadow: var(--SHADOW);
  color: var(--LINK_LIGHT);

  box-shadow: var(--SHADOW);
  border-color: var(--LINK_LIGHT);
}

/* #endregion 8) BUTTONS */



/* #region 9) GROUP INTERACTIONS */
/*========================================*
 *  9) GROUP INTERACTIONS
 *========================================*
 *  This makes a whole “card” react together.
 *
 *  Step-by-step:
 *   1) hovering the group boosts the badge
 *   2) hovering the group boosts the links
 *   3) nav icons get their own hover/active behavior
 */

/* Hover/focus within a group boosts its badge + links */
.hoverTogether:hover .imgButton,
.hoverTogether:focus-within .imgButton {
  box-shadow: var(--SHADOW);
  border-color: var(--LINK_LIGHT);
}

.hoverTogether:hover a,
.hoverTogether:focus-within a {
  text-shadow: var(--SHADOW);
  color: var(--LINK_LIGHT);
}

/* Nav icon glow & scale (targets icon image inside the link) */
.navButtons a img:hover,
.navButtons a img:active {
  transform: scale(1.05);
  border-color: var(--LINK_LIGHT);
  box-shadow: var(--SHADOW);
}

/* #endregion 9) GROUP INTERACTIONS */

/* #region 10) HEADER */
/*========================================*
 *  HEADER & NAVIGATION BAR
 *========================================*/
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1vmin 2vw;
  box-sizing: border-box;
}

/* Left Side: Logo and Title grouping */
header .brand {
  display: flex;
  align-items: center;
  gap: 3vw;
}

/* Shrink the main logo image */
header .brand-icon {
  width: 12vmin; 
  height: 12vmin;
  border-radius: 50%;
  object-fit: cover;
}

/* Override the old global h2 styling to fit the header */
header .logo {
  margin: 0; 
  font-size: 4.5vmin;
  text-align: left;
}

/* Modifier for when the brand section is just stacked text (H1 + H2 without logo) */
header .stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1vmin; /* Tight spacing between title and subtitle */
}

/* Header Title (H1) */
header .stacked h1 {
  margin: 0;
  font-size: 4vmin;
  text-align: left;
  line-height: 1.2;
}

/* Header Subtitle (H2 overridden for the stacked variant) */
header .stacked h2 {
  margin: 0;
  font-size: 3vmin;
  text-align: left;
  font-weight: normal;
  opacity: 0.7; /* Dims the subtitle slightly for visual hierarchy */
}

/* Right Side: Nav Buttons */
.navButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0; /* Overrides the old 'margin: 0 auto' so it stays right-aligned */
}

/* Shrink the spacing between nav links so they fit side-by-side */
.navButtons a {
  margin: 0 2vw;
}

/* Keep nav icons slightly prominent */
.navButtons img {
  width: 12vmin;
  height: 12vmin;
  padding: 0;
  border-radius: 30%;
  border: 3px solid var(--BASE_COLOR);
  object-fit: cover;
  transition: transform var(--SLOW_TRANSFORM), box-shadow var(--SLOW_SHADOW), border-color var(--SLOW_BORDER);
}
/* #endregion 9) GROUP INTERACTIONS */

/* #region 11) SLIDE-IN PAGE TRANSITION SYSTEM */
/*========================================*
 *  11) SLIDE-IN PAGE TRANSITION SYSTEM
 *========================================*
 *  This is the animation shell.
 *
 *  Step-by-step:
 *   1) #transitionContainer holds the entire page content
 *   2) JS toggles classes on it:
 *        .ready     -> resting position (translateY(0))
 *        .slide-out -> leaving position (translateY(var(--SLIDE_DISTANCE)))
 *   3) html has either .homeJs or .otherJs depending on page type
 *   4) .noJs (JavaScript is off) hides the page and asks for JavaScript instead
 */

/* Homepage: slides DOWN into view, OUT up */
.homeJs #transitionContainer {
  transform: translateY(-100%);
  transition: transform 1s ease-in-out;
}

.homeJs #transitionContainer.ready {
  transform: translateY(0);
}

.homeJs #transitionContainer.slide-out {
  transform: translateY(-100%);
}

/* Other pages: slides UP into view, OUT down */
.otherJs #transitionContainer {
  transform: translateY(100vh);
  transition: transform 0.6s ease-in-out;
}

.otherJs #transitionContainer.ready {
  transform: translateY(0);
}

.otherJs #transitionContainer.slide-out {
  transition: transform var(--SLIDE_DURATION) ease-in-out;
  transform: translateY(var(--SLIDE_DISTANCE));
}

/* No javascript fallback: nothing works without it, so the page only asks for it. The same goes for a
   browser that blocks site data (Boot.js adds .noStorage): signing in needs it. */
.noJs #transitionContainer,
.noStorage #transitionContainer {
  display: none;
}

.noJs body::before {
  content: "Prismal Budget needs JavaScript to work. Please turn on JavaScript in your browser's settings, then reload this page.";
}

.noStorage body::before {
  content: "Prismal Budget needs to keep a little data in your browser (that's how it keeps you signed in), and this browser is blocking it. Allow cookies and site data for this site in your browser's settings, then reload this page.";
}

.noJs body::before,
.noStorage body::before {
  margin: auto;
  padding: 6vmin;
  max-width: 80vw;
  font-size: clamp(18px, 5vmin, 40px);
  line-height: 1.4;
  text-shadow: 0 0 10px rgb(0, 0, 0);
}

/* #endregion 11) SLIDE-IN PAGE TRANSITION SYSTEM */



/* #region 12) REDUCED-MOTION ACCESSIBILITY */
/*========================================*
 *  12) REDUCED-MOTION ACCESSIBILITY
 *========================================*
 *  When users request reduced motion:
 *   1) remove the animated canvas layer
 *   2) disable page slide transitions
 */

@media (prefers-reduced-motion: reduce) {
  #constellations {
    display: none; /* disable animated starfield */
  }

  /* As specific as the slide rules above (and after them), so these win: the page just appears.
     Layout.js turns scrolling back on without waiting for a slide to end. */
  .homeJs #transitionContainer,
  .otherJs #transitionContainer,
  .homeJs #transitionContainer.ready,
  .otherJs #transitionContainer.ready,
  .homeJs #transitionContainer.slide-out,
  .otherJs #transitionContainer.slide-out {
    transform: none;
    transition: none;
  }
}

/* #endregion 12) REDUCED-MOTION ACCESSIBILITY */

/* An image that couldn't load (Layout.js) shows its words instead, in the same spot and size */
.missingImage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  font-size: max(12px, 2.4vmin);
  line-height: 1.1;
  overflow: hidden;
  overflow-wrap: anywhere;
}

#versionBadge {
  position:fixed;
  bottom:4px;
  left:6px;
  font:10px monospace;
  opacity:.45;
  z-index:9999;
  pointer-events:none;
}

/*========================================*
 *  13) FORM ELEMENTS (LOGIN/REGISTER)
 *========================================*/
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

label {
  font-size: 5vmin;
  color: var(--BASE_COLOR);
  margin-top: 2vmin;
}

input {
  -webkit-appearance: none;
  appearance: none;
  
  display: block;
  margin: 1vmin auto 3vmin;
  padding: 0.5em 1em;
  width: 60vw;
  max-width: 400px;
  
  /* Match the button pill aesthetic */
  background: transparent;
  border: 3px solid var(--BASE_COLOR);
  border-radius: 9999px;
  
  /* Match typography */
  color: var(--BASE_COLOR);
  font-family: 'Main Font', sans-serif;
  font-size: 5vmin;
  text-align: center;
  
  /* FIXED: Explicitly define transform transition parameters */
  transition: 
    transform 0.3s ease-out,
    box-shadow var(--SLOW_SHADOW), 
    border-color var(--SLOW_BORDER), 
    color var(--SLOW_COLOR),
    text-shadow var(--SLOW_SHADOW);
}

/* Hover and focus states */
input:hover,
input:focus {
  outline: none;
  transform: scale(1.05);
  text-shadow: var(--SHADOW);
  border-color: var(--LINK_LIGHT);
  box-shadow: var(--SHADOW);
  color: var(--LINK_LIGHT);
}
.hidden {
  display: none !important;
}

/* The last minute before an idle sign-out (Session.js). Here, not in budgetStyle.css: every signed-in
   page shows it, and the 404 page doesn't load budgetStyle.css. */
.idleWarning {
  position: fixed;
  top: max(2vh, env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 2100;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  max-width: min(92vw, 560px);
  padding: 0.7em 1.2em;
  font-size: clamp(13px, 2.6vmin, 18px);
  line-height: 1.4;
  text-align: center;
  color: var(--BASE_COLOR);
  background: rgba(10, 0, 50, 0.97);
  border: 2px solid var(--LINK_LIGHT);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 14px rgba(200, 0, 0, 0.35);
}

/* Checkboxes (the input style above hides native controls). A set size: em would follow the input
   style's 5vmin text, which made them huge on big screens. */
input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: auto;
  display: inline-block;
  flex-shrink: 0;
  width: clamp(16px, 2.2vmin, 20px);
  height: clamp(16px, 2.2vmin, 20px);
  margin: 0;
  padding: 0;
  border: none;
  font-size: inherit;
  accent-color: var(--LINK_LIGHT);
  cursor: pointer;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:focus {
  transform: none;
  box-shadow: none;
}

/* Create account: agree to the Privacy Policy & Terms of Use */
.termsField {
  display: flex;
  align-items: center;
  gap: 2vmin;
  max-width: 80vw;
  margin: 1vmin auto 2vmin;
  font-size: 4vmin;
  text-align: left;
}

.termsField a {
  padding-bottom: 0;
}

/* Login page instructions (forgot password, new password) */
.formHint {
  max-width: 80vw;
  margin: 2vmin auto;
  font-size: 4.5vmin;
}

/* A button that reads like a link (Forgot Password?) */
.textButton {
  margin-top: 2vmin;
  padding: 0.3em 0.8em;
  border: none;
  font-size: 4vmin;
}

.textButton:hover {
  box-shadow: none;
}