@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primaryColor: #a60233;
  --secondaryColor: #a7e0ea;
  --primaryAccent: #eececd;
  --secondaryAccent: #c0c0c0;
  --black: #110e04;

  font-family: "Raleway";
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.button {
  background: var(--primaryAccent);
  color: var(--primaryColor);
  text-align: center;
  cursor: pointer;
  transition-duration: 0.3s;
  font: inherit;
}
.button:hover {
  background-color: var(--primaryColor);
  color: var(--primaryAccent);
}

h3 {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  padding: 1.75vh;
}

h4 {
  font-size: clamp(1rem, 2.25vw, 1.75rem);
  padding-bottom: 0.25vh;
  padding-top: 0.5vh;
}
.card {
  padding: 2vh;
  border-radius: 6px;
  box-shadow: 0px 0px 5px 0px grey;
}
.page-title {
  background-size: cover;
  background-repeat: no-repeat;
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-words {
  color: whitesmoke;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-size: clamp(1.75rem, 5vw, 7rem);
}
.raleway-italic-thin {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 150;
  font-style: italic;
}
.raleway-italic-bold {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: italic;
}
.raleway-bold {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.primaryColor {
  color: var(--primaryColor);
}
.secondaryColor {
  color: var(--secondaryColor);
}
.swatch {
  position: absolute;
  z-index: -2;
  overflow: hidden;
}
/* Nav Section */
site-header {
  position: sticky;
  top: 0;
  z-index: 3;
}
header {
  height: 12vh;
  position: sticky;

  box-shadow: 1px -6px 11px 0px;
  background-color: white;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 12vh;
  align-items: center;
}
#navLogo {
  display: flex;
  height: 90%;
  margin: 0.5vh;
  z-index: 3;
  flex-direction: column;
}
#navLogo img {
  height: 95%;
}

#navBtnBrgr {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 1vh;
}
#sloganButtonMenu {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#bb4u {
  color: var(--primaryColor);
  text-align: center;
  font-size: clamp(0.75rem, 1vw, 1.5rem);
  color: var(--primaryColor);
  font-weight: 600;
  font-style: italic;
}
.earlyAccessBtn {
  padding: 0.75vh;
  border-radius: 6px;
  margin-right: 2vw;
  font-family: inherit;
  font-size: clamp(0.8rem, 1.5vw, 3rem);
}

.menu-toggle {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  height: 15px;
  margin-right: 1vh;
}
.bar {
  width: 25px;
  height: 2px;
  background-color: black;
}
.menu-toggle:hover {
  margin-top: -0.25vh;
}
#navList {
  display: none;
}
/* Open Menu Styling */
#navList.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 10vh;
  right: 0;
  bottom: 0;
  background-color: white;
  width: 30vh;
  box-shadow: 8px 20px 11px 0px;
  padding-top: 1vh;
}
.navItem {
  padding: 2vh;
  color: var(--black);
}
.navItem:hover {
  text-shadow: 1px 1px var(--primaryColor);
}

#line {
  width: 75%;
  height: 1px;
  background-color: rgb(234, 231, 231);
  margin-left: 1.5vh;
  margin-top: 36vh;
}
#navSocials {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 50%;
  margin: 1vh;
}

.socials:hover {
  /* background-color: color-mix(in srgb, var(--primaryColor), transparent 40%); */
  cursor: pointer;
  transition: 0.2s ease;
  transform: scale(1.1);
}
/* Hero style */
#hero {
  background-image: url("./makeupbacks.jpeg");
  background-size: cover;
  /* min-height: 80vh;
  height: auto; */
  height: 80vh;
  display: flex;
  flex-direction: column;
}
h1 {
  margin-top: 0.1vh;
  color: whitesmoke;
  background-color: color-mix(in srgb, var(--primaryColor), transparent 40%);
  width: 50%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(100px, 42.5vh, 2000px);
}

#heroBlurb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: large;
  width: 50%;
  background-color: color-mix(in srgb, var(--primaryColor), transparent 40%);
  color: whitesmoke;
  margin-left: auto;
  height: clamp(100px, 42.5vh, 2000px);
}

#catchPhrase {
  padding: 2vh;
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 3.5rem);
}
#hero-gs {
  text-align: center;
  font-size: clamp(1rem, 3vw, 2.5rem);
}
.comingFall {
  padding: 1vh;
  text-align: center;
  font-size: clamp(0.75rem, 2vw, 2rem);
}

.heroBtn {
  color: whitesmoke;
  border: 1px solid white;
  background-color: transparent;
  font-size: clamp(0.75rem, 2vw, 2rem);
  margin: 0.75vh;
  padding: 0.75vh;
  border-radius: 10px;
}
.heroBtn:hover {
  border: 1px, var(--primaryColor), solid;
}
#btmBtnHero {
  margin-bottom: 1.25vh;
}

/* What We Do Styling */
#whatWeDo {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 4vh;
  background-color: whitesmoke;
  position: relative;
  overflow: hidden;
}
.wwd-swatch {
  z-index: 0;
}
.wwd-text {
  z-index: 1;
}
#wwd-masc {
  width: 30%;
  top: 10%;
  left: 75%;
  transform: rotate(45deg);
}
#wwd-pwdr {
  width: 40%;
  top: 65%;
  left: -10%;
  transform: rotate(330deg);
}
#wwd-berry {
  width: 25%;
  top: 60%;
  left: 80%;
}

#wwdHeader {
  padding: 1vh;
}
.wwdTag {
  padding: 2vh;

  font-size: clamp(0.6rem, 2.5vw, 1.5rem);
  width: 85%;
}

.listBtn {
  padding: 1vh;
  font-size: clamp(0.8rem, 2vw, 1.5rem);
  background-color: var(--primaryAccent);
  color: var(--primaryColor);
  border: none;
}
#wwd-buttons {
  display: flex;
  margin: 1.5vh;
  justify-content: center;
}

.listBtn:hover {
  background-color: var(--primaryColor);
  color: var(--primaryAccent);
}
#howItWorks img {
  display: block;
  width: 100%;
  margin-top: -5vw;
  margin-bottom: -5vw;
}
/* Who We Are Styling */
#wwa-page-title {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(205, 205, 205, 0.5)),
    url(./makeupbacks.jpeg);
}
#whoWeAre {
  position: relative;
  overflow: hidden;
}
#wwaCards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  padding-top: 2vh;
}
.bioCard {
  display: flex;
  flex-direction: column;
  flex: 1 1 350px;
  max-width: 500px;
  margin: 1vh;
  align-items: center;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
#wwa-rose {
  width: 75%;
  top: 0%;
  left: 60%;
  transform: rotate(60deg);
}
#wwa-found {
  width: 60%;
  top: 30%;
  left: -30%;
  transform: rotate(135deg);
}
#wwa-orange {
  width: 75%;
  top: 70%;
  left: 50%;
  transform: rotate(60deg);
}
.bioTop {
  display: flex;
  padding-bottom: 1.25vh;
}
.bio-top-words {
  padding-left: 0.5vh;
}
.bioPic {
  display: block;
  width: 55%;
  object-fit: scale-down;
  justify-self: center;
  align-self: center;
}
.bio-line {
  width: 100%;
  height: 1px;
  background-color: var(--secondaryColor);
  margin-bottom: 0.75vh;
}

/* FAQs Styling */
#faq-page-title {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(205, 205, 205, 0.5)),
    url(./makeupbacks.jpeg);
}

#faq-section {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

#faqPowder {
  width: 45%;
  top: -7%;
  left: -15%;
}
#faqOrange {
  width: 45%;
  top: 30%;
  left: 70%;
  transform: rotate(120deg);
}
#faqFoundation {
  width: 45%;
  top: 60%;
  left: -15%;
  transform: rotate(90deg);
}
.faq-category {
  padding: 1vh;
}
.questionArrow {
  display: flex;
}
.faq-arrow {
  padding-left: 1.5vh;
  font-size: clamp(1rem, 2.25vw, 1.75rem);
  padding-bottom: 0.25vh;
  padding-top: 0.5vh;
}
.faq-item {
  position: relative;
  cursor: pointer;
  margin: 1vh;
  width: 75%;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}
.faq-item:hover {
  color: var(--primaryColor);
}
.answer {
  display: none;
}
.faq-item.open {
  color: black;
  width: 75%;
}
.faq-item.open .faq-arrow {
  display: none;
}
.faq-item.open .answer {
  display: flex;
  padding: 1.5vh;
}
.faqTag {
  text-align: center;
  padding: 1.5vh;
}
/* Email Form Styling */
#earlyAccess {
  display: flex;
  background-color: var(--primaryColor);
  color: whitesmoke;
  flex-wrap: wrap;
}
#email-list {
  position: relative;
  overflow: hidden;
}

#early-title {
  margin-bottom: 1vh;
}
#earlyAccess img {
  width: 100%;
  max-height: 40vh;
  object-fit: cover;
  margin-top: -1px;
}

#access-text {
  display: flex;
  width: 100%;
  align-items: center;
  height: 100%;
  background-color: var(--primaryColor);
}
#form-blurb {
  text-align: center;
  font-size: clamp(0.75rem, 2.5vw, 2.5rem);
  padding-bottom: 1vh;
  margin: 0.5vh;
  color: var(--primaryAccent);
}
.form-item {
  margin-bottom: 1vh;
  font-size: clamp(0.6rem, 2vw, 1.25rem);
}
#form-input {
  padding-left: 3vh;
  position: relative;
  z-index: 2;
}
#form-gloss-swatch {
  z-index: 1;
  top: 60%;
  width: 50% !important;
  left: 60%;
  transform: rotate(155deg);
}
#form-found-swatch {
  z-index: 1;
  top: 20%;
  width: 50% !important;
  left: -15%;
  transform: rotate(50deg);
}
.form-item input {
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: clamp(0.6rem, 2.25vw, 2rem);
  width: 80%;
  margin-top: 0.75vh;
  border-radius: 7px;
  border: none;
  outline: none;
}
input[type="email"]:focus,
input[type="text"]:focus {
  outline: 2px solid var(--secondaryColor);
}
label {
  display: block;
}
input[type="checkbox"] {
  width: fit-content;
}
#form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 75%;
}

#form-check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2vh;
}
#form-button {
  background-color: var(--primaryAccent);
  color: var(--primaryColor);
  border: none;
  border-radius: 6px;
  padding: 0.75vh;
  display: block;
  margin: auto;
  font-size: clamp(0.75rem, 2.5vw, 1.25rem);
  margin-bottom: 2vh;
  position: relative;
  z-index: 2;
}

#form-button:hover {
  background-color: var(--primaryColor);
  color: white;
  border: 1px white solid;
}
@media (min-width: 768px) {
  #earlyAccess {
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }

  #earlyAccess img {
    width: 50%;
    max-height: none;
    object-fit: cover;
    order: 2;
    margin: 0;
  }

  #access-text {
    width: 50%;
    order: 1;
  }
  #form-gloss-swatch {
    z-index: 1;
    top: 75%;
    width: 60% !important;
    left: 50%;
    transform: rotate(155deg);
  }
  #form-found-swatch {
    z-index: 1;
    top: 25%;
    width: 75% !important;
    left: -25%;
    transform: rotate(50deg);
  }
  #email-list {
    position: relative;
    overflow: visible;
  }
}

/* Class Page Styling */
#class-page-title {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(205, 205, 205, 0.5)),
    url(./makeupbacks.jpeg);
}
#classCards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.classCard {
  padding: 1vh;
  margin: 2.5vh;
  display: flex;
  flex-direction: column;
  flex: 1 1 580px;
  max-width: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
#class-masc-swatch {
  width: 45%;
  top: -2%;
  left: -8%;
  transform: rotate(220deg);
}

#class-found-swatch {
  width: 65%;
  top: 80%;
  left: 55%;
  transform: rotate(160deg);
}
#class-berry-swatch {
  width: 60%;
  top: 45%;
  left: -10%;
  transform: rotate(90deg);
}
#class-rose-swatch {
  width: 75%;
  top: 10%;
  left: 50%;
  transform: rotate(135deg);
}
.class-card-title {
  text-align: center;
  font-weight: 650;
  color: var(--primaryColor);
}
.class-pic {
  width: 40%;
  object-fit: scale-down;
}
.class-card-main {
  display: flex;
  padding: 1vw;
}
.class-card-text {
  padding: 1vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  font-size: clamp(0.6rem, 2vw, 1.25rem);
}
.class-card-button {
  width: fit-content;
  align-self: center;
  background-color: var(--primaryAccent);
  color: var(--primaryColor);
  padding: 1vh;
  border: none;
  border-radius: 6px;
  margin-top: 0.75vh;
}
.class-card-button:hover {
  color: var(--primaryAccent);
  background-color: var(--primaryColor);
}
.class-expanded {
  display: none;
  padding: 1vh;
}

.class-expanded.open {
  display: flex;
  flex-direction: column;
  font-size: clamp(0.6rem, 2vw, 1.25rem);
}

.class-list-title {
  color: var(--primaryColor);
  padding-top: 0.5rem;
}
.class-list {
  list-style-type: circle;
  margin-left: 1rem;
  padding: 1vw;
}
@media (max-width: 1280px) {
  .classCard {
    max-width: 100%;
  }
}
.class-ea-button {
  width: fit-content;
  align-self: center;
  padding: 1vh;
  border-radius: 6px;
  margin: 1.5vh;
}

/* Success Page */
#success-page {
  background-image: url(./swatches/allSwatches.png);
  height: 100vh;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.success-text {
  margin: 1vh;
}
#success-btn {
  border: none;
  border-radius: 6px;
  padding: 1vh;
  margin-top: 2vh;
}
/* Footer Styling */
footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2vh;
  height: 10vh;
  box-shadow: 1px 9px 8px 4px;
  margin-top: auto;
}

#footer-logo {
  height: 90%;
}

#footerSocialsCont {
  display: flex;
  width: 33%;
  padding-left: 0.5vh;
}

.footSocial {
  padding: 0.75vh;
}

#footerText {
  width: 33%;
  text-align: end;
  font-size: clamp(0.5rem, 1.5vw, 1rem);
}
#footerCopyright {
  font-size: clamp(0.3rem, 1vw, 0.75rem);
}
site-footer {
  display: block;
  margin-top: auto;
}