html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
html {
  min-width: 300px;
}

/* Prevents Mobile Safari from bumping up font sizes in landscape */
@media only screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
}

:root {
  /* colors */
  --black: #000000;
  --white: #ffffff;
  --off-white: #e4e6e7;
  --charcoal: #a3a6af;
  --light-charcoal: #cacaca30;
  --white-pink: #ffd2db;
  --light-pink: #ea9ead;
  --light-pink-soft: #fae0e5;
  --light-pink-light: #ea9ead05;
  --brand-red: #9f1a4d;
  --danger-red: #dc3545;
  --danger-red-light: #dc354510;
  --primary: var(--brand-red);
  --primary-light: #9f1a4d70;
  --primary-extra-light: #9f1a4d30;
  /* gradients */
  --background-gradient: linear-gradient(180deg, #f9fafc 0%, #eaeffc 100%) fixed;
  --primary-gradient: linear-gradient(
    130deg,
    var(--light-red),
    var(--dark-red)
  );
  --multi-gradient: linear-gradient(-45deg, #ff5454, #ab2977);
  --multi-gradient-light: linear-gradient(-45deg, #ff545470, #ab297770);
  --multi-gradient-extra-light: linear-gradient(-45deg, #ab297705, #ff000020);
  --silver-gradient: linear-gradient(
    to right bottom,
    rgb(255, 255, 255) 30%,
    rgba(255, 255, 255, 0.099)
  );
  --pink-gradient: linear-gradient(
    to right bottom,
    var(--light-pink),
    var(--brand-red)
  );
  /* cards */
  --card-corner: 0.2rem;
  /* buttons */
  --button-padding: 0.7rem 1rem;
  --button-radius: 200px;
  /* layout */
  --viewport-width: 100%;
  --html-max-width: 1200px;
  --section-vertical-padding: 1.5rem;
  --nav-height: calc(3.25rem + 1px);
  --side-margin: 1rem;
  --page-bottom-spacer: 7rem;
  --border-radius: 5px;
  --min-modal-height: 50px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-decoration: none;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}

img {
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
  pointer-events: none;
}

html {
  overflow-y: scroll;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--off-white);
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  color: var(--off-white);
}

h1 {
  font-size: 2rem;
  font-size: clamp(16px, 2rem, 50px);
  line-height: 2.5rem;
}

button,
.link-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--primary);
  color: var(--off-white);
  background-color: var(--primary);
  border-radius: var(--button-radius);
  padding: var(--button-padding);
  font-weight: bold;
  font-size: 1rem;
  max-height: 45px;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-border-radius: var(--button-radius);
  -moz-border-radius: var(--button-radius);
  -ms-border-radius: var(--button-radius);
  -o-border-radius: var(--button-radius);
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Standard */
}

input {
  padding-left: 8px;
  width: 100%;
  height: 2.5rem;
  min-height: 55px;
  background-color: transparent;
  color: var(--off-white);
  font-family: inherit;
  font-weight: bold;
  font-size: 1rem;
  border: 1px solid var(--light-charcoal);
  touch-action: manipulation;
}

input:focus {
  outline-style: solid;
  outline-color: var(--primary);
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
}

input::placeholder {
  font-size: 1rem;
}

p {
  font-size: clamp(16px, 1rem, 20px);
}