/* font set up */
@font-face {
  font-family: jetbrains mono;
  src: url(../Fonts/JetBrainsMono-Bold.ttf);
}
@font-face {
  font-family: karla;
  src: url(../Fonts/Karla-VariableFont_wght.ttf);
}
/* variable set up */
:root {
  --purple: #36226A;
  --white: white;
  --yellow: #EE8F00;
  --hover-purple: #1b0c43;
  --font-family-header: jetbrains mono;
  --font-family-paragraph: karla;
  --font-size-header: 40px;
  --font-size-paragraph: 20px;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  display: flex; /* removes the white line at the bottom of the page */
}

/* header styling */
header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 2.5em;
  z-index: 100;
  position: relative;
}
header .active {
  color: var(--yellow);
}
header .sub-menu .active li {
  color: var(--white) !important;
  background-color: var(--hover-purple) !important;
}
header img {
  width: 5em;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 17em;
}
header .sub-menu {
  display: none;
  position: absolute;
  padding: 0;
  text-align: center;
  margin-left: -50px;
}
header .sub-menu li {
  padding: 10px 10px;
  background-color: var(--yellow);
  color: var(--white);
}
header .sub-menu li:hover {
  background-color: var(--hover-purple);
  color: var(--white) !important;
  cursor: pointer;
}
header .sub-menu > li:first-child {
  font-size: 10px;
  visibility: hidden;
  background-color: white;
  padding: 0;
}
header .sub-menu:hover {
  display: block;
}
header .menu-button:hover .sub-menu {
  display: block;
}
header ul {
  display: inline-flex;
  gap: 4em;
  list-style-type: none;
  font-family: var(--font-family-paragraph);
  text-transform: uppercase;
  font-size: 24px;
  color: var(--purple);
  font-weight: bold;
}
header ul a {
  text-decoration: none;
  color: var(--purple);
}
header ul a:hover {
  color: var(--yellow);
}
header li:hover {
  color: var(--yellow) !important;
  cursor: pointer;
}

/* end of header styling */
/* footer styling */
footer {
  background-color: var(--purple);
  color: var(--white);
  margin: 0;
  width: 76vw;
  padding: 50px 200px;
}
footer img {
  width: 5em;
  margin-bottom: 1em;
}
footer nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
footer nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 0;
  margin: 0;
}
footer nav h3 {
  color: var(--white);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--font-size-header);
  font-family: var(--font-family-header);
  margin: 0;
  margin-bottom: 10px;
}
footer nav li {
  color: var(--white);
  font-weight: 400;
  text-transform: lowercase;
  font-size: 24px;
  font-family: var(--font-family-paragraph);
  list-style-type: none;
  text-transform: uppercase;
}
footer nav li a {
  color: var(--white);
  text-decoration: none;
}
footer nav li a:hover {
  color: var(--yellow);
}
footer nav .instagram, footer nav .email {
  display: flex;
  gap: 0.7em;
  align-items: center;
  padding-top: 0.4em;
}
footer nav .instagram p, footer nav .email p {
  font-family: var(--font-family-paragraph);
  color: var(--white);
  font-size: var(--font-size-paragraph);
  margin: 0;
  font-size: 20px;
}

/* end of footer styling */
/* index page */
/* start of hero styling */
#hero-image {
  background-color: var(--purple);
  height: 90vh;
  width: 100vw;
  overflow: hidden;
}
#hero-image div > div > button:first-child {
  margin-right: 20px;
}
#hero-image h1 {
  font-family: var(--font-family-header);
  font-size: 50px;
  text-align: center;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 0;
  margin-top: 70px;
  z-index: 1;
  position: relative;
}
#hero-image h1 span:last-child {
  background-color: var(--yellow);
  padding: 0 10px;
  height: 38px;
  width: 91px;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  z-index: -1 !important;
  margin-top: 30px;
  margin-left: -9px;
}
#hero-image h1 span:first-child {
  background-color: var(--yellow);
  padding: 0 10px;
  height: 38px;
  width: 151px;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  z-index: -1;
  margin-top: 30px;
  margin-left: -9px;
}
#hero-image h2 {
  color: var(--white);
  font-family: var(--font-family-paragraph);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 34px;
}
#hero-image button {
  color: var(--white);
  background-color: var(--yellow);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
}
#hero-image button:hover {
  color: var(--yellow);
  background-color: var(--white);
  cursor: pointer;
}
#hero-image > div {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#hero-image #bookmark {
  position: relative;
  left: 0;
  bottom: 10em;
  width: 25em;
}
#hero-image #clothing {
  position: relative;
  bottom: 3em;
  left: 6em;
}
#hero-image #sticker {
  position: relative;
  bottom: 10em;
  left: 12em;
  width: 25em;
}
#hero-image #graphic-arrow {
  position: absolute;
  top: 14em;
  right: 20em;
  width: 4em;
}

/* end of hero styling */
/* start of categories styling */
.categories {
  display: flex;
  justify-content: space-between;
  margin: 50px 200px;
  /* wobbly lines */
  /* arrow */
}
.categories > img:last-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 8em;
  margin-top: -1em;
}
.categories > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: 30em;
  left: 3em;
}
.categories div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.categories div img {
  height: 24em;
  width: 16em;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 150px 150px 0 0;
  position: relative;
  border: 16px solid var(--purple);
}
.categories h3 {
  position: relative;
  font-family: var(--font-family-header);
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: -28px;
  text-align: center;
  background-color: var(--white);
  padding: 5px 20px;
  color: var(--yellow);
  margin-bottom: 0;
}
.categories p {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  color: var(--purple);
}
.categories button {
  color: var(--white);
  background-color: var(--purple);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
  width: 100%;
}
.categories button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}

/* end of categories styling */
/* start of our history styling */
.our-history {
  background-color: var(--purple);
  height: 31vw;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 160px;
  width: 90vw;
}
.our-history img {
  width: 62vw;
  border-radius: 0 500px 500px 0;
  border-right: 18px solid var(--white);
  border-top: 18px solid var(--white);
  border-bottom: 18px solid var(--white);
  margin-right: 50px;
}
.our-history h3 {
  color: var(--white);
  font-family: var(--font-family-header);
  font-size: var(--font-size-header);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.our-history p {
  font-size: var(--font-size-paragraph);
  font-family: var(--font-family-paragraph);
  color: var(--white);
  margin-bottom: 30px;
}
.our-history button {
  color: var(--purple);
  background-color: var(--white);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
}
.our-history button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}

/* end of our history styling */
/* start of bestsellers styling */
.bestsellers {
  margin: 50px 200px;
  /* arrow */
  /* wobbly lines */
}
.bestsellers h3 {
  font-family: var(--font-family-header);
  font-size: var(--font-size-header);
  color: var(--purple);
  text-transform: uppercase;
}
.bestsellers > img:last-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  left: 4em;
  margin-top: -2em;
}
.bestsellers > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
  right: 8em;
  margin-top: 3em;
}
.bestsellers main {
  display: flex;
  justify-content: space-between;
}
.bestsellers main div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bestsellers main div img {
  height: 24em;
  width: 16em;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 150px 150px 0 0;
  position: relative;
  border: 16px solid var(--purple);
}
.bestsellers main h3 {
  position: relative;
  font-family: var(--font-family-header);
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: -28px;
  text-align: center;
  background-color: var(--white);
  padding: 5px 20px;
  color: var(--yellow);
  margin-bottom: 0;
}
.bestsellers main p {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  color: var(--purple);
}
.bestsellers main button {
  color: var(--white);
  background-color: var(--purple);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
  width: 100%;
}
.bestsellers main button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}

/* end of bestsellers styling */
/* start of can i help you styling */
.home-contact {
  background-color: var(--purple);
  height: 24vw;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 160px;
  width: 90vw;
}
.home-contact img {
  /* big immage */
  /* wobbly lines */
}
.home-contact img:first-child {
  min-width: 62vw;
  left: 0px;
  position: relative;
  border-radius: 0 500px 500px 0;
  border-right: 18px solid var(--white);
  border-top: 18px solid var(--white);
  border-bottom: 18px solid var(--white);
  margin-right: 55px;
}
.home-contact img:last-child {
  width: 3.5em;
  position: absolute;
  right: 11.5em;
  margin-bottom: 15em;
}
.home-contact h3 {
  color: var(--white);
  font-family: var(--font-family-header);
  font-size: var(--font-size-header);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.home-contact p {
  font-size: var(--font-size-paragraph);
  font-family: var(--font-family-paragraph);
  color: var(--white);
  margin-bottom: 30px;
}
.home-contact button {
  color: var(--purple);
  background-color: var(--white);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
}
.home-contact button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}

/* end of can i help you styling */
/* start of review styling */
.reviews {
  padding: 50px 200px;
  /* wobbly lines */
  /* arrow */
}
.reviews h3 {
  font-size: var(--font-size-header);
  font-family: var(--font-family-header);
  text-transform: uppercase;
  color: var(--purple);
  margin-top: 0;
}
.reviews > img:last-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  left: 8em;
  margin-top: -2em;
  transform: rotate(196deg);
}
.reviews > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: -3em;
  right: 9em;
  transform: rotate(169deg);
}
.reviews main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.reviews main div {
  width: 15vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reviews main div p {
  font-size: var(--font-size-paragraph);
  font-family: var(--font-family-paragraph);
  color: var(--purple);
  text-align: center;
}
.reviews main div img {
  width: 7em;
}

/* end of review styling */
/* end of index page */
/* start of shop page */
.hero-shop {
  background-color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35vh;
  /* arrow */
  /* wobbly lines */
}
.hero-shop > img:last-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 29em;
  margin-top: 7em;
  transform: rotate(-6deg);
}
.hero-shop > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: -5em;
  left: 27em;
  transform: rotate(251deg);
}
.hero-shop h1 {
  color: var(--white);
  font-size: 50px;
  font-family: var(--font-family-header);
  text-transform: uppercase;
  z-index: 1;
  position: relative;
}
.hero-shop h1 span {
  background-color: var(--yellow);
  padding: 0 10px;
  height: 38px;
  width: 4.2em;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  z-index: -1 !important;
  margin-top: 30px;
  margin-left: -9px;
}

/* end of hero shop */
/* start of categories shop */
.categories-shop {
  display: flex;
  justify-content: space-between;
  margin: 50px 200px;
  /* wobbly lines */
}
.categories-shop > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 8em;
  margin-top: -1em;
}
.categories-shop div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.categories-shop div img {
  height: 24em;
  width: 16em;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 150px 150px 0 0;
  position: relative;
  border: 16px solid var(--purple);
}
.categories-shop h3 {
  position: relative;
  font-family: var(--font-family-header);
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: -28px;
  text-align: center;
  background-color: var(--white);
  padding: 5px 20px;
  color: var(--yellow);
  margin-bottom: 20px;
}
.categories-shop button {
  color: var(--white);
  background-color: var(--purple);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
  width: 100%;
}
.categories-shop button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}

/* end of categories shop */
/* start of listings */
.listings {
  padding: 50px 200px;
}
.listings .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-row-gap: 50px;
}
.listings .row .list {
  width: 16vw;
}
.listings .row h3 {
  font-family: var(--font-family-header);
  font-size: 19px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0;
}
.listings .row p {
  font-family: var(--font-family-paragraph);
  font-size: 20px;
  margin-top: 0;
  color: var(--yellow);
  font-weight: bold;
}
.listings .row button {
  color: var(--white);
  background-color: var(--purple);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
  width: 100%;
}
.listings .row button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}
.listings img {
  min-width: 14em;
  max-width: 14;
  min-height: 23em;
  max-height: 23;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 140px 140px 0 0;
  border: 13px solid var(--purple);
}

/* end of listings */
/* end of shop page */
/* start of bookmarks page */
.hero-bookmarks {
  background-color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35vh;
  /* arrow */
  /* wobbly lines */
}
.hero-bookmarks > img:last-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 17em;
  margin-top: 7em;
  transform: rotate(-6deg);
}
.hero-bookmarks > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: -5em;
  left: 15em;
  transform: rotate(251deg);
}
.hero-bookmarks h1 {
  color: var(--white);
  font-size: 50px;
  font-family: var(--font-family-header);
  text-transform: uppercase;
  z-index: 1;
  position: relative;
}
.hero-bookmarks h1 span {
  background-color: var(--yellow);
  padding: 0 10px;
  height: 38px;
  width: 5.4em;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  z-index: -1 !important;
  margin-top: 30px;
  margin-left: -9px;
}

.bookmarks-filter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 50px 200px;
  gap: 12em;
}
.bookmarks-filter img {
  height: 24em;
  width: 16em;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 150px 150px 0 0;
  position: relative;
  border: 16px solid var(--purple);
}
.bookmarks-filter aside h2 {
  font-family: var(--font-family-header);
  font-size: 60px;
  color: var(--purple);
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1;
}
.bookmarks-filter aside h3 {
  color: var(--purple);
  font-family: var(--font-family-header);
  font-size: 22px;
  text-transform: uppercase;
  margin: 0;
  font-style: italic;
}
.bookmarks-filter aside p {
  color: var(--purple);
  font-family: var(--font-family-paragraph);
  font-size: 29px;
  text-transform: uppercase;
  margin: 10px 0 0 0;
}

/* stickers page */
/* hero stickers page*/
.hero-stickers {
  background-color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35vh;
  /* arrow */
  /* wobbly lines */
}
.hero-stickers > img:last-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 17em;
  margin-top: 7em;
  transform: rotate(-6deg);
}
.hero-stickers > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: -5em;
  left: 15em;
  transform: rotate(251deg);
}
.hero-stickers h1 {
  color: var(--white);
  font-size: 50px;
  font-family: var(--font-family-header);
  text-transform: uppercase;
  z-index: 1;
  position: relative;
}
.hero-stickers h1 span {
  background-color: var(--yellow);
  padding: 0 10px;
  height: 38px;
  width: 4.8em;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  z-index: -1 !important;
  margin-top: 30px;
  margin-left: -9px;
}

/* end of stickers page */
/* start of contact page */
.hero-contact {
  background-color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 72vh;
  padding-top: 50px;
  flex-direction: column;
  /*arrow*/
  /* wobbly lines */
}
.hero-contact p {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  width: 38vw;
  color: var(--white);
  text-align: center;
  margin: 0;
  margin-bottom: 2em;
}
.hero-contact .social-list {
  display: flex;
  gap: 2em;
}
.hero-contact .social-list .social-contact {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1em;
}
.hero-contact .social-list .social-contact .fa-instagram, .hero-contact .social-list .social-contact .fa-envelope, .hero-contact .social-list .social-contact .fa-tiktok {
  color: var(--purple);
  background-color: var(--white);
  padding: 9px;
  border-radius: 100px;
  font-size: 2em;
}
.hero-contact .social-list .social-contact p {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
}
.hero-contact > img:last-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 20em;
  margin-top: 7em;
  transform: rotate(-6deg);
}
.hero-contact > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: 0em;
  left: 17em;
  transform: rotate(251deg);
}
.hero-contact h1 {
  color: var(--white);
  font-size: 50px;
  font-family: var(--font-family-header);
  text-transform: uppercase;
  z-index: 1;
  position: relative;
}
.hero-contact h1 span {
  background-color: var(--yellow);
  padding: 0 10px;
  height: 38px;
  width: 5.9em;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  z-index: -1 !important;
  margin-top: 30px;
  margin-left: -9px;
}

.content-contact {
  width: 49vw;
  display: flex;
  flex-direction: row;
  background-color: var(--yellow);
  margin: 0;
  padding: 50px;
  position: relative;
  left: 22vw;
  top: -8em;
  height: -moz-fit-content;
  height: fit-content;
  gap: 50px;
}
.content-contact .contact-info {
  width: 30vw;
}
.content-contact .contact-info h3 {
  color: var(--white);
  font-family: var(--font-family-header);
  font-size: 55px;
  margin: 0;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1;
}
.content-contact .contact-info p {
  font-size: var(--font-size-paragraph);
  font-family: var(--font-family-paragraph);
  color: var(--white);
  margin: 0;
}
.content-contact .contact-form form {
  display: flex;
  flex-direction: column;
  width: 30vw;
  gap: 20px;
  margin: 0;
}
.content-contact .contact-form form > div {
  display: flex;
  gap: 10px;
}
.content-contact .contact-form form #fname, .content-contact .contact-form form #lname, .content-contact .contact-form form #email, .content-contact .contact-form form textarea {
  background-color: #F2AB40;
  border: none;
  padding: 10px;
  width: 100%;
}
.content-contact .contact-form form #fname::-moz-placeholder, .content-contact .contact-form form #lname::-moz-placeholder, .content-contact .contact-form form #email::-moz-placeholder, .content-contact .contact-form form textarea::-moz-placeholder {
  color: var(--white);
  font-family: var(--font-family-paragraph);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  text-transform: uppercase;
}
.content-contact .contact-form form #fname::placeholder, .content-contact .contact-form form #lname::placeholder, .content-contact .contact-form form #email::placeholder, .content-contact .contact-form form textarea::placeholder {
  color: var(--white);
  font-family: var(--font-family-paragraph);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  text-transform: uppercase;
}
.content-contact .contact-form form #submit-button {
  color: var(--yellow);
  background-color: var(--white);
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  text-transform: uppercase;
  border: none;
  padding: 10px;
  width: 10vw;
}

/* products */
/* heartstopper bookmark */
.hero-heartstopper-bookmark {
  background-color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35vh;
  /* arrow */
  /* wobbly lines */
}
.hero-heartstopper-bookmark > img:last-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 23em;
  margin-top: 7em;
  transform: rotate(-6deg);
}
.hero-heartstopper-bookmark > img:first-of-type {
  height: 4.5em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: -5em;
  left: 22em;
  transform: rotate(251deg);
}
.hero-heartstopper-bookmark h1 {
  color: var(--white);
  font-size: 50px;
  font-family: var(--font-family-header);
  text-transform: uppercase;
  z-index: 1;
  position: relative;
}
.hero-heartstopper-bookmark h1 span {
  background-color: var(--yellow);
  padding: 0 10px;
  height: 38px;
  width: 4.8em;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  z-index: -1 !important;
  margin-top: 30px;
  margin-left: -9px;
}

/* main content */
.heartstopper-bookmark {
  display: flex;
  justify-content: space-between;
  padding: 0 100px 0 0;
}
.heartstopper-bookmark .group-thumbnail {
  bottom: -16em;
  display: flex;
  flex-direction: row;
  right: 24.3em;
  position: absolute;
}
.heartstopper-bookmark .group-thumbnail .thumbnail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
}
.heartstopper-bookmark .group-thumbnail .thumbnail .item img {
  width: 9em;
  height: 9em;
}
.heartstopper-bookmark .group-thumbnail .thumbnail .item img:nth-child(1) {
  border: 10px solid var(--purple);
}
.heartstopper-bookmark .group-thumbnail .thumbnail .item img:not(:nth-child(1)) {
  border-top: 10px solid var(--purple);
  border-right: 10px solid var(--purple);
  border-bottom: 10px solid var(--purple);
}
.heartstopper-bookmark .group-thumbnail .arrows {
  background: var(--purple);
  width: 3em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 10.22em;
  position: relative;
  z-index: 300;
}
.heartstopper-bookmark .group-thumbnail .arrows #next {
  color: var(--white);
  font-size: 30px;
  width: -moz-fit-content;
  width: fit-content;
  left: -6px;
  text-align: center;
  position: relative;
  top: 20px;
  background: none;
  border: none;
  margin-bottom: 20px;
}
.heartstopper-bookmark .group-thumbnail .arrows #next:hover {
  cursor: pointer;
}
.heartstopper-bookmark .group-thumbnail .arrows #prev {
  color: var(--white);
  font-size: 30px;
  width: -moz-fit-content;
  width: fit-content;
  left: -6px;
  text-align: center;
  position: relative;
  bottom: 20px;
  background: none;
  border: none;
  margin-top: 20px;
}
.heartstopper-bookmark .group-thumbnail .arrows #prev:hover {
  cursor: pointer;
}
.heartstopper-bookmark .carousel {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.heartstopper-bookmark .carousel .list .item img {
  width: 70vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}
.heartstopper-bookmark aside {
  width: 18vw;
}
.heartstopper-bookmark aside img {
  /* wobbly lines */
  /* arrow */
}
.heartstopper-bookmark aside img:first-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  margin-top: 1em;
  right: 1em;
  transform: rotate(15deg);
}
.heartstopper-bookmark aside img:last-of-type {
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  right: 7em;
  margin-top: -9em;
  transform: rotate(162deg);
}
.heartstopper-bookmark aside h2 {
  font-size: var(--font-size-header);
  font-family: var(--font-family-header);
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0;
  margin-top: 50px;
}
.heartstopper-bookmark aside > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.heartstopper-bookmark aside > div:first-of-type h3 {
  color: var(--yellow);
  font-family: var(--font-family-header);
  font-size: 26px;
  margin: 0;
}
.heartstopper-bookmark aside p {
  font-size: var(--font-size-paragraph);
  font-family: var(--font-family-paragraph);
  color: var(--purple);
}
.heartstopper-bookmark aside button {
  color: var(--white);
  background-color: var(--purple);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
  width: 100%;
}
.heartstopper-bookmark aside button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}
.heartstopper-bookmark aside div:last-of-type {
  margin-top: 20vh;
}
.heartstopper-bookmark aside div:last-of-type h4 {
  font-size: var(--font-size-header);
  font-family: var(--font-family-header);
  color: var(--purple);
  margin: 0;
  text-transform: uppercase;
}
.heartstopper-bookmark aside div:last-of-type p {
  margin: 0;
}

.heartstopper-description {
  padding: 50px 200px;
}
.heartstopper-description h3 {
  font-size: var(--font-size-header);
  font-family: var(--font-family-header);
  color: var(--purple);
  text-transform: uppercase;
  margin-bottom: 0;
}
.heartstopper-description p {
  color: var(--purple);
  font-size: var(--font-size-paragraph);
  font-family: var(--font-family-paragraph);
}
.heartstopper-description div {
  display: flex;
  gap: 50px;
}

.recommendations {
  padding: 0 200px 50px 200px;
}
.recommendations h3 {
  font-family: var(--font-family-header);
  font-size: var(--font-size-header);
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 20px;
  margin-top: 0;
}
.recommendations main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-row-gap: 50px;
}
.recommendations main .list {
  width: 16vw;
}
.recommendations main .list img {
  min-width: 14em;
  max-width: 14;
  min-height: 23em;
  max-height: 23;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 140px 140px 0 0;
  border: 13px solid var(--purple);
}
.recommendations main .list h3 {
  font-family: var(--font-family-header);
  font-size: 19px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0;
}
.recommendations main .list p {
  font-family: var(--font-family-paragraph);
  font-size: 20px;
  margin-top: 0;
  color: var(--yellow);
  font-weight: bold;
}
.recommendations main button {
  color: var(--white);
  background-color: var(--purple);
  font-family: var(--font-family-paragraph);
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 20px;
  width: 100%;
}
.recommendations main button:hover {
  color: var(--white);
  background-color: var(--yellow);
  cursor: pointer;
}

/* end of hearstopper bookmark */
/* end of products *//*# sourceMappingURL=style.css.map */