:root {
  --primary-black: #050708;
  --primary-grey: #808080;

  --primary-color: #c00000;
  --primary-background-color: white;
  --primary-text-color: var(--primary-black);
  --secondary-color: var(--primary-black);
  --primary-color-alpha: #106d572f;
  --max-width: 480px;

  --primary-color-lazy-dog: #106d58;
  --primary-color-petco: #333399;
  --primary-color-coffee-deals: #ffd90b;
  --primary-color-burger-deals: #f2682a;
  --primary-color-white-castle: #f26923;
  --primary-color-cracker-barrel: #ff7126;
  --primary-color-qdoba: #fec403;
  --primary-color-tomahawk: #000000;
  --primary-color-panera: #7d7a07;
  --secondary-color-tomahawk: #4f81bd;
  --secondary-color-panera: #518c3c;

}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  color: var(--primary-text-color);
  font: 16px Arial, Helvetica, sans-serif;
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100vw;
  background-color: var(--primary-background-color);
}

body.landing h1.sub {
  margin-bottom: 20px;
}

body.get-code main > article {
  gap: 15px;
}

figure {
  margin: 0;
}

img {
  align-self: center; /* flexbox has a weird default for images, causes stretch */
}

main {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 20px;
  max-width: 480px;
  width: 100vw;
}

main > * {
  flex-shrink: 0;
}

main > header {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 15px;
  margin-bottom: 30px;
  max-width: none;
  padding: 0 15px 15px;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

main > header > img {
  align-self: center;
  max-height: 120px;
  max-width: 100%;
}

a,
a:visited,
a:focus,
a:active {
  color: var(--primary-black);
  text-decoration: none;
}

h1,
h2,
h3 {
  font: normal 16px Arial, Helvetica, sans-serif;
  margin: 0;
}

body.landing h1.sub {
  margin-bottom: 20px;
}

h1 {
  line-height: 1em;
  font: 26px Arial, Helvetica, sans-serif;
  font-weight: bold;
}

h1.sub {
  font: 14px Arial, Helvetica, sans-serif;
  font-weight: normal;
}

h2 {
  font: normal 20px Arial, Helvetica, sans-serif;
  font-weight: bold;
}

h2.join-today {
  margin-bottom: 30px;
}

h3 {
  font: normal 18px Arial, Helvetica, sans-serif;
  font-weight: normal;
}

p.information {
  font: 14px Arial, Helvetica, sans-serif;
  font-weight: 300;
}

strong {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.primary-color {
  color: var(--primary-color);
}

.secondary-color {
  color: var(--secondary-color);
}

.black {
  color: var(--primary-black);
}

.gray {
  color: #595959;
}

.orange {
  color: #f2682a;
}

.red {
  color: red;
}

.light {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
}

.regular {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.heavy {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.btn,
.btn:active,
.btn:focus,
.btn:visited {
  border-radius: 2em;
  box-shadow: none;
  cursor: pointer;
  font: 12px Arial, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 2em 0.5em;
  outline: none;
  padding: 0.75em;
  text-decoration: none;
  transition-duration: 0.15s;
  min-width: 10em;
}

.btn {
  background-color: white;
  border: 0.3em solid var(--primary-color);
  color: var(--primary-color);
}

.btn.cta {
  background-color: var(--primary-color);
  font-size: 16px;
  color: black;
}

.btn.ctaout {
  outline-color: var(--primary-color);
  font-size: 16px;
  color: var(--primary-color);
}

#get-my-code {
  margin: 0.5em auto 1em auto;
}

@media (max-width: 374px) {
  .btn,
  .btn:active,
  .btn:focus,
  .btn:visited {
    display: block;
    font-size: 11px;
    margin: 0.5em auto;
  }

  main > header > img {
    max-height: 50px;
  }
}

main > article {
  align-items: center;
  color: var(--primary-text-color);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 30px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
  gap: 5px;
  max-width: var(--max-width);
}

main > article > h1 + h2 {
  margin-bottom: 5px;
}

main > article hr.header-separator {
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  border: none;
  background-color: lightgray;
  color: lightgray;
}

main > article figure {
  margin-top: 10px;
  width: 100%;
}

body.get-code > main > article figure {
  margin-top: 25px;
}

main > article figure > img {
  width: 100%;
  filter: drop-shadow(3px 6px 6px gray);
}

main > article #go-to-deals {
  max-width: 240px;
}

main > article p.instruction {
  font: 10px "avenir_roman", arial, sans-serif;
  margin: 0 0 15px;
}

main > article form {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

main > article .text-input {
  border: 2px solid var(--primary-black);
  border-radius: 5px;
  border-radius: 5px;
  max-width: var(--max-width);
  padding: 0.75em;
  width: 100%;
}

main > article .text-input:focus-visible {
  border-color: var(--primary-color);
  outline: none;
}

main > article > nav {
  text-align: center;
}

.center-text {
  text-align: center;
}

main > footer {
  padding: 0 20px;
  color: gray;
  font: 8px "avenir_book", arial, sans-serif;
  text-align: justify;
}

dialog {
  width: calc(100vw - 10px);
  max-width: 365px;
  border: none;
  border-radius: 10px;
  padding: 0;
}

dialog::backdrop,
dialog + .backdrop {
  background: #0006;
}

dialog > header {
  padding: 7px 5px;
  text-align: left;
}

dialog > article {
  align-content: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  justify-content: space-between;
  padding: 25px 20px;
  text-align: center;
}

dialog > header + article {
  padding: 0 30px 15px;
}

dialog > article figure {
  font-size: 34px;
  margin: 0 0 25px 0;
}

dialog > article figcaption {
  font-size: small;
}

dialog .redeemed-txt a {
  text-decoration: underline;
}

.underline-mailto {
  margin-top: 5em;
}

.underline-mailto > a {
  text-decoration: underline;
}

dialog#ready-pop article .btn {
  margin: 0;
}

.counter {
  background: url("/assets/images/timer-bg.svg") center center no-repeat;
}

.clock {
  height: 165px;
  text-align: center;
  margin: 10px 0;
  padding: 65px 0 0 0;
}

.timer {
  color: #fff;
  font: 45px/40px "avenir_heavy", Arial, sans-serif;
}

.copy-code {
  border: 1px solid var(--primary-color);
  border-radius: 20px;
  font: 15px/40px "avenir_heavy", Arial, sans-serif;
  height: 50px;
  margin: 15px 30px 25px 30px;
  padding: 8px 12px;
  position: relative;
  transition-duration: 0.15s;
}

.copy-code-button {
  background: var(--primary-color);
  border: none;
  border-radius: 0 20px 20px 0;
  color: #fff;
  cursor: pointer;
  font: 15px "avenir_book", Arial, sans-serif;
  height: 100%;
  outline: none;
  position: absolute;
  right: -3px;
  top: 0;
  width: 75px;
}

.copy-code-button:active {
  background: #fac53c;
  color: #2b3936;
  transform: scale(0.9);
}

#code {
  margin: 0 0 0 -70px;
}

figure#code {
  font-size: 40px;
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: var(--primary-color);
  box-shadow: 0 6px 10px 0 #666;
  color: whitesmoke;
  text-align: center;
  border-radius: 10px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

#snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

.get-app {
  background-color: #fbceb1;
  color: var(--primary-color);
  display: grid;
  font: 25px "avenir_heavy", Arial, sans-serif;
  grid-gap: 15px;
  grid-template-areas:
    "H H"
    "A G";
  padding: 0 0;
  text-transform: uppercase;
  width: 100%;
}

.get-app > header {
  grid-area: H;
  justify-self: center;
}

.get-app > .apple-store {
  grid-area: A;
  justify-self: right;
}

.get-app > .google-play-store {
  grid-area: G;
  justify-self: left;
}

.app-badge {
  max-height: 40px;
}

.margin-bottom-not-last > * {
  margin-bottom: 5px;
}
.margin-bottom-not-last > :last-child {
  margin-bottom: 0;
}

body.thank-you {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.thank-you > main {
  min-height: auto;
}

body.thank-you > main > header {
  border: none;
}

body.error {
  background-color: #eee;
  width: auto;
  height: auto;
}

body.error .masthead {
  height: 80px;
  text-align: center;
  padding: 0;
  margin: 5px;
  background-color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  z-index: 1;
}

body.error .masthead img {
  width: 240px;
  height: auto;
  margin-top: 5px;
}

body.error .title-box {
  display: block;
  background-color: #023a70;
  width: 80vw;
  margin: 20px auto 4px;
  padding: 15px;
  align-content: center;
  text-align: center;
  box-sizing: content-box;
}

body.error .title-box h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  margin: 20px auto;
}

body.error .main-text {
  display: block;
  background-color: #fff;
  width: 80vw;
  margin: auto;
  padding: 8px;
  align-content: center;
  text-align: center;
}

body.error .main-text h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  color: #023a70;
  margin: 20px auto;
}

body.error .main-text sup {
  font-size: 60%;
}

body.error .main-text p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #023a70;
}

body.error .form-text h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  color: #023a70;
}

body.error .form-text p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #023a70;
}

body.error input {
  border: 1px solid #cccccc;
  padding: 12px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 0 15px 0;
}

body.error input[type="text"] {
  font-size: 12px;
  color: #023a70;
}

body.error input[type="submit"] {
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  background-color: #80969e;
  border: none;
  padding: 10px 30px;
}

@media screen and (max-width: 480px) {
  body.error .title-box h1 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
  }

  body.error .main-text h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: #023a70;
  }

  body.error .main-text p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: #023a70;
  }

  body.error .form-text h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: #023a70;
  }

  body.error .form-text p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: #023a70;
  }
}

.margin-bottom-not-last {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.margin-bottom-not-last > * {
  margin-bottom: 10px;
}
.margin-bottom-not-last > :last-child {
  margin-bottom: 0;
}

.text-center {
  text-align: center;
}

.counter-container {
  margin: 0 auto;
}

.new-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #0360a8;
  background: #f26923;
  border-radius: 50%;
  max-width: 150px;
  min-width: 150px;
  max-height: 150px;
}