:root {
  --spacer-8: 8px;
  --spacer-16: 16px;
  --spacer-24: 24px;
  --spacer-32: 32px;
  --spacer-48: 48px;
  --spacer-64: 64px;
  --spacer-96: 96px;
  --spacer-144: 144px;
  --spacer-372: 372px;
  --black: #1a1a1a;
  --light-gray: #FCF6EF;
  --gray: #939598;
  --yellow: #FFFFE3;
}

.logo {
  width: 35px;
}
@media screen and (max-width: 768px) {
  .logo {
    width: 22px;
  }
}

body {
  background-color: var(--light-gray);
  margin: 0;
  overflow-x: hidden;
}

h1 {
  font: 72px/110% "Satoshi-Variable";
  font-variation-settings: "wght" 550;
  margin: var(--spacer-64) 0 var(--spacer-64) -4px;
  color: var(--black);
  letter-spacing: -1px;
}
@media screen and (max-width: 768px) {
  h1 {
    margin: var(--spacer-32) 0 var(--spacer-48) -4px;
    font: 42px/110% "Satoshi-Variable", helvetica;
    letter-spacing: -1px;
    font-variation-settings: "wght" 600;
  }
}

h2 {
  font: 32px "Satoshi-Variable", helvetica;
  font-variation-settings: "wght" 700;
  margin: 0 0 var(--spacer-32) 0;
  color: var(--black);
}
@media screen and (max-width: 1024px) {
  h2 {
    font: 24px "Satoshi-Variable";
    margin: 0 0 var(--spacer-24) 0;
    font-variation-settings: "wght" 700;
  }
}

p {
  font: 24px/36px "Satoshi-Variable", helvetica;
  font-variation-settings: "wght" 440;
  margin: 2px 0 2px 0;
  color: var(--black);
}
@media screen and (max-width: 1024px) {
  p {
    font: 20px/32px "Satoshi-Variable";
    font-variation-settings: "wght" 480;
  }
}

.bold {
  font-variation-settings: "wght" 700;
}

.light {
  color: var(--gray);
}

.white {
  background-color: white;
}

a {
  color: var(--black);
  padding: 12px 24px;
  margin: 2px 8px 12px 0;
  background-color: #FCF6EF;
  color: var(--black);
  text-decoration: none;
  border-radius: 40px;
  display: inline-block;
  font: 20px/36px "Satoshi-Variable";
  font-variation-settings: "wght" 475;
}
@media screen and (max-width: 1024px) {
  a {
    font: 18px "Satoshi-Variable";
    text-align: center;
    margin: 2px 8px 12px 0;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 768px) {
  a {
    font-variation-settings: "wght" 520;
  }
}
a:hover {
  background-color: #F8ECDD;
}
a.white {
  align-self: flex-start;
  background-color: white !important;
}

.white:hover {
  background-color: #F8ECDD !important;
}

main {
  max-width: 1280px;
  width: 76%;
  background-color: white;
  padding: var(--spacer-96);
  margin: var(--spacer-96) auto 100vh auto;
  border-radius: 20px;
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 1024px) {
  main {
    padding: var(--spacer-64);
  }
}
@media screen and (max-width: 768px) {
  main {
    width: 90%;
    padding: var(--spacer-48) var(--spacer-24);
    margin: var(--spacer-24) auto 100vh auto;
    box-sizing: border-box;
    border-radius: 12px;
  }
}

article {
  width: 76%;
  max-width: 1280px;
  margin: var(--spacer-96) auto var(--spacer-96) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1440px) {
  article {
    max-width: 1024px;
  }
}
@media screen and (max-width: 768px) {
  article {
    margin: var(--spacer-48) auto var(--spacer-48) auto;
  }
}
article img, article video {
  width: 100%;
  max-width: 1440px;
}

figure {
  padding: 6%;
  background-color: white;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  Width: 100%;
  align-items: center;
}
@media screen and (max-width: 768px) {
  figure {
    flex-direction: column;
  }
}
figure .mobile {
  width: 33.3333%;
}
@media screen and (max-width: 768px) {
  figure .mobile {
    width: 76%;
  }
}

@media screen and (max-width: 768px) {
  figure > * {
    margin: 32px 0;
  }
}
.header {
  width: 100%;
  background-repeat: no-repeat;
  height: 400px;
}
@media screen and (min-width: 1441px) {
  .header {
    height: 600px;
  }
}
.header h1 {
  max-width: 960px;
  margin: 0 auto;
  font-variation-settings: "wght" 700;
  font: 96px/110% "Satoshi-Variable";
  position: relative;
  z-index: 2;
}

.bopis {
  background-image: url("../images/gopuff/bopis/header.png");
  background-position: top -150px center;
  background-color: #F8ECDD;
}
@media screen and (max-width: 768px) {
  .bopis {
    background-size: 200%;
    height: 240px;
    background-position: top -75px center;
  }
}

.columns {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 768px) {
  .columns {
    flex-direction: column;
  }
}

.left {
  width: 65%;
  margin: 0 var(--spacer-96) 0 0;
}
@media screen and (max-width: 768px) {
  .left {
    width: 100%;
    margin: 0;
  }
}

.right {
  width: 35%;
}
@media screen and (max-width: 768px) {
  .right {
    width: 100%;
  }
}

.border {
  border: 1px solid rgba(0, 0, 0, 0.04);
}

section {
  margin: 0 0 var(--spacer-64) 0;
  width: 100%;
  max-width: 760px;
}
section.blurb {
  margin: 192px 0 !important;
}
@media screen and (max-width: 768px) {
  section {
    margin: 0 0 var(--spacer-32) 0;
  }
}

.job {
  margin: 0 0 var(--spacer-32) 0;
}

#lfmMostRecentTrack {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#lfmMostRecentTrack img {
  width: 152px;
  margin: 0 var(--spacer-24) 0 0;
}
@media screen and (max-width: 768px) {
  #lfmMostRecentTrack img {
    width: 116px;
    margin: 0 20px 0 0;
  }
}
#lfmMostRecentTrack #information, #lfmMostRecentTrack #lfmMostRecentTrackTitle, #lfmMostRecentTrack #lfmMostRecentTrackArtist, #lfmMostRecentTrack #lfmMostRecentTrackDate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info {
  text-decoration: underline;
  color: var(--gray);
}
.info:hover {
  cursor: help;
  color: var(--black);
}

.info:hover + .tooltip {
  display: block;
}

.info-container {
  position: relative;
}

.tooltip {
  display: none;
  position: absolute;
  background-color: white;
  color: black;
  left: 0;
  top: 0;
  width: max-content;
  transform: translate(0, -100%);
  box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.1);
  padding: 16px 16px 8px 16px;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  .tooltip {
    position: fixed;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
}
.tooltip img {
  width: 300px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .tooltip img {
    width: 100%;
  }
}

footer {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 76%;
}
@media screen and (max-width: 768px) {
  footer {
    width: 89%;
  }
}
footer p {
  font: 18px/30px "Satoshi-Variable";
}

.footer-logo {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 80%;
  width: 16px;
  transform: translate(-50%, -50%);
}

/*# sourceMappingURL=styles.css.map */