@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Staatliches&family=Titillium+Web:wght@400;700&display=swap");
:root {
  --base-font-family: 'Montserrat', sans-serif;
  --base-header-family: 'Titillium Web', sans-serif;
  --landing-page-font-family: 'Staatliches', cursive;
  --white: hsla(0, 100%, 100%, 1);
  --deep-space-sparkle: hsla(193, 34%, 30%, 1);
  --deeper-space-sparkle: rgb(27, 60, 70);
  --medium-champagne: hsla(51, 100%, 85%, 1);
  --indian-yellow: hsla(36, 72%, 56%, 1);
  --indian-yellow-darker: hsla(36, 82%, 36%, 1);
  --indian-yellow-lighter: hsla(36, 82%, 66%, 1);
  --auburn: hsla(359, 58%, 39%, 1);
  --rosewood: hsla(358, 77%, 19%, 1);
  --cultured: hsla(210, 17%, 98%, 1);
  --cultured-2: hsla(210, 16%, 93%, 1);
  --gainsboro: hsla(210, 14%, 89%, 1);
  --light-gray: hsla(210, 14%, 83%, 1);
  --cadet-blue-crayola: hsla(210, 11%, 71%, 1);
  --slate-gray: hsla(208, 7%, 46%, 1);
  --davys-grey: hsla(210, 9%, 31%, 1);
  --gunmetal: hsla(210, 10%, 23%, 1);
  --charleston-green: hsla(210, 11%, 15%, 1);
  --landing-page-gradient: linear-gradient(180deg, rgba(27,60,70,1) 0%, rgba(86,11,14,1) 40%, rgba(224,159,62,1) 100%);
  --landing-page-gradient-mobile: linear-gradient(180deg, rgba(27,60,70,1) 0%, rgba(86,11,14,1) 40%, rgba(224,159,62,1) 100%);
}

body, html {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: var(--deeper-space-sparkle);
  background: var(--landing-page-gradient);
}

.landing-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
}

.landing-page__title {
  color: var(--white);
  font-family: var(--base-header-family);
  font-size: 5em;
  font-weight: 700;
  margin: 0;
  position: relative;
  text-shadow: 2px 2px 5px #000;
}

.landing-page__title-mask-graphic {
  position: relative;
  top: -59px;
  right: 4px;
  width: 43px;
  cursor: pointer;
  -webkit-transition: ease all .3s;
  transition: ease all .3s;
}

.landing-page__title-mask-graphic:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: ease all .3s;
  transition: ease all .3s;
}

.landing-page__title-mask-graphic-caption {
  color: var(--cultured);
  position: relative;
  top: -66px;
  right: 2px;
  font-family: var(--base-font-family);
  font-size: 6px;
  letter-spacing: 2px;
  opacity: 0;
  text-transform: uppercase;
  -webkit-transition: ease all .5s;
  transition: ease all .5s;
}

.landing-page__tagline {
  color: var(--indian-yellow);
  font-family: var(--base-font-family);
  font-size: .7em;
  font-weight: 700;
  letter-spacing: 1px;
  margin: -48px;
  text-transform: uppercase;
}

.landing-page__tagline-source {
  color: var(--indian-yellow-lighter);
  font-family: var(--base-font-family);
  font-size: .5em;
  letter-spacing: 1px;
  position: relative;
  top: 52px;
  right: 0px;
  text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
  body {
    background: var(--deeper-space-sparkle);
    background: var(--landing-page-gradient-mobile);
  }
  .landing-page {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .landing-page__title {
    font-size: 3em;
    margin: 0;
    padding: 30px 0 0 0;
  }
  .landing-page__title-mask-graphic {
    position: relative;
    top: -40px;
    right: 2px;
    width: 27px;
  }
  .landing-page__title-mask-graphic-caption {
    color: var(--cultured);
    top: -46px;
    right: 2px;
    font-family: var(--base-font-family);
    font-size: 5px;
    letter-spacing: 1px;
  }
  .landing-page__tagline {
    color: var(--medium-champagne);
    font-family: var(--base-header-family);
    font-size: .4em;
    margin: -30px 0 0 0;
  }
  .landing-page__tagline-source {
    color: var(--indian-yellow-lighter);
    font-family: var(--base-header-family);
    font-size: 6px;
    letter-spacing: 1px;
    position: relative;
    top: 3px;
    right: 3px;
    text-transform: uppercase;
  }
}

@media (orientation: landscape) {
  .landing-page__title {
    margin: -15% 0 0 0;
  }
}
/*# sourceMappingURL=styles.css.map */