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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* CSS RESET*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* END CSS RESET*/

body {
  background-color: var(--theme-black-background);
  color: var(--theme-white-text);
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}

#content {
  box-sizing: border-box;
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  padding-top: 2vh;
  height: 100%;
  width: 100%;
}

#title-container {
  display: flex;
  box-sizing: border-box;
  cursor: pointer;

  height: 80%;
  width: 90%;

  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.hero-underblur {
  height: 40px;
  width: 100%;
  bottom: -38px;
  position: absolute;
  /* opacity: 0.5; */
  backdrop-filter: blur(10px);
}

#about {
  font-family: "poiret-one", cursive;
  color: rgb(248, 240, 227);
  font-size: 2.5vh;
}

#masked {
  background-color: var(--theme-vue-background);
  width: 100%;
  position: relative;
}

#title-text {
  font-size: 10vmin;
  text-shadow: -0.5vw -0.5vw 0 #000, 0.5vw -0.5vw 0 #000, -0.5vw 0.5vw 0 #000, 0.5vw 0.5vw 0 #000;
}

.visible-email-form {
  left: 5px;
}

#content>.block {
  width: 75vmin;
  text-align: center;
  display: flex;
  align-content: center;
  justify-content: center;
  padding-bottom: 7px;
}

#signup input,
#signup button {
  font-family: "poiret-one", cursive;
  font-weight: normal;
}

#form-email {
  color: #222;
  border: 0px;
  padding: 5px;
  width: 375px;
  flex-shrink: 1;
  background-color: var(--theme-black-background);
  border-bottom: 1px solid rgb(116, 110, 102);
  color: hsl(37, 60%, 93%);
  font-size: 2.5vh;
}

#form-email:focus {
  outline: none;
}

#form-email::placeholder {
  text-align: center;
  color: hsl(37, 15%, 65%);
}

#form-submit {
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border: 0px;
  flex-shrink: 0;
  background-color: var(--theme-black-background);
  color: rgb(248, 240, 227);
  border-left: 1px solid rgb(116, 110, 102);
  border-bottom: 1px solid rgb(116, 110, 102);
  cursor: pointer;
  font-size: 2.5vh;
}

#error-message {
  width: 380px;
  padding: 5px;
  position: absolute;
  background-color: var(--theme-black-background);
  display: none;
}

.error {
  color: rgb(255, 136, 0);
}

.success {
  color: rgb(91, 155, 91);
}

.invisible {
  display: none;
}

.hidden {
  display: none;
}

.quiet {
  font-family: "poiret-one", cursive;
  font-size: 2.5vh;
  color: rgb(202, 193, 180);
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}

.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}

.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}

.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

/* #site-header {
  width: 100vw;
  align-self: stretch;
} */
/* 
#site-footer {
  width: 100vw;
  align-self: stretch;
} */

#website-footer {
  position: fixed;
  font-family: monospace;
  bottom: 10px;
  right: 10px;
  font-size: 11pt;
  z-index: 100;
}

#website-footer-left {
  position: fixed;
  font-family: monospace;
  bottom: 10px;
  left: 10px;
  font-size: 11pt;
  z-index: 100;
}

#website-footer a,
#website-footer-left a {
  color: var(--theme-white-text);
  text-decoration: none;
  opacity: 0.6;
}

#website-footer a:visited,
#website-footer-left a:visited {
  color:var(--theme-white-text);
  opacity: 0.6;
}

#website-footer a:hover,
#website-footer-left a:hover {
  color:var(--theme-white-text);
  opacity: 0.9;
}

#abt-logo {
  height: 24px;
  width: 24px;
  cursor: pointer;
}

.full-flex-page {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  width: 100%;
  flex-grow: 1
}

#about-page {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  flex-grow: 1
}

a,
a:visited,
a:hover {
  color: inherit;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  form {
    width: 20vw;
    min-width: initial;
  }
}

/* MASTERPLAN PAGE */

body.fuel-page {
  /* --theme-light-pink: #962524;
  --theme-bright-pink-text: #962524; */
  --theme-light-pink: #e5884d;
  --theme-bright-pink-text: #e5884d;
  --Accent-Pink: #e5884d;
}


p {
  color: var(--theme-off-white-text);
}

body {
  overflow-y: hidden;
  overflow-x: hidden;
}

.site-layout {
  display: flex;
  width: 100%;
  max-width: 1440px;
  height: fit-content;
  flex-direction: column;
  align-items: flex-start;
  background-color: #0A0A0A;
}

#site-wrapper,
#plugins-page {
  width: 100%;
  min-height: 100%;
  height: 100%;
  background-color: rgb(10, 10, 10);
  font-family: vinyl, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  /* letter-spacing: 0.5px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  overflow-y: scroll;
}

#product-page {
  width: 100%;
  background-color: rgb(10, 10, 10);
  font-family: vinyl, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1
}

#payment-success-page {
  width: 100%;
  min-height: 100%;
  background-color: var(--theme-dark-background);
  font-family: vinyl, sans-serif;
  font-size: 20px;
  /* line-height: 26px; */
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.normal-page {
  width: 100%;
  /* min-height: 100%; */
  background-color: var(--theme-dark-background);
  font-family: vinyl, sans-serif;
  font-size: 16px;
  /* line-height: 26px; */
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

#cloud-page {
  width: 100%;
  background-color: var(--theme-dark-background);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  /* letter-spacing: 0.5px; */
  box-sizing: border-box;
  display: flex;
  position: relative;
  flex: 1;

}


/* sets everything inside of the cloud SPA to border-box */
#cloud-page * {
  box-sizing: border-box;
}

.content-block-500 {
  width: 900px;
}

/* TEXT subclasses */

.text-poppins {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.text-16-600 {
  font-weight: 600;
  font-size: 16px;
}

.text-24-400 {
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
}


.text-poppins-centered-padding {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  letter-spacing: 0.5px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.text-vinyl {
  font-family: vinyl, sans-serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* STYLING SECTION OCT 2025*/

.button-16sb {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 16px;
  line-height: 24px;
  font-style: normal;
}

.nav-text-16 {
  
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.01em;
}
  

.body-16r {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.16px;
}

/* Container that holds both player and spotlight reel */
.spotlight-section-wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}

.spotlight-spotify-iframe-container {
  flex: 0 0 auto;
  width: 23%;
  height: auto;
}

.spotlight-reel-container {
  flex: 1;
  min-width: 0;
}

.footer-text-bold {
  color: var(--Musik-Hack-White, #F7F4F2);
  
  /* Button 16sb -2% - Account button text */
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.footer-text-16 {
  color: var(--Musik-Hack-White, #F7F4F2);
  
  /* Button 16sb -2% - Account button text */
  font-family: poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.01em;
  opacity: 0.7;
}

.warning-message-text {
  font-family: poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.deactivate-button-text {
  color: var(--Musik-Hack-White, #F7F4F2);
  
  /* Body 16 -1% for table content */
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.16px;
}


h1 {
  font-family: vinyl, sans-serif;
  font-weight: 400;
  letter-spacing: -0.04em;
  font-size: 128px;
  line-height: 0.9em;
}

h2 {
  font-family: vinyl, sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 90px;
  line-height: 0.9em;
}

h3 {
  font-family: poppins, sans-serif;
  font-weight: 400;
  letter-spacing: -0.05em;
  font-size: 51px;
  line-height: 1.2em;
}

h4 {
  font-family: poppins, sans-serif;
  font-weight: 400;
  letter-spacing: -0.04em;
  font-size: 38px;
  line-height: 1.3em;
}

h5 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 1.25em;
}

h6 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-size: 21px;
  line-height: 1.35em;
}

.pSpotlightAlbum {
  font-family: poppins, sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-size: 18px;
  line-height: 1.35em;
}

.pSpotlight {
  font-family: poppins, sans-serif;
  font-weight: 200;
  letter-spacing: -0.02em;
  font-size: 12px;
  line-height: 1.35em;
}

.poppins-button-text {
    font-family: poppins, sans-serif;
    font-weight: 600;
      letter-spacing: -0.02em;
    font-size: 16px;
    line-height: 24px;

}

.poppins-button-text-small {
    font-family: poppins, sans-serif;
    font-weight: 600;
      letter-spacing: -0.02em;
    font-size: 12px;
    line-height: 18px;

}

.floating-header {
  width: 100%;
  height: fit-content;
  position: fixed;

  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border: 1px dashed red;
}

.fh-container {
  display: flex;
  width: 100%;
  height: fit-content;
  max-width: 1312px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 64px;
  flex-wrap: nowrap;
}

.fh-logo {
  display: flex;
  width: fit-content;
  height: fit-content;
  min-width: 214px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}

.fh-logo-image {
  width: 213.5px;
  height: 29px;
}


.fh-main-contents {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}

.fh-stack {
  display: flex;
  width: 100%;
  height: fit-content;
  max-width: 640px;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.fh-stack-item {
  width: fit-content;
  height: fit-content;
}

.fh-right {
  display: flex;
  width: fit-content;
  height: fit-content;
  min-width: 262px;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}

.fh-price {
  display: flex;
  width: fit-content;
  height: fit-content;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.fh-reg-price {
  display: flex;
  width: fit-content;
  height: fit-content;
  opacity: 0.4;
  text-decoration: line-through;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-family: Poppins, sans-serif;
  font-style: normal;
}

.fh-sale-price {
  width: fit-content;
  height: fit-content;
  display: flex;
  opacity: 1;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  justify-content: center;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-style: normal;
}

.fh-cta {
  display: flex;
  width: fit-content;
  height: 56px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;

}

.fh-scroll-progress-bar {


}


@media (max-width: 1199px) and (min-width: 720px) {

  h1 {
    font-size: 90px;
  }

  h2 {
    font-size: 67px;
  }

  h3 {
    font-size: 39px;
  }

  h4 {
    font-size: 31px
  }

  h5 {
    font-size: 25px;
  }

  h6 {
    font-size: 20px;
  }

  .pSpotlightAlbum {
    font-size: 14px;
  }

  .pSpotlight {
    font-family: poppins, sans-serif;
    font-weight: 200;
    letter-spacing: -0.02em;
    font-size: 11px;
    line-height: 1.35em;
  }

  .spotlight-section-wrapper {
    flex-direction: column;
  }
  
  .spotlight-spotify-iframe-container {
    width: 100%;
    height: 152px;

  }
  
  .spotlight-reel-container {
  }


}

@media (max-width: 719px) and (min-width: 0px) {

  h1 {
    font-size: 82px;
  }

  h2 {
    font-size: 60px;
  }

  /* no separate h3 style for this width */
    h3 {
    font-size: 39px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 22px;
  }

  h6 {
    font-size: 18px;
  }

  .pSpotlightAlbum {
    font-size: 8px;
  }

  .spotlight-spotify-iframe-container {
    display: none;
  }

  .body-16r {
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.02em;
  }

  .button-16sb {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 12px;
    line-height: 18px;
    font-style: normal;
  }

  .nav-text-16 {
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.02em;
    font-style: normal;

  }

  .pSpotlight {
    font-family: poppins, sans-serif;
    font-weight: 200;
    letter-spacing: -0.02em;
    font-size: 5px;
    line-height: 1.35em;
  }

  .deactivate-button-text { 
    /* Body 16 -1% for table content */
    font-size: 14px;
  }
 
}

/*==============================================*/

.text-vinyl-adjust {
  font-family: vinyl;
  font-size: 1.15em;
}

.small-caps-title {
  font-family: Poppins, sans-serif;
  font-variant: small-caps;
  font-size: 11pt;
  font-weight: bold;
}

.text-bold {
  font-weight: 500;
}

.text-28,
.text-28-xshrink-mobile {
  font-size: 28px;
  line-height: 40px;
}


.text-24,
.text-24-xshrink-mobile {
  font-size: 24px;
  line-height: 36px;
}

.text-20 {
  font-size: 20px;
  line-height: 30px;
}

.text-big-centered {
  font-size: 42px;
  text-align: center;
}

.text-mid-centered {
  font-size: 30px;
  text-align: center;
}


.text-pink {
  color: var(--theme-bright-pink-text) !important
}

.text-mh-pink {
  color: #f498ba !important
}

.text-light-pink {
  color: var(--theme-light-pink-text)
}

.text-fuel-red {
  color: var(--theme-fuel-red) !important
}

.text-italic {
  font-style: italic;
}

.text-strikethrough {
  text-decoration: line-through;
}

.text-huge-centered {
  font-size: 40px;
  text-align: center;
}

.text-huge-centered-description {
  font-size: 18px;
  text-align: center;
}

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

.pointer-link {
  text-decoration: none;
  cursor: pointer;
}

.break {
  display: none;
}

.mobile-hide {
  display: auto;
}

.desktop-hide {
  display: none;
}


.title-break {
  display: none;
}

.mobile-justify {
  text-align: inherit;
}


.theme-title {
  font-family: vinyl, sans-serif;
  font-size: 36px;
  line-height: 38px;
  margin-top: 60px;
  margin-bottom: 40px;
}

.theme-title-no-padding {
  font-family: vinyl, sans-serif;
  font-size: 36px;
  line-height: 38px;

}

/* PADDING subclasses */

.padding-top-large {
  padding-top: 60px;
}

.padding-top-footnote {
  padding-top: 0px;
}

.padding-top-small {
  padding-top: 10px;
}

.padding-bottom-small {
  padding-bottom: 10px;
}

.padding-top-medium {
  padding-top: 20px;
}

.padding-bottom-medium {
  padding-bottom: 20px;
}

.padding-bottom-large {
  padding-bottom: 60px;
}


/* IMAGES */
#product-screenshot {
  height: auto;
  width: 700px;
}

#square-product-screenshot {
  height: auto;
  width: 500px;

}

#product-header {
  /* new header style from louis*/
  width: 100%;
  display: flex;
  box-sizing: border-box;
  max-width: 1460px;
  height: fit-content;
  flex-direction: column;
  align-items: center;
}


.header-banner, .sale-banner {
  width: 100%;
  height: 50px;
  /* background-color: var(--theme-light-pink); */
  background-color:  rgb(234 67 209);
  text-align: center;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

@media screen and (max-width: 500px) {
  .header-banner, .sale-banner {
    font-size: 16px;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
  }
}

#help-button {
  text-decoration: none;
  margin-right: 20px;
}

.header-nav-buttons a {
  text-decoration: none;
  margin-right: 20px;
  margin-left: 5px;
}

.header-nav-button-decorator {
  height: 6px;
  width: 6px;
  background-color: var(--theme-black-background)
}

.background-pink {
  background-color: var(--theme-light-pink-background);
}

.text-legalese {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 10pt;
  line-height: 16pt;
}

#terms-and-privacy-note {
  font-size: 14px;
  line-height: 24px;
}

.header-logo-container {
  height: 40px;
  margin-left: 20px;
}

.instructions-container {
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 640px;
}

.description-container {
  padding-bottom: 20px;
  width: 80%;
  max-width: 640px;
  font-size: 20px;
  line-height: 1.3em;
}

.description-container ul li {
  margin-top: 17px;
}

.description-container ul {
  margin-top: 17px;
  list-style-type: disc;
  margin-left: 20px;
}

.instructions-table-row {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.instructions-text-right {
  width: 400px;
  text-align: right;
}

.instructions-emoji {
  margin-left: 30px;
  width: 30%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.instructions-table-emoji-cell {
  font-size: 32px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.left-margin-25 {
  margin-left: 25px;
}

.dummy-cell {
  width: 50px;
}

.bold-pink-underline {
  height: 5px;
  width: 100%;
  border-radius: 2px;
  background-color: var(--theme-light-pink-background);
  margin-bottom: 20px;
}

#pink-dividing-line {
  width: 100%;
  height: 0px;
  flex-shrink: 0; 
  background-color: var(--theme-dividing-line-color);
}

#help {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 9px;
  width: 900px;
  height: 481px;
  aspect-ratio: 900 / 481;
  z-index: 10;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 85%;
}

#help-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

#help-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  width: 100%;
}

#product-screenshot-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
  position: relative;
}

#product-screenshot {
  box-shadow: 0px 0px 18px 1px rgba(255, 255, 255, 1);
  z-index: 2;
}

.glow-flair {
  height: 290px;
  width: 290px;
  border-radius: 50%;
  position: absolute;
  background: #ffffff;
  opacity: 0.4;
  filter: blur(250px);
  z-index: 1;
}

.glow-flair-mini {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: absolute;
  background: #ffffff;
  opacity: 0.4;
  filter: blur(250px);
  z-index: 1;
}

#product-footer {
  position: relative;
  display: flex;
  width: 100%;
  height: fit-content;
  padding: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  box-sizing: border-box;
}

.product-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  flex-grow: 1
}

.product-footer-line {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.footer-text-link {
  color: var(--theme-off-white);
  text-decoration: none;
  padding: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
  text-align: center;

}

.footer-pipe {
  display: none;
}

#copyright {
  width: 15%;
  padding-left: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 20px;
  font-size: 12px;
  text-align: left;
}

#copyright-mobile {
  display: none;
}

#copyright-placeholder-mobile {
  display: none;
}

#social-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

}

.social-icon {
  padding: 5px 15px;
  color: var(--theme-off-white);
}

.footer-icon-container {
  width: 15%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
  height: 35px;
  align-self: flex-end;
  padding-bottom:10px;
}

#buy-button-row {
  width: 100%;
  padding-top: 35px;
  padding-bottom: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#demo-link-row {
  width: 100%;
  padding-bottom: 40px;
  text-align: center;
}

#email-input {
  max-width: 325px;
  width: 80%;
  height: 28px;
  padding: 8px 12px;
  font-size: 24px;
  font-family: vinyl, sans-serif;
  letter-spacing: 0.5px;
  font-weight: 300;
  border-radius: 12px;
  border: 0;
}

.buy-button,
.buy-button-dark {
  width: 175px;
  height: 70px;
  border-radius: 20px;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.buy-button,
#email-input {
  background: var(--theme-off-white);
  filter: drop-shadow(0px 0px 6px #e9e9e9bb);
}

.buy-button-dark {
  background: var(--theme-dark-background);
  filter: drop-shadow(0px 0px 6px var(--theme-dark-background));
  text-decoration: none;

}

.buy-button p {
  color: #181818;
  padding: 3px;
}

.buy-button-dark p {
  color: var(--theme-off-white-text);
  padding: 3px;
}

#confirm-email-modal {
  position: fixed;
  z-index: 5;
  height: 100%;
  width: 100%;
  background-color: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#confirm-email-modal-title {
  margin-top: 120px;
  margin-bottom: 25px;
}

#close-modal-button {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  padding: 10px;
}

#confirm-email-modal p {
  width: 85%;
}

#mailing-list-line {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 20px;
  line-height: 24px;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/* sam crap */
#help {
  padding-top: 0px;
  display: block;
}

#controls {
  width: 43%;
  display: block;
}

#technique {
  width: 47%;
}

#help .title {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 3px solid #f498ba;
  line-height: 27px;
  text-align: center;
  font-size: 25px;
  margin-bottom: 20px;
}

#help .explain {
  margin-top: 5px;
  margin-bottom: 17px;
}

#help .explain .label {
  font-family: vinyl, sans-serif;
  font-size: 20px;
}

#help ol {
  list-style-type: decimal;
  list-style-position: outside;
}

#help ol li {
  line-height: 20px;
  margin-bottom: 15px;
}

#help ol li::marker {
  font-family: vinyl;
  font-size: 1.15em;
}

#help .explain .description,
#help .description {
  font-family: Poppins, sans;
  font-size: 15px;
}

.title-50 {
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 50px;
  text-align: center;
}

/*LARGEST SCREENSHOT THRESHOLD - START SCALING DOWN*/
@media screen and (max-width: 1125px) {
  #product-screenshot {
    width: 80%;
    height: auto;
  }

  #square-product-screenshot {
    width: 50%;
    height: auto
  }

  #help {
    width: 80%;
    height: auto;
  }

  #controls {
    display: none;
    width: 90%;
  }

  #technique {
    width: 90%;
    display: block;
  }

  #help .title {
    margin-left: 5%;
    margin-right: 5%;
    border-bottom: none;
    cursor: pointer;
  }

  #help .selected-title {
    border-bottom: 3px solid #f498ba;
  }

  .content-block-500 {
    width: 80%;
  }
}

@media screen and (max-width: 1000px) {
  #help .explain {
    margin-bottom: 1.5%;
  }

  #help ol li {
    margin-bottom: 2%;
  }
}

@media screen and (max-width: 600px) {


  #square-product-screenshot {
    width: 80%;
  }
  
  .title-break {
    display: block;
  }

  /* #product-footer {
    height: 210px;
    flex-shrink: 0; 
  } */

  .product-footer-line {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
  }

  .footer-text-link {
    font-size: 16px;
  }

  #copyright {
    display: none;
  }

  #copyright-placeholder-mobile {
    display: flex;
    width: 15%;
    height: 25px;
  }

  .footer-icon-container {
    width: 15%;
    height: 25px;
    padding-right: 15px;
    padding-bottom: 10px;
  }

  #social-icons {
padding: 10px;
  }

  .social-icon {
    padding: 5px 15px;
  }

  #copyright-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
      width: 100%;
      padding-bottom: 10px;
  }
}

/*MOBILE THRESHOLD*/
@media screen and (max-width: 500px) {

  html,
  body {
    /* overflow: hidden;
    overflow-y: scroll; */
    overflow-x: hidden;
  }

  #site-wrapper {
    font-size: 15px;
    /* padding-bottom: 100px; */
  }

  .text-big-centered {
    font-size: 32px;
  }

  .text-mid-centered {
    font-size: 18px;
  }

  .text-28 {
    font-size: 20px;
    line-height: 30px;
  }

  .text-28-xshrink-mobile {
    font-size: 16px;
    line-height: 18px;
  }


  .text-24 {
    font-size: 20px;
    line-height: 30px;
  }

  .text-24-xshrink-mobile {
    font-size: 16px;
    line-height: 18px;
  }

  .text-20 {
    font-size: 16px;
    line-height: 22px;
  }

  .text-huge-centered {
    font-size: 30px;
  }

  .text-legalese {
    font-size: 9pt;
  }

  .break {
    display: block;
  }

  .mobile-hide {
    display: none;
  }

  .desktop-hide {
    display: block;
  }

  .mobile-justify {
    text-align: justify;
  }

  .padding-top-large {
    padding-top: 35px;
  }

  .padding-top-footnote {
    padding-top: 0px;
  }

  .padding-top-small {
    padding-top: 5px;
  }

  .padding-bottom-large {
    padding-bottom: 40px;
  }

  .padding-bottom-medium {
    padding-bottom: 20px;
  }

  .glow-flair {
    height: 125px;
    width: 125px;
  }

  .instructions-container {
    padding-bottom: 40px;
  }

  .instructions-table-row {
    height: 45px;
  }

  .instructions-text {
    width: 60%;
  }

  .instructions-table-emoji-cell {
    font-size: 24px;
    width: 35px;
  }

  .left-margin-25 {
    margin-left: 15px;
  }

  .dummy-cell {
    width: 90px;
  }

  .buy-button,
  .buy-button-dark {
    height: 60px;
    width: 150px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .buy-button-wider-mobile {
    width: 130px;
  }

  .buy-button .small-caps-title {
    font-size: 12px;
  }

  .demo-button {
    /* width: 95px !important; */
    margin-left: 15px;
    margin-right: 15px;
  }

  .manual-button {
    width: 120px !important
  }

  .buy-button p,
  .buy-button-dark p {
    padding: 2px;
  }

  #help {
    background-color: rgba(0, 0, 0, 0.9);
    width: 90%;
    position: fixed;
    top: 85px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
  }

  #technique {
    padding-left: 20px;
  }

  #help .explain {
    margin-bottom: 17px;
  }

  #help ol li {
    margin-bottom: 15px;
  }

  .description-container {
    font-size: 16px;
  }

  #confirm-email-modal-title {
    margin-top: 75px;
    margin-bottom: 15px;
  }

  #mailing-list-line {
    width: 85%;
  }

  #terms-and-privacy-note {
    font-size: 12px;
    line-height: 20px;
    padding-top: 20px;
  }

  .header-nav-buttons a {
    margin-right: 10px;
  }
}

#mp-logo {
  width: 500px;
  height: auto;
}

#contact, #user-login, #redeem-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
  width: 100%;
}

#contact {
  margin-bottom: 24px;
}

.form-label {
  width: 100%;
  text-align: center;
  font-size: 30px;
  margin-bottom: 5px;
}

.press-row-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.press-row-desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


.press-landscape-videos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

#contact-email, #code, #confirm-email {
  margin: 5px 0px;
  width: 500px;
  min-width: 300px;
  background-color: var(--theme-off-white);
  border: none;
  border-radius: 10px;
  padding: 5px;
  padding-left: 10px;
}

.submit-button {
  margin-top: 20px;
  height: 40px;
  align-self: center;
  font-size: 30px;
  border: none;
  border-radius: 10px;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.submit-button-disabled, .new-button-container.demo-button.submit-button-disabled{
  background-color: gray;
  cursor: default;
}

.submit-button-enabled {
  /* width: 150px; */
  background-color: var(--theme-light-pink-background);
  cursor: pointer;
}

@media screen and (max-width: 500px) {

  .mini-demo-form-input-field {
    width: 80%;
    min-width: none;
  }

  #mp-logo {
    width: 300px;
    height: auto;
  }
}

@media screen and (max-width: 719px) {
  #contact-email, #code, #confirm-email {
    width: 100%;
    min-width: unset;
  }
}

@media screen and (max-width: 850px) {

  .press-row-mobile {
    display: flex;
  }

  .press-row-desktop {
    display: none;
  }
}

/* posts */
.post-body p {
  padding-bottom: 20px;
}

.post-body pre {
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 20px;

  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  background-color: #222;
}

.post-body strong {
  font-weight: 500;
}

.post-body pre,
.post-body pre strong {
  font-family: Courier, monospace !important;
  line-height: 1em;
  font-size: 10pt;
}

.post-body ul {
  list-style-type: disc;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 20px
}

.post-body ol li {
  padding-bottom: 10px;
}

ol>li::marker {
  font-weight: bold;
}

.post-body h6 {
  font-size: 0.75em;
  line-height: 1.3em;
  padding-bottom: 20px;
  padding-left: 20%;
}

.post-body ol {
  padding-top: 10px;
  list-style-type: decimal;
  padding-left: 30px;
  padding-bottom: 20px
}

.post-body strong {
  font-weight: bold;
}

/* testimonials */
.testimonials-wrapper {
  position: relative;
  width: 90%;
  max-width: 850px
}

.testimonial {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 20px;
}

.row-reverse {
  flex-direction: row-reverse
}

.testimonial-image-container {
  height: 300px;
  width: 300px;
  position: relative
}

.testimonial-img {
  height: 100%;
  width: 100%
}

.testimonial-text {
  width: 500px;
  box-sizing: border-box;
  height: 300px;
  display: flex;
  flex-direction: column;
  background-color: var(--theme-black-background);
  padding: 30px;
  justify-content: space-between
}


.testimonial-text-only {
  width: 800px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: var(--theme-black-background);
  padding: 30px;
  justify-content: space-between
}

.testimonial-quote {
  font-size: 24px;
  line-height: 1.4em;
  text-transform: uppercase
}

.testimonial-quote::before {
  content: "“";
  margin-left: -0.5em;
}

.testimonial-quote::after {
  content: "”"
}

.testimonial-meta {
  text-align: right
}

.testimonial-name {
  font-size: 24px;
  color: var(--theme-light-pink-text);
  text-transform: uppercase
}

.testimonial-job {
  font-family: Poppins;
  font-size: 14px;
  padding-top: 7px;
  padding-bottom: 7px
}

.testimonial-credits {
  font-family: Poppins;
  font-size: 14px
}

.align-right {
  text-align: right
}

.align-left {
  text-align: left
}

@media screen and (max-width: 850px) {
  .testimonial {
    flex-direction: column;
    justify-content: flex-start
  }

  .row-reverse {
    flex-direction: column;
  }

  .testimonial-text {
    width: 300px;
    height: auto;
    padding: 20px;
    padding-top: 30px;
  }

  .testimonial-text-only {
    width: 300px;
    height: auto;
    padding: 20px;
    padding-top: 30px;
  }

  .testimonial-meta {
    padding-top: 30px;
  }

  .testimonial-quote,
  .testimonial-name {
    font-size: 18px;
  }



  .testimonial-job,
  .testimonial-credits {
    font-size: 11px;
  }
}

.benefits-container {
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
}

.benefit-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  margin-top: 70px;
  margin-bottom: 50px;
}

/* AA: why do i have to do this?? */
.benefit-row.row-reverse {
  flex-direction: row-reverse;
}

.benefit-item-container {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 20px;
  padding-right: 20px;
}

.spotify-wrapper {
  height: 352px;
}

.benefit-text {
  align-items: flex-start;
}

.benefit-image-container {
  align-items: center;
  justify-content: center;
}

.masked-img {
  width: auto;
  height: 100%;
  display: inline-block;
  mask-image: linear-gradient(to top, transparent, #1c1c1c 5%),
    linear-gradient(to bottom, transparent, #1c1c1c 5%),
   linear-gradient(to left, transparent, #1c1c1c 5%),
     linear-gradient(to right, transparent, #1c1c1c 5%); 
  -webkit-mask-image: linear-gradient(to top, transparent, #1c1c1c 5%),
    linear-gradient(to bottom, transparent, #1c1c1c 5%),
    linear-gradient(to left, transparent, #1c1c1c 5%),
    linear-gradient(to right, transparent, #1c1c1c 5%);
  mask-composite: intersect;
  -webkit-mask-composite: intersect;
}

.benefit-header {
  font-size: 36px;
  line-height: 50px;
}

.benefit-subheader {
  font-size: 22px;
  /* font-size: 26px; */
  line-height: 1.3em;
  /* padding-top: 10px; */
  padding-bottom: 15px;
  font-family: vinyl, sans-serif;
  text-transform: uppercase;
}

.benefit-bullet {
  font-size: 20px;
  line-height: 1.3em;
  padding-top: 5px;
  padding-bottom: 9px;
  font-weight: 200;
}

.benefit-image {
  height: 100%;
  width: auto;
}

@media screen and (max-width: 1000px) {

  .benefit-subheader,
  .benefit-bullet {
    font-size: 18px;
  }

  .benefit-image-container {
    max-height: 250px;
  }

  .benefit-item-container {
    width: 40%;
  }

  .benefit-image {
    max-width: 95%;
    height: auto;
    max-height: 100%;
  }

  .masked-img .benefit-image {
    max-width: 100%;
  }

  .masked-img {
    width:auto;
    height: auto;
    max-height: 100%;
}

}

@media screen and (max-width: 600px) {
  .benefits-container #pink-dividing-line {
    width: 90%;
  }

  .benefit-row {
    flex-direction: column;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .benefit-row-special-mobile-rule {
    margin-top: 15px;
  }

  .benefit-item-container {
    width: 90%;
    align-items: center;
  }

  .spotify-wrapper {
    height: 155px;
  }

  .benefit-text {
    margin-top: 20px;
  }

  .benefit-header {
    width: 100%;
    text-align: center;
    font-size: 30px;
  }

  .benefit-row.row-reverse {
    flex-direction: column;
  }

  .benefit-image.css-annoying-rule {
    height: 200px;
    max-width: none;
    max-height: none;
  }
}

/* AUDIO STUFF */

.sample-selection-button {
  font-size: 20px;
  padding: 10px;
  /* margin: 10px; */
  cursor: pointer;
  /* background-color: #403b3b; */
  /* border-radius: 15px; */
  position: absolute; 
  width: 100px;
  height: 30px;
  text-align: center;
  display: flex; 
  align-items: center;
  justify-content: center;
}

/* rotate all of the play buttons around the circle */
.sample-selection-button:nth-child(1){
  transform:rotate(0deg) translateY(150px);
}

.sample-selection-button:nth-child(2){
  transform:rotate(-45deg) translateY(150px);
}

.sample-selection-button:nth-child(3){
  transform:rotate(-90deg) translateY(150px);
}

.sample-selection-button:nth-child(4){
  transform:rotate(-135deg) translateY(150px);
}

.sample-selection-button:nth-child(5){
  transform:rotate(-180deg) translateY(150px);
}

.sample-selection-button:nth-child(6){
  transform:rotate(-225deg) translateY(150px);
}

.sample-selection-button:nth-child(7){
  transform:rotate(-270deg) translateY(150px);
}

.sample-selection-button:nth-child(8){
  transform:rotate(-315deg) translateY(150px);
}


.listen-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 640px;
  margin-top: 10px;
}

.audio-samples-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.samples-half {
  /* width: 50%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.samples-first-half {
  width: 50%;
}

.samples-second-half {
  width: 50%;
}

.sample-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 90%;
  margin-top: 25px;
  margin-bottom: 25px;
}

.sample-row-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sample-row-main .pill-button {
  width: 120px;
  font-size: 18px;
}

.sample-label {
  font-size: 24px;
  width: 30%;
}

.sample-label-main {
  font-size: 30px;
}

.play-pause-button-container {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sample-row-main .play-pause-button-container {
  margin-right: 10px;
}

.play-button {
  font-size: 50px;
  color: var(--theme-off-white);
}

.play-button-pink {
  color: var(--theme-light-pink);
  fill: var(--theme-light-pink);
  cursor: pointer;
}

.pause-button {
  font-size: 50px;
  color: var(--theme-light-pink);
  fill: var(--theme-light-pink);
  cursor: pointer;

}

.pill-button {
  /* width: 100px;
  height: 30px;
  text-align: center;
  border-width: 0px;
  line-height: 30px;
  border-style: solid;
  background-color: var(--theme-off-white);
  color: black;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  z-index:100; */
}

.pill-button-clickable {
  cursor: pointer;
}

.pill-button-left {
  border-right-width: 0.5px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.pill-button-middle {
  border-right-width: 0.5px;
  border-left-width: 0.5px;
}

.pill-button-right {
  /* border-left-width: 0.5px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px; */
}

.button-light-pink,
a.button-light-pink {
  /* border-color: var(--theme-bright-pink-text); */
  background-color: var(--theme-light-pink);
  font-weight: bold;
  cursor: pointer;
}

.samples-description {
  font-size: 20px;
  line-height: 1.3em;
}

.pill-button-and-alert-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
}

#sample-selector {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#sample-selector-horizontal-line {
  margin-top: 30px;
  margin-bottom: 10px;
  width: 100%;
  height: 2px;
  background-color: #403b3b;
}

@media screen and (max-width: 1000px) {
  .samples-first-half {
    width: 65%;
  }

  .samples-second-half {
    width: 35%;
  }

  .samples-description {
    font-size: 16px;
  }
}

@media screen and (max-width: 600px) {
  .audio-samples-container {
    flex-direction: column-reverse;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .samples-first-half {
    width: 100%;
  }

  .samples-second-half {
    width: 100%;
  }

  #loading-alert {
    width: 100%;
    text-align: center;
    padding-top: 20px;
  }

  .sample-row {
    width: 95%;
    margin-top: 15px;
    margin-bottom: 15px;
    justify-content: center;
  }

  .sample-label {
    width: 30%;
    font-size: 16px;
  }


  .play-pause-button-container {
    margin-right: 0px;
  }

  .pill-button {
    width: 90px;
    font-size: 13px;
  }


  .sample-row-main .play-pause-button-container {
    margin-right: 0px;
  }

  .sample-row-main .pill-button {
    width: 110px;
    font-size: 16px;
  }

  .pill-button-and-alert-container {
    margin-left: 0px;
  }

  .sample-label-main {
    margin-right: 0px;
    display: none;
  }

  .listen-container {
    margin-top: 20px;
    max-width: none;
    width: inherit;
    padding-left: 5px;
    padding-right: 5px;
  }

  .hero-underblur {
    height: 20px;
    width: 100%;
    bottom: -18px;
    position: absolute;
    /* opacity: 0.5; */
    backdrop-filter: blur(10px);
  }

  /* #sample-selector {
    flex-wrap: wrap;
    padding-top: 20px;

  } */

  .sample-selection-button {
    padding: 5px;
    margin: 5px;

  }

  #sample-selector-horizontal-line {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
    height: 2px;
    background-color: #403b3b;
  }

}

/* COOKIES BANNER */

#accept-cookies-button {
  margin-right: 20px;
  height: 30px;
  width: 85px;
  border-radius: 10px;
  background-color: #d66790;
  cursor: pointer;
  line-height: 30px;
  text-align: center;
}

#cookies-notice {
  width: 100%;
  height: 65px;
  position: fixed;
  background-color: var(--theme-off-white);
  bottom: 0;
  right: 0;
  z-index: 100;
  background-color: black;
  border-top: 1px solid #d66790;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#cookies-notice a:visited {
  color: #d66790
}

#cookies-text {
  margin-left: 20px;
}

#footer-cookies-spacer {
  width: 100%;
  height: 65px;
  background-color: black;
}

@media screen and (max-width: 500px) {
  #cookies-text {
    width: 65%;
    font-size: 14px;
  }
}

.fa-white-icon {
  fill: var(--theme-logo-white);
}

.fa-pink-icon {
  fill: var(--theme-light-pink);
}
.fa-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fa-large {
  font-size: 1.25em;
}

/* PRODUCT PAGES */
.above-fold-content, .above-fold-content-reverse {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}
.above-fold-text {
  width: 450px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-right: 10px;
}

.above-fold-bullets {
  font-size: 18px;
  margin-top: 20px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.above-fold-bullets ul {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;  /* Center the bullet list */
}

.rto-description {
  font-size: 14px;
}

#pink-sections-dividing-line {
  width: 100%;
  max-width: 1000px;
  height: 1px;
  background-color: var(--theme-light-pink);
}
#bolo-video {
  height: 100%;
  width: 100%;
}

#bolo-video-container {
  width: 900px;
  height: auto;
  position: relative;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  aspect-ratio: 1.78;
}

.hero-container {
  width: 100%;
  position: relative;
}

.hero-video-and-overlay {
  width: 100%;
  height: 280px;
  display: block;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-video-overlay-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

.mp-hero-video-logo {
  width: 75%;
  max-width: 500px;
  height: auto;
}

.fuel-hero-logo {
  width: 75%;
  max-width: 500px;
  height: auto;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-video-subtitle {
  width: 100%;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  font-weight: 400;
}

.mini-demo-form-container {
  width: 100%;
  margin-top: 0px;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-demo-button {
  width: 225px;
  height: 55px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 10; /* fixes click issue */
}

.hero-demo-button.free {
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  height: 65px;
}

@media screen and (max-width: 1125px) {
  .above-fold-content {
    flex-direction: column;
    margin-top: 35px;
  }

  .above-fold-content-reverse {
    flex-direction: column-reverse;
    margin-top: 35px;
  }
  .above-fold-text {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media screen and (max-width: 1000px) {
  #bolo-video-container {
    width: 90%;
  }
}

@media screen and (max-width: 600px) {
  .above-fold-text {
    width: 90%;
  }
  .above-fold-bullets {
    font-size: 16px;
    line-height: 1.3em;
    margin-left: 15px;
    margin-top: 17px;
  }
  /* #rto-buy-button,
  #annual-buy-button,
  #permanent-buy-button {
    width: 110px;
  } */

  .rto-description {
    font-size: 12px;
    /* width: 40%; */
  }

  #pink-sections-dividing-line {
    width: 90%;
  }
}

@media screen and (max-width: 500px) {
  .hero-video-and-overlay {
    height: 250px;
  }

  .mp-hero-video-logo {
    width: 90%;
  }
  
  .fuel-hero-logo {
      width: 90%;
    }
}

/* OTHER CENTRALIZED CSS RULES */

.logo-container-20vh-top {
  width: 200px;
  height: auto;
  padding-top: 20vh;
}

.logo-container {
  width: 200px;
  height: auto;
  padding-top: 15vh;
}



/* NEW STYLES FROM LOUIS */

/*TEXT STYLES*/
.h1-128 {
  color: var(--Musik-Hack-White, #F7F4F2);
  
  /* H1 128r -4% UC */
  font-family: "Vinyl OT", sans-serif;
  font-size: 128px;
  font-style: normal;
  font-weight: 400;
  line-height: 112px; /* 87.5% */
  letter-spacing: -3.84px;
  text-transform: uppercase;
  }
  
  .h2-90 {
    color: var(--Musik-Hack-White, #F7F4F2);
  
    /* H2 90r -4% UC */
    font-family: "Vinyl OT", sans-serif;
    font-size: 90px;
    font-style: normal;
    font-weight: 400;
    line-height: 84px; /* 93.333% */
    letter-spacing: -3.6px;
    text-transform: uppercase;
  
  }

  .slogan-text {
    color: var(--Musik-Hack-White, #F7F4F2);
    font-family: vinyl, sans-serif;
    font-size: 58px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: -1.74px;
    text-transform: uppercase;
  }
  
  .h3-51 {
    color: var(--Musik-Hack-White, #F7F4F2);
  
    /* H3 51r -5% */
    font-family: "Poppins", sans-serif;
    font-size: 51px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px; /* 117.647% */
    letter-spacing: -2.55px; 
  }
  
  .h4-38 {
    color: var(--Musik-Hack-White, #F7F4F2);
  
    /* H4 38r -5% */
    font-family: "Poppins", sans-serif  ;
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px; /* 117.647% */
    letter-spacing: -2.55px;
    
  }
  
  .h5b {
    color: var(--Musik-Hack-White, #F7F4F2);
    text-align: center;
  
    /* H5b 28 */
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 300;
    line-height: 36px;
    letter-spacing: -0.56px;
  }
  
  .h5-title {
    color: var(--Musik-Hack-White, #F7F4F2);
    text-align: center;
  
    /* H5 28 -2% from Figma */
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 300;
    line-height: 36px;
    letter-spacing: -0.56px;
  }
  
  .h6-light {
    color: var(--Musik-Hack-White, #F7F4F2);
    text-align: center;
  
    /* H6 21 -2% from Figma */
    font-family: "Poppins", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -0.42px;
    opacity: 0.8;
  }
  
  .body-b {
    color: var(--Musik-Hack-White, #F7F4F2);
    text-align: center;
    
    /* Body b 16 */
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.16px;
  }
  
  .body-table {
    color: var(--Musik-Hack-White, #F7F4F2);
    text-align: center;
    
    /* Body 16 -1% for table content */
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.16px;
  }
  
  .button-b {
    /* color: var(--Musik-Hack-White, #F7F4F2); */
    text-align: center;
    
    /* Button b 16 */
    font-family: poppins, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.32px; 
  }
  
  /*TRANSITION STYLES*/
  .page-transition-enter-active,
  .page-transition-leave-active {
    transition: all 0.1s ease-in-out;
  }
  
  .page-transition-enter-from {
    opacity: 0;
    transform: translateX(20px);
  }
  
  .page-transition-leave-to {
    opacity: 0;
    transform: translateX(-20px);
  }
  
  .page-transition-enter-to,
  .page-transition-leave-from {
    opacity: 1;
    transform: translateX(0);
  }
  

  .button-text-16 {
    color: var(--Musik-Hack-White, #F7F4F2);
    
    /* Button 16sb -2% - Account button text */
    font-family: poppins, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.02em;
  }

  .footer-button-text-16 {
    color: var(--Musik-Hack-White, #F7F4F2);
    
    /* Button 16sb -2% - Account button text */
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.01em;
  }
  
  .dropdown-text-14 {
    color: var(--Musik-Hack-White, #F7F4F2);
    
    /* Dropdown menu text */
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.14px;
  }