@import url("https://use.typekit.net/voy8mrc.css");

:root {
  --black: #000000;
  --white: #ffffff;
  --blue: #4a9ead;
}

.brandon {
  font-family: brandon-grotesque, sans-serif;
}

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

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

#home-hero-1 {
  background-image: url("../assets/qd-holiday-2022-bg.png");
  width: 100%;
  height: 1423px;
}

#game-hero {
  background-image: url("../assets/snow-bg.png");
  width: 100%;
  height: auto;
}

.top-img {
  left: 0;
  top: 0;
}

.font-lg {
  font-size: 20px;
}

.logo {
  width: 305px;
  height: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#back-btn {
  font-family: brandon-grotesque, sans-serif;
  color: var(--white);
  background-color: var(--blue);
}

/* LG */
@media only screen and (max-width: 1227px) and (min-width: 768px) {
  #home-hero-1 {
    background-image: url("../assets/qd-holiday-2022-bg.png");
    background-size: contain;
    background-position: top;
    width: 100%;
    height: auto;
  }
}

/* XS - MD */
@media only screen and (max-width: 767px) and (min-width: 0px) {
  #home-hero-1 {
    background-image: url("");
    width: 100%;
    height: auto;
  }

  .logo {
    width: 90px;
    height: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}