/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */

:root {
  --color-text-main: #000000;
  --color-text-secondary: #ffffff;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: Croissant One;
  --font-family-header: Croissant One;
  --white-chocolate: #f7f1cf;
  --caramel: #9f611a;
  --milk-chocolate: #753522;
  --brightOrange: #e65238;
  --brightYellow: #eeba45;
  --colorModeColor: black;
  --colorModeBGColor: white;
  --invertNumber: 0;
}

@font-face {
  font-family: Croissant One;
  src: url("https://fonts.googleapis.com/css2?family=Croissant+One&display=swap");
}

body {
  font-family: Croissant One;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body a {
  text-decoration: none;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  background-color: #753522;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

main {
  padding: 1rem;
}

section {
  margin-bottom: 2rem;
}

footer {
  text-align: center;
  padding: 1rem;
  /* color: rgba(255, 255, 255, 0.4); */
  color: var(--colorModeColor);
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  margin-top: auto;
  height: 20%;
  margin-bottom: 0;
}

footer a {
  text-decoration: none;
}

footer p {
  color: rgba(255, 255, 255, 0.4);
}

/* Remove list styling */
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

/* Style each menu item */
nav ul li {
  padding: 10px;
}

/* Style each link */
nav ul li a {
  text-decoration: none;
  color: #000;
}

/* Change color on hover */
nav ul li a:hover {
  color: #888;
}

#content {
  padding-top: 60px; /* Adjust this value to match the height of your header */
}

body {
  /* background: linear-gradient(#f7f1cf, #9f611a, #753522, #753522),
    #f7f1cf; */
  background: #9f611a;
  background-attachment: fixed;
  text-align: center;
}

.scrollable-header {
  position: fixed;
  top: 0;
  /* margin-top: 300px; */
  width: 100%;
  z-index: 1000; /* This ensures the header stays on top of other content */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  Add a shadow to the bottom of the header */
  display: flex;
  align-items: center;
  padding: 0 0.1rem; /* Add some padding to the sides of the header */
  height: 3.3rem;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.scrollable-header.scrolled {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.blurred {
  filter: blur(2px); /* Adjust the pixel value to control the amount of blur */
}

/* Header and Subheader */

.Header {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Subheader {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*  Menus */

#menu {
  display: none;
}

#menu-button {
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  /* Adjust this value to change the size of the menu button */
  position: relative;
  margin-left: 1rem;
  margin-right: auto;
}

#menu-button:before {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s;
  z-index: 1;
}

@keyframes color-cycle {
  0% {
    color: #e65238‬;
  }
  30% {
    color: #eeba45;
    transform: scale(1.1);
    filter: invert(1) hue-rotate(180deg);
  }
  60% {
    color: #e65238‬;
    filter: invert(0) hue-rotate(45deg);
  }
  80% {
    color: #eeba45;
    transform: scale(1);
  }
  100% {
    color: #000000;
  }
}

#menu-button:hover {
  position: relative;
  z-index: 1;
  animation-name: color-cycle;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
  background-position: bottom center;
  text-decoration: none !important;
}

#menu-button:hover:before {
  clip-path: circle(150% at 50% 50%);
}

#buttons {
  margin-left: auto;
  justify-content: space-between;
  transition: filter 0.3s ease;
}

#button-1,
#button-2 {
  border: none;
  position: relative;
  margin-right: 1rem;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
}

#button-1:hover,
#button-2:hover {
  position: relative;
  z-index: 1;
  animation-name: color-cycle;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
  background-position: bottom center;
  text-decoration: none !important;
}

#logo-home {
  /* margin-left: 5rem; */
  justify-content: center;
  align-items: center;
  position: relative;
  margin: auto;
  margin-left: 0rem;
  width: 8rem;
  height: 2rem;
}

/*        ----             */

#dropdown {
  top: 5;
  margin-top: 5rem;
}

#dropdown-menu {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  /* background-color: #f9f9f9; */
  background-color: var(--colorModeBGColor);
  width: 255px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 5;
  position: fixed;
  top: 30;
  left: 0;
  margin-top: -1.45rem;
}

#dropdown-menu a {
  /* color: black; */
  color: var(--colorModeColor);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#dropdown-menu img {
  height: 2rem;
  width: 2rem;
  filter: invert(var(--invertNumber));
}

#dropdown-menu a img {
  margin-right: 0.2rem;
}

#dropdown-quizzes {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  /*background-color: var(--colorModeBGColor); */
  filter: invert(var(--invertNumber));
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  z-index: 4;
  position: fixed;
  top: 30;
  left: 0;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
  margin-left: 15.9rem;
}

#dropdown-quizzes a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#dropdown-quizzes img {
  height: 2rem;
  width: 2rem;
}

#dropdown-quizzes a img {
  margin-right: 0.2rem;
}

#dropdown-shop {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  filter: invert(var(--invertNumber));
  /* background-color: var(--colorModeBGColor); */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 4;
  position: fixed;
  top: 30;
  left: 0;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
  margin-left: 15.9rem;
}

#dropdown-shop a {
  color: black;
  /*color: var(--colorModeColor); */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#dropdown-shop img {
  height: 2rem;
  width: 2rem;
}

#dropdown-shop a img {
  margin-right: 0.2rem;
}

/*         ---            */

#bag-menu {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  background-color: var(--colorModeBGColor);
  /* background-color: #f9f9f9; */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  position: fixed;
  top: 45;
  right: 0;
  top: 5;
  margin-top: -1.45rem;
  /* margin-top: 0.6rem; */
}

#bag-menu a {
  color: var(--colorModeColor);
  /* color: black; */
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  /* display: flex; */
  align-items: center;
}

#bag-menu img {
  height: 2rem;
  width: 2rem;
  filter: invert(var(--invertNumber));
  display: flex;
  /* margin-right: 0.2rem;
  margin-left: 0.6rem; */
}

#bag-menu a img {
  margin-right: 0.2rem;
  display: flex;
}

#bag-button {
  display: flex;
  align-items: center;
  margin: auto;
  display: flex;
}

/*         ----        */

#style-menu {
  cursor: pointer;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  /*
  background-color: #ffffff;
  color: black; 
  */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 3px 16px;
  z-index: 5;
  position: fixed;
  top: 50;
  right: 0;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
}

#style-menu a {
  color: var(--colorModeColor);
  /* color: black; 
  background-color: var(--colorModeBGColor); */
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#style-menu img {
  height: 2rem;
  width: 2rem;
  filter: invert(var(--invertNumber));
  margin-right: 0.2rem;
  margin-left: 0.6rem;
}

#style-button {
  display: flex;
  align-items: center;
  margin: auto;
}

#style-button-1 {
  display: flex;
  align-items: center;
  margin: auto;
}

#style-button-2 {
  display: flex;
  align-items: center;
  margin: auto;
}

/*         ----        */

#language-menu {
  cursor: pointer;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;

  background-color: #ffffff;
  color: black;
  /*
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor); */
  filter: invert(var(--invertNumber));
  min-width: 160px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  padding: 3px 16px;
  z-index: 4;
  position: fixed;
  top: 30;
  right: 0;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
  margin-right: 12rem;
}

#language-menu a {
  color: var(--colorModeColor);
  /* color: black; */
  /* background-color: var(--colorModeBGColor); */
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#language-menu img {
  height: 2rem;
  width: 2rem;
  margin-right: 0.2rem;
  margin-left: 0.6rem;
  filter: invert(var(--invertNumber));
}

#english-button {
  display: flex;
  align-items: center;
  margin: auto;
  margin-left: 0.6rem;
}

#spanish-button {
  display: flex;
  align-items: center;
  margin: auto;
  margin-left: 0.6rem;
}

#japanese-button {
  display: flex;
  align-items: center;
  margin: auto;
  margin-left: 0.6rem;
}

/*------------------ Chat ------------------ */

#chat {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  bottom: 5px;
  right: 15px;
  width: 45px;
  height: 45px;
  background-color: #f8f8f8; 
  background-color: rgba(128, 128, 128, 0.3);
  border: 1px solid #cccccc;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 15;
  overflow: hidden;
  transition: width 0.5s, height 0.5s;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
 /* filter: invert(var(--invertNumber)); */
}

#chat textarea {
  width: 100%; /* Adjust the width of the textarea to make room for the send button */
  min-height: 2rem;
  height: 2rem;
  max-height: 4rem;
  height: 2em; /* Set the height of the textarea to the height of a single line of text */
  resize: vertical; /* Prevent the textarea from being resized */
  border-radius: 20px;
}

#chat button {
  margin: auto; /* This will center the button vertically and horizontally */
  display: flex; /* This will allow the use of flexbox properties */
  justify-content: center; /* This will center the button's content horizontally */
  align-items: center; /* This will center the button's content vertically */
  width: 20%; /* Set the width of the send button */
  height: 2.5em; /* Set the height of the send button to the height of a single line of text */
  border-radius: 20px;
  background-color: #f8f8f8;
  margin-left: 5px;
}

#chat p {
  
}

.smokeLottie-container {
  width: 160px;
  height: 200px;
  overflow: hidden;
}

/* ---------------- Quizzes --------------------- */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/*
.Quiz.Options.slide-in h3,
.Quiz.Options.slide-in p{
  transform: translateX(-140%);
  animation: slideInFromLeft 2s ease-out forwards;
}

.Quiz.Options.slide-in h3:nth-of-type(2n),
.Quiz.Options.slide-in p:nth-of-type(2n) {
  animation-delay: 0.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(3n),
.Quiz.Options.slide-in p:nth-of-type(3n) {
  animation-delay: 1s;
}

.Quiz.Options.slide-in h3:nth-of-type(4n),
.Quiz.Options.slide-in p:nth-of-type(4n){
  animation-delay: 1.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(5n),
.Quiz.Options.slide-in p:nth-of-type(5n){
  animation-delay: 2s;
}
*/

.Quiz.Options.slide-in {
  gap: 10px;
  padding: 10px;
}

.Quiz.Options.slide-in h3,
.Quiz.Options.slide-in p,
.quiz-capsule-button {
  transform: translateX(-140%);
  animation: slideInFromLeft 2s ease-out forwards;
  margin: 10px; /* Adds margin around each element */
  
}

.Quiz.Options.slide-in h3:nth-of-type(2n),
.Quiz.Options.slide-in p:nth-of-type(2n),
.quiz-capsule-button:nth-of-type(2n) {
  animation-delay: 0.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(3n),
.Quiz.Options.slide-in p:nth-of-type(3n),
.quiz-capsule-button:nth-of-type(3n) {
  animation-delay: 1s;
}

.Quiz.Options.slide-in h3:nth-of-type(4n),
.Quiz.Options.slide-in p:nth-of-type(4n),
.quiz-capsule-button:nth-of-type(4n) {
  animation-delay: 1.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(5n),
.Quiz.Options.slide-in p:nth-of-type(5n),
.quiz-capsule-button:nth-of-type(5n) {
  animation-delay: 2s;
}

.Quiz.Options.slide-in h3:nth-of-type(6n),
.Quiz.Options.slide-in p:nth-of-type(6n),
.quiz-capsule-button:nth-of-type(6n) {
  animation-delay: 2.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(7n),
.Quiz.Options.slide-in p:nth-of-type(7n),
.quiz-capsule-button:nth-of-type(7n) {
  animation-delay: 3s;
}

.Quiz.Options.slide-in h3:nth-of-type(8n),
.Quiz.Options.slide-in p:nth-of-type(8n),
.quiz-capsule-button:nth-of-type(8n) {
  animation-delay: 3.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(9n),
.Quiz.Options.slide-in p:nth-of-type(9n),
.quiz-capsule-button:nth-of-type(9n) {
  animation-delay: 4s;
}

.Quiz.Options.slide-in h3:nth-of-type(10n),
.Quiz.Options.slide-in p:nth-of-type(10n),
.quiz-capsule-button:nth-of-type(10n) {
  animation-delay: 4.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(11n),
.Quiz.Options.slide-in p:nth-of-type(11n),
.quiz-capsule-button:nth-of-type(11n) {
  animation-delay: 5s;
}

.Quiz.Options.slide-in h3:nth-of-type(12n),
.Quiz.Options.slide-in p:nth-of-type(12n),
.quiz-capsule-button:nth-of-type(12n) {
  animation-delay: 5.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(13n),
.Quiz.Options.slide-in p:nth-of-type(13n),
.quiz-capsule-button:nth-of-type(13n) {
  animation-delay: 6s;
}


.Quiz.Navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.Quiz.Navigation img {
  height: 1.5rem;
  width: auto;
  filter: invert(var(--invertNumber));
}

.Quiz.Navigation .capsule-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Quiz.Navigation .capsule-button.back {
  /* Additional styles for the back button */
  padding: 10px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: none;
  margin-right: auto;
}

.Quiz.Navigation .capsule-button.next {
  /* Additional styles for the back button */
  padding: 10px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black;
  */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: flex;
  margin-left: auto;
}

.Quiz.Navigation.Done {
  padding-top: 15px;
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.Quiz.Navigation.Done .capsule-button {
  border-radius: 15px; /* This makes the buttons capsule-shaped */
  cursor: pointer;
  text-align: center;
  width: 30%;
  max-width: 200px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

.Quiz.Navigation.Done img {
  /* display: none; */
  justify-content: center;
  border: none;
  position: relative;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  margin-left: auto;
  filter: invert(var(--invertNumber));
}

.Quiz.Navigation.Done p {
  /* display: none; */
  justify-content: space-between;
  border: none;
  position: relative;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  margin-right: auto;
}

/* question buttons */

.quiz-capsule-button {
  cursor: pointer;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  /* font-family: Croissant One; */
  text-align: center;
  margin: auto;
  width: 70%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
}

.quiz-capsule-button p {
  margin-top: 5px;
  padding: 0 0px;
  text-align: center;
  margin-left: auto;
  width: 90%;
}

.quiz-capsule-button h3 {
  padding: 10 0px;
  text-align: center;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.capsule-button {
  padding: 10px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
}

.capsule-button.next {
  /* Additional styles for the next button */
}

.Quiz.Question {
  display: none;
  visibility: hidden;
  transition: opacity 1s ease-out;
  justify-content: center; 
  align-items: center;
}

.Question.Navigation {
  display: none;
  visibility: hidden;
  margin-top: 12px;
}

.Question.Navigation .capsule-button {
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  display: flex;
  justify-content: center;
}

.Question-Navigation-Quizzes {
    display: none;
    margin-top: 12px;
    justify-center: center;
}
  
.Question-Navigation-Quizzes img {
  height: 1.5rem;
  width: auto;
  margin-bottom: 0px;
  filter: invert(var(--invertNumber));
  }

.Question.Navigation .capsule-button.back {
  display: none;
  margin-right: auto;
}

.Question.Navigation .capsule-button.next {
  display: none;
  margin-left: auto;
}

.Question.Navigation img {
  height: 1.5rem;
  width: auto;
  margin-bottom: 0px;
  filter: invert(var(--invertNumber));
}

.Question.Navigation p {
  margin-bottom: 10px;
}

.Quiz.Question .quiz-capsule-button {
  margin-top: 10px;
  justify-content: center;
  display: flex;
   padding: 15px 10px;
  margin: 10px;
  align-items: center;
}

.Share.Links img {
  margin-left: 5px;
  margin-right: 5px;
  height: 2rem;
  width: 2rem;
}

.Share.Your.Results {
  /*  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: grey;
  border-radius: 40px;
  height: 50px;
  width: auto;
  padding: 10px;
  color: white;
  margin-top: auto;
  margin-bottom: 20px; */
}

.Share.Your.Results img {
  /*
  margin-left: 5px;
  margin-right: 5px;
  height: 1.5rem;
  width: 1.5rem;
  */
}

.Share.Your.Results p {
  margin-bottom: 0px;
}

/* This styles the progress bar itself */
progress {
  width: 45%;
  height: 15px;
  border-radius: 10px; /* This makes the progress bar rounded */
  -webkit-appearance: none; /* This is necessary to style the progress bar in WebKit browsers */
  appearance: none;
  background-color: rgba(
    128,
    128,
    128,
    0.3
  ); /* This makes the background greyish with low opacity */
}

/* This styles the 'value' part of the progress bar in WebKit browsers */
progress::-webkit-progress-value {
  background: #00ff00; /* This makes the filling green */
  border-radius: 10px; /* This makes the filling rounded */
}

/* This styles the 'value' part of the progress bar in Firefox */
progress::-moz-progress-bar {
  background: #00ff00; /* This makes the filling green */
  border-radius: 10px; /* This makes the filling rounded */
}

/* This styles the 'remaining' part of the progress bar in WebKit browsers */
progress::-webkit-progress-bar {
  background: rgba(
    128,
    128,
    128,
    0.3
  ); /* This makes the background greyish with low opacity */
  border-radius: 10px; /* This makes the background rounded */
}

@keyframes growFromCenter {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.Results {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 80%;
  display: none;
  justify-content: center;
  align-items: column;
  flex-direction: column;
  /*  background-color: white;
 */
  background-color: var(--colorModeBGColor);
  border-radius: 40px;
  z-index: 1000;
  gap: 5px;
  animation: growFromCenter 0.5s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Exit.Result {
  height: 3rem;
  width: 3rem;
  margin-left: auto;
  margin-bottom: auto;
  margin-right: 20px;
  margin-top: 20px;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Results h3 {
  color: var(--colorModeColor);
}

.Results p {
  margin-top: auto;
  margin-bottom: auto;
  color: var(--colorModeColor);
}

.Results img {
  height: 2rem;
  width: 2rem;
}

.Share.Your.Results1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: grey;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 40px;
  height: 50px;
  width: 70%;
  padding: 10px;
  color: white;
  margin-top: 15px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

.Share.Your.Results1 p {
  margin-top: auto;
  margin-bottom: auto;
  height: auto; /* Adjust this value as needed */
  overflow: hidden;
}

.Try.Again {
  border-radius: 15px; /* This makes the buttons capsule-shaped */
  cursor: pointer;
  text-align: center;
  width: 60%;
  height: 11%;
  max-width: 200px;
  background-color: grey;
  color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  outline: none;
  font-family: Croissant One;
  font-size: 19px;
}

.Try.Again img {
  filter: invert(1);
}

/*  Animation and Connections          */
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  50% {
    display: none;
  }
  99% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes quickMoveDown {
  0% {
    opacity: 0;
    transform: translateY(-18%);
  }
  100% {
    opacity: 100;
    transform: translateY(0%);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes select {
  0% {
    background-color: white; // white
    box-shadow: 0 0 0px #00ff00; // none
  }
  100% {
    background-color: #00ff00;
    box-shadow: 0 0 10px #00ff00;
  }
}

@keyframes deselect {
  0% {
    background-color: #00ff00;
    box-shadow: 0 0 10px #00ff00;
  }
  100% {
    background-color: white; // white
    box-shadow: 0 0 0px #00ff00; // none
  }
}

@keyframes shine {
   0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}}
}


.hide {
  display: none;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}

.show {
  display: block;
  transition: opacity 1s ease-out;
}

.show {
  visibility: visible;
  opacity: 1;
}

.fade-in {
  animation: fadeIn 2s ease-out forwards;
}

.fade-out {
  animation: fadeOut 0.1s ease-out forwards;
}

.selected {
  animation: select 1s ease-out forwards;
}

.deselected {
  animation: deselect 1s ease-out forwards;
}

/*
.shine {
  background: linear-gradient(to bottom, rgba(255 ,255 ,255 , 0.7) 0%,
  rgba(255, 255, 255, 0) 100%);
  animation: shine 3s linear infinite;
}
*/

.animate-right {
  animation: moveRight 2s ease-out forwards;
}

.animate-down {
  animation: moveDown 2s ease-out forwards;
}

/* ----------------- Shop ------------------- */
.Collection.View {
  align-items: center;
  justify-content: center;
  gap: 175px;
}

.Collection.View > * {
  margin-right: 15px;
}

/*
.Collection.View > *:first-child {
  margin-left: auto;
}

.Collection.View > *:last-child {
  margin-right: auto;
}
*/

.collection-button {
  border-radius: 10px;
  margin-top: 5px;
  margin-left: 35px;
  margin-right: 35px;
  margin-bottom: 10px;
  background-color: rgba(128, 128, 128, 0.3);
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  width: 30%;
  min-width: 175px;
  max-width: 150px;
  height: 70%;
  min-height: 240px; 
  outline: none;
  outline: none !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
 /* animation: moveDown 2s ease-out forwards; */
  color: white;
}

.collection-button-start {
 animation: moveDown 2s ease-out forwards;
}

.collection-button:hover {
 background: linear-gradient(45deg, transparent, white, transparent);
  background-size: 100% 600%;
  animation: shine 1s linear 1;
  animation-fill-mode: forwards;
}

.collection-button-animated:hover {
  background: linear-gradient(45deg, transparent, white, transparent);
  background-size: 100% 600%;
  animation: shine 1s linear 1;
  animation-fill-mode: forwards;
}

.Item.Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

.Item.View {
  padding: 0;
}

.Item.View a {
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 15px;
  /* background-color: white;
  color: black; */
  background-color: var(--colorModeBGColor);
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  width: 30%;
  min-width: 175px;
  max-width: 150px;
  height: 60%;
  min-height: 225px;
  outline: none;
  outline: none !important;
}

.Item.View a img {
  height: 1.5rem;
  width: 1.5rem;
}

.Item.View p {
  font-size: 11px;
}

.Item.Right.View {
  padding: 0;
}

.Item.View img {
  justify-content: center;
  align-items: center;
  height: auto;
  width: 25%;
  margin-right: auto;
  border-radius: 60% / 20%;
}

.Item.Right.View img {
  justify-content: center;
  height: auto;
  width: 25%;
  margin-left: auto;
  margin-right: 10px;
  border-radius: 60% / 20%;
}

.Share.Your.Items img {
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
  margin: auto;
}

.Share.Your.Items .capsule-button {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Image.View {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
}

.Image.View img {
  width: 30%;
  min-width: 175px;
  max-width: 150px;
  height: 60%;
  min-height: 225px;
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  margin-left: 10px;
}

.Image.View .circles {
  margin-left: auto;
  padding: none;
}

.Image.Right.View .circles {
  margin-right: auto;
  padding: none;
}

.circles {
  margin-left: auto;
  margin-right: 20px;
  margin-top: 40px;
  margin-bottom: auto;
  z-index: 1;
}

.circle {
  margin-bottom: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #dddddd; /* Inactive color */
  z-index: 1;
}

.circle.active {
  background-color: #00FF00; 
  box-shadow: 0 0 10px #00FF00;
  z-index: 1;
}

.Item.Action {
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: flex;
  margin-left: auto;
  margin-right: 65px;
  width: auto;
  overflow: hidden;
}

.Item.Action a {
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 10px;
  text-decoration: none;
  height: 40px;
  padding: 5px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: flex;
  min-height: 0px;
  min-width: 0px;
  margin-left: 75px;
  margin-right: 0px;
}

.Item.Action img {
  width: 1.75rem; /* Adjust as needed */
  height: 1.75rem;
  margin-top: 5px;
  margin-right: 4px;
  filter: invert(var(--invertNumber));
}

.Item.Action a img {
  width: 2rem;
  height: 2rem;
  margin-right: 0;
}

.Item.Action .capsule-button {
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 10px;
  text-decoration: none;
  height: 40px;
  padding: 5px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: flex;
  min-height: 0px;
  min-width: 0px;
  margin-left: auto;
  /* margin-left: 75px;
  margin-right: 0px; */
}

.circle-button {
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%; /* This makes the button circular */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  width: 45px; /* Adjust as needed */
  height: 45px; /* Adjust as needed */
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 13px;
  /* margin-right: auto; */
}

/*
.circle-button img {
 position: relative;
 left: 1.5px;
}
*/



.Shop.Navigation {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
}

.Shop.Navigation img {
  height: 1.5rem;
  width: auto;
  filter: invert(var(--invertNumber));
}

.Shop.Navigation .capsule-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overlay-rectangle {
  position: fixed; /* This will keep the rectangle in the center even if you scroll */
  top: 50%;
  left: 50%;
  width: 60%;
  height: 90%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background-color: white;
 */
 background-color: white; 
  border-radius: 60% / 20%;
  transform: translate(-50%, -50%); /* This centers the rectangle */
  z-index: 1000; /* This ensures the rectangle overlays over other elements */
  animation: growFromCenter 0.5s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Overlay.Image.View {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-right: auto;
}

.Overlay.Image.View img {
  min-width: 75%;
  min-height: 75%;
  max-width: 75%; /* Adjust as needed */
  max-height: 75%; /* Adjust as needed */
  object-fit: contain; /* This ensures the image fits within the div */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
  margin-right: auto;
}

.overlay-product-image-exit {
  cursor: pointer;
  margin-top: 20px; /* Adjust as needed */
  align-self: center; /* This centers the image horizontally */
  width: 7%;
  height: 7%;
  position: relative;
  bottom: 40px;
 /* filter: invert(var(--invertNumber)); */
}

.item-row {
  display: none;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-x: auto;
  max-width: 100%; /* Adjust this value as needed */
  animation: moveDown 2s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.item {
  flex-basis: calc(50% - 10px); /* Adjust as needed */
  margin-bottom: 20px; /* Adjust as needed */
}

.product-image {
  justify-content: center;
  align-items: center;
  height: auto;
  width: 50%;
  margin-right: auto;
  border-radius: 60% / 20%;
}


.image-viewer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}



/* ----------------Checkout----------------- */

.Checkout {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr; /* Adjust as needed */
  gap: 10px; /* Adjust as needed */
  justify-items: start; /* Aligns the grid items to the start of their grid area */
}

.Checkout.Item.Row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; /* Aligns the flex items along the cross axis */
}

.Quantity.Chooser {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Checkout.Item.Row img {
  height: 1rem;
  width: 1rem;
}

.Checkout.Item.Row Button {
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  margin-right: 7px;
  margin-left: 7px;
}

.checkout-placeholder-rectangle {
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  border-radius: 10px;
}

/* ----------------Stories----------------- */

.story-list {
  list-style-type: none;
  padding-left: 0;
  overflow-y: auto;
  max-height: 500px; /* Adjust this value as needed */
}

.story-list li {
  display: block;
  padding: 10px 20px;
  margin: 5px 0;
  border: 1px solid #000;
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.Story {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 80%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  border-radius: 40px;
  z-index: 1000;
  gap: 5px;
  animation: growFromCenter 0.5s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Font.Story {
  position: fixed;
  top: 0%;
  right: 80%;
  display: flex;
  height: 3rem;
  width: 3rem;
  filter: invert(var(--invertNumber));
  margin-left: auto;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-top: 20px;
  padding: none;
  background-color: white;
}

.font-size-slider {
  visibility: hidden;
  display: flex;
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 5px;
  padding: 3px;
}

.Exit.Story {
  position: fixed;
  top: 0%;
  left: 97%;
  display: flex;
  height: 3rem;
  width: 3rem;
  margin-left: auto;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-top: 20px;
  filter: none;
  padding: none;
}

.Overlay.Story.View {
  height: 95%;
  width: 95%;
  margin-top: 0px;
  margin-bottom: auto;
  filter: none;
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  display: flex;
}

.story-title {
  height: 20%;
  margin-top: 60px;
  margin-bottom: 0px;
  filter: none;
}

.story-text {
  height: 200%;
  filter: none;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: auto;
}

.story-accessories img {
 filter: invert(var(--invertNumber));
}



.selector-button {
    border: none;
    color: white;
    width: 300%;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: flex;
    font-size: 16px;
    border-radius: 12px;
    background-color: #4CAF50;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 35px;
    margin-bottom: 10px;
    background-color: rgba(128, 128, 128, 0.3);
    box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: white;
    z-index: 3;
}

.Selector {
     display: none;
     top: 10;
     margin-top: -18px;
     margin-bottom: 10px;
     padding: 2px 24.5px;
     border-radius: 10px;
     position: absolute;
     background-color: #f1f1f1;
}




/*  --------------Share-------------  */

.ShareTip {
  width: auto;
  height: auto;
}

.shareText {
  /* Position the tooltip */
  position: relative;
  bottom: 150px;
  right: 0px;
  z-index: 1;

  visibility: hidden;
  width: auto;
  height: auto;
  background-color: grey;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 30px 13px;
  gap: 5px;

  /*   Center   */
  justify-content: space-between;
  display: flex;
  align-items: center;

  /*   Wrapper No Wrapping      */
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

.shareText img {
  width: 2rem;
  height: 2rem;
}

.copy-button-img {
  filter: invert(1);
}

.copy-button-img:active {
  filter: invert(0);
}


/* -------------- Email Subscription ------------------*/

.subscription-form {
  display: flex;
  flex-direction: column;
  align-items: center; 
  padding: 10px;
  margin: 0 auto; /* Center the form */
  height: 10%;
}

.subscription-form form:hover {
  background: linear-gradient(45deg, transparent, white, transparent);
  background-size: 100% 1500%;
  animation: shine 1s linear 1;
  animation-fill-mode: both;
}

.subscription-form form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(128, 128, 128, 0.3);
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  border-radius: 10px;
  border: 0.5px solid white; /* Add an outline */
  padding: 5px;
  height: 10%;
  width: 50%; /* Make the form take up the full width of .subscription-form */
}



.subscription-form input[type="text"],
.subscription-form input[type="email"] {
  width: 60%;
  padding: 12px 20px;
  margin: 3px 0;
  box-sizing: border-box;
  border: 0.5px solid white; /* Add an outline */
  border-radius: 10px;
}

.subscription-form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 3px 0;
  border: none;
  cursor: pointer;
  width: 60%;
  border-radius: 10px;
}

.subscription-form input[type="submit"]:hover {
  saturated: 2;
  backgroundColor = '#00FF00'; // Bright green
  boxShadow = '0 0 10px #00FF00'; 
}




















































































































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

  
body {
  font-family: Croissant One;
  margin: 0;
  padding: 0;
  width: 100%;
}

body a {
  text-decoration: none;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  background-color: #753522;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

main {
  padding: 1rem;
}

section {
  margin-bottom: 2rem;
}

footer {
  text-align: center;
  padding: 1rem;
  /* color: rgba(255, 255, 255, 0.4); */
  color: var(--colorModeColor);
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  margin-top: auto;
}

footer a {
  text-decoration: none;
}

footer p {
  color: rgba(255, 255, 255, 0.4);
}

/* Remove list styling */
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

/* Style each menu item */
nav ul li {
  padding: 10px;
}

/* Style each link */
nav ul li a {
  text-decoration: none;
  color: #000;
}

/* Change color on hover */
nav ul li a:hover {
  color: #888;
}

#content {
  padding-top: 60px; /* Adjust this value to match the height of your header */
}

body {
  /* background: linear-gradient(#f7f1cf, #9f611a, #753522, #753522),
    #f7f1cf; */
  background: #9f611a;
  background-attachment: fixed;
  text-align: center;
}

.scrollable-header {
  position: fixed;
  top: 0;
  /* margin-top: 300px; */
  width: 100%;
  z-index: 1000; /* This ensures the header stays on top of other content */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  Add a shadow to the bottom of the header */
  display: flex;
  align-items: center;
  padding: 0 0.1rem; /* Add some padding to the sides of the header */
  height: 3.3rem;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.scrollable-header.scrolled {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.blurred {
  filter: blur(2px); /* Adjust the pixel value to control the amount of blur */
}

/* Header and Subheader */

.Header {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Subheader {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*  Menus */

#menu {
  display: none;
}

#menu-button {
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  /* Adjust this value to change the size of the menu button */
  position: relative;
  margin-left: 1rem;
  margin-right: auto;
}

#menu-button:before {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s;
  z-index: 1;
}

@keyframes color-cycle {
  0% {
    color: #e65238‬;
  }
  30% {
    color: #eeba45;
    transform: scale(1.1);
    filter: invert(1) hue-rotate(180deg);
  }
  60% {
    color: #e65238‬;
    filter: invert(0) hue-rotate(45deg);
  }
  80% {
    color: #eeba45;
    transform: scale(1);
  }
  100% {
    color: #000000;
  }
}

#menu-button:hover {
  position: relative;
  z-index: 1;
  animation-name: color-cycle;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
  background-position: bottom center;
  text-decoration: none !important;
}

#menu-button:hover:before {
  clip-path: circle(150% at 50% 50%);
}

#buttons {
  margin-left: auto;
  justify-content: space-between;
  transition: filter 0.3s ease;
}

#button-1,
#button-2 {
  border: none;
  position: relative;
  margin-right: 1rem;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
}

#button-1:hover,
#button-2:hover {
  position: relative;
  z-index: 1;
  animation-name: color-cycle;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
  background-position: bottom center;
  text-decoration: none !important;
}

#logo-home {
  /* margin-left: 5rem; */
  justify-content: center;
  align-items: center;
  position: relative;
  margin: auto;
  margin-left: 0rem;
  width: 8rem;
  height: 2rem;
}

/*        ----             */

#dropdown {
  top: 5;
  margin-top: 5rem;
}

#dropdown-menu {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  /* background-color: #f9f9f9; */
  background-color: var(--colorModeBGColor);
  width: 160px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 4;
  position: fixed;
  top: 15;
  left: -10px;
  margin-top: -1.45rem;
  font-size: 12px;
}

#dropdown-menu a {
  /* color: black; */
  color: var(--colorModeColor);
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#dropdown-menu img {
  height: 2rem;
  width: 2rem;
  filter: invert(var(--invertNumber));
}

#dropdown-menu a img {
  margin-right: 0.2rem;
}

#dropdown-quizzes {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  /*background-color: var(--colorModeBGColor); */
  filter: invert(var(--invertNumber));
  background-color: #f9f9f9;
  width: 80px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
  position: fixed;
  top: 30;
  left: 0;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
  margin-left: 9.35rem;
  font-size: 12px;
}

#dropdown-quizzes a {
  color: black;
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#dropdown-quizzes img {
  height: 2rem;
  width: 2rem;
}

#dropdown-quizzes a img {
  margin-right: 0.2rem;
}

#dropdown-shop {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  filter: invert(var(--invertNumber));
  /* background-color: var(--colorModeBGColor); */
  background-color: #f9f9f9;
  min-width: 80px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
  position: fixed;
  top: 30;
  left: 0;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
  margin-left: 9.35rem;
  font-size: 12px;
}

#dropdown-shop a {
  color: black;
  /*color: var(--colorModeColor); */
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
}

#dropdown-shop img {
  height: 2rem;
  width: 2rem;
}

#dropdown-shop a img {
  margin-right: 0.2rem;
}

/*         ---            */

#bag-menu {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  background-color: var(--colorModeBGColor);
  /* background-color: #f9f9f9; */
  min-width: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 3px 16px;
  z-index: 1;
  position: fixed;
  top: 45;
  right: 0;
  top: 5;
  margin-top: -1.45rem;
  font-size: 12px;
  /* margin-top: 0.6rem; */
}

#bag-menu a {
  color: var(--colorModeColor);
  /* color: black; */
  padding: 3px 16px;
  text-decoration: none;
  display: flex;
  /* display: flex; */
  align-items: center;
}

#bag-menu img {
  height: 2rem;
  width: 2rem;
  filter: invert(var(--invertNumber));
  display: flex;
  /* margin-right: 0.2rem;
  margin-left: 0.6rem; */
}

#bag-menu a img {
  margin-right: 0.2rem;
  display: flex;
}

#bag-button {
  display: flex;
  align-items: center;
  margin: auto;
  display: flex;
}

/*         ----        */

#style-menu {
  cursor: pointer;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  /*
  background-color: #ffffff;
  color: black; 
  */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  width: 120px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  padding: 3px 16px;
  z-index: 4;
  position: fixed;
  top: 50;
  right: 0px;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
  font-size: 12px;
}

#style-menu a {
 /* color: var(--colorModeColor); */
  /* color: black; 
  background-color: var(--colorModeBGColor); */
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  display: flex;
  align-items: center;
  width: 20px;
}

#style-menu img {
  height: 2rem;
  width: 2rem;
  filter: invert(var(--invertNumber));
  margin-right: 0.2rem;
  margin-left: 0.6rem;
}

#style-button {
  display: flex;
  align-items: center;
  margin: auto;
}

#style-button-1 {
  display: flex;
  align-items: center;
  margin: auto;
}

#style-button-2 {
  display: flex;
  align-items: center;
  margin: auto;
}

/*         ----        */

#language-menu {
  cursor: pointer;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;

  background-color: #ffffff;
  color: black;
  /*
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor); */
  filter: invert(var(--invertNumber));
  width: 50px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  padding: 3px 16px;
  z-index: 3;
  position: fixed;
  top: 30;
  right: 0;
  /* margin-top: 0.6rem; */
  margin-top: -1.45rem;
  margin-right: 4rem;
  font-size: 12px;
}

#language-menu a {
  color: var(--colorModeColor);
  /* color: black; */
  /* background-color: var(--colorModeBGColor); */
  padding: 3px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  width: 20px;
}

#language-menu img {
  height: 2rem;
  width: 2rem;
  margin-right: 0.2rem;
  margin-left: 0.6rem;
 /* filter: invert(var(--invertNumber)); */
}

#english-button {
  display: flex;
  align-items: center;
  margin: auto;
  margin-left: 0.6rem;
}

#spanish-button {
  display: flex;
  align-items: center;
  margin: auto;
  margin-left: 0.6rem;
}

#japanese-button {
  display: flex;
  align-items: center;
  margin: auto;
  margin-left: 0.6rem;
}

/*------------------ Chat ------------------ */

#chat {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  bottom: 5px;
  right: 15px;
  width: 45px;
  height: 45px;
  /* background-color: #f8f8f8; */
  background-color: rgba(128, 128, 128, 0.3);
  border: 1px solid #cccccc;
  border-radius: 50%;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 15;
  overflow: hidden;
  transition: width 0.5s, height 0.5s;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
 /* filter: invert(var(--invertNumber)); */
}

#chat textarea {
  width: 100%; /* Adjust the width of the textarea to make room for the send button */
  min-height: 2rem;
  height: 2rem;
  max-height: 4rem;
  height: 2em; /* Set the height of the textarea to the height of a single line of text */
  resize: vertical; /* Prevent the textarea from being resized */
  border-radius: 20px;
}

#chat button {
  margin: auto; /* This will center the button vertically and horizontally */
  display: flex; /* This will allow the use of flexbox properties */
  justify-content: center; /* This will center the button's content horizontally */
  align-items: center; /* This will center the button's content vertically */
  width: 20%; /* Set the width of the send button */
  height: 2.5em; /* Set the height of the send button to the height of a single line of text */
  border-radius: 20px;
  background-color: #f8f8f8;
  margin-left: 5px;
}

/* ---------------- Quizzes --------------------- */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/*
.Quiz.Options.slide-in h3,
.Quiz.Options.slide-in p{
  transform: translateX(-140%);
  animation: slideInFromLeft 2s ease-out forwards;
}

.Quiz.Options.slide-in h3:nth-of-type(2n),
.Quiz.Options.slide-in p:nth-of-type(2n) {
  animation-delay: 0.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(3n),
.Quiz.Options.slide-in p:nth-of-type(3n) {
  animation-delay: 1s;
}

.Quiz.Options.slide-in h3:nth-of-type(4n),
.Quiz.Options.slide-in p:nth-of-type(4n){
  animation-delay: 1.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(5n),
.Quiz.Options.slide-in p:nth-of-type(5n){
  animation-delay: 2s;
}
*/

.Quiz.Options.slide-in h3,
.Quiz.Options.slide-in p,
.quiz-capsule-button {
  transform: translateX(-140%);
  animation: slideInFromLeft 2s ease-out forwards;
}

.Quiz.Options.slide-in h3:nth-of-type(2n),
.Quiz.Options.slide-in p:nth-of-type(2n),
.quiz-capsule-button:nth-of-type(2n) {
  animation-delay: 0.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(3n),
.Quiz.Options.slide-in p:nth-of-type(3n),
.quiz-capsule-button:nth-of-type(3n) {
  animation-delay: 1s;
}

.Quiz.Options.slide-in h3:nth-of-type(4n),
.Quiz.Options.slide-in p:nth-of-type(4n),
.quiz-capsule-button:nth-of-type(4n) {
  animation-delay: 1.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(5n),
.Quiz.Options.slide-in p:nth-of-type(5n),
.quiz-capsule-button:nth-of-type(5n) {
  animation-delay: 2s;
}

.Quiz.Options.slide-in h3:nth-of-type(6n),
.Quiz.Options.slide-in p:nth-of-type(6n),
.quiz-capsule-button:nth-of-type(6n) {
  animation-delay: 2.5s;
}

.Quiz.Options.slide-in h3:nth-of-type(7n),
.Quiz.Options.slide-in p:nth-of-type(7n),
.quiz-capsule-button:nth-of-type(7n) {
  animation-delay: 3s;
}

.Quiz.Options.slide-in h3:nth-of-type(8n),
.Quiz.Options.slide-in p:nth-of-type(8n),
.quiz-capsule-button:nth-of-type(8n) {
  animation-delay: 3.5s;
}

.Quiz.Navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.Quiz.Navigation img {
  height: 1.5rem;
  width: auto;
  filter: invert(var(--invertNumber));
}

.Quiz.Navigation .capsule-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Quiz.Navigation .capsule-button.back {
  /* Additional styles for the back button */
  padding: 10px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: none;
  margin-right: auto;
}

.Quiz.Navigation .capsule-button.next {
  /* Additional styles for the back button */
  padding: 10px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black;
  */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: flex;
  margin-left: auto;
}

.Quiz.Navigation.Done {
  padding-top: 15px;
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.Quiz.Navigation.Done .capsule-button {
  border-radius: 15px; /* This makes the buttons capsule-shaped */
  cursor: pointer;
  text-align: center;
  width: 40%;
  max-width: 200px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

.Quiz.Navigation.Done img {
  /* display: none; */
  justify-content: center;
  border: none;
  position: relative;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  margin-left: auto;
  filter: invert(var(--invertNumber));
}

.Quiz.Navigation.Done p {
  /* display: none; */
  justify-content: space-between;
  border: none;
  position: relative;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  margin-right: auto;
}

/* question buttons */

.quiz-capsule-button {
  cursor: pointer;
  padding: 5 10px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  /* font-family: Croissant One; */
  text-align: center;
  margin: auto;
  width: 70%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
}

.quiz-capsule-button p {
  margin-top: 5px;
  padding: 0 0px;
  text-align: center;
  margin-left: auto;
  width: 90%;
}

.quiz-capsule-button h3 {
  padding: 0 0px;
  text-align: center;
  margin-bottom: auto;
  margin-left: auto;
  width: 90%;
}

.capsule-button {
  padding: 10px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
}

.capsule-button.next {
  /* Additional styles for the next button */
}

.Quiz.Question {
  display: none;
  visibility: hidden;
  transition: opacity 1s ease-out;
}

.Question.Navigation {
  display: none;
  visibility: hidden;
  margin-top: 12px;
}
  
.Question-Navigation-Quizzes {
    display: none;
    margin-top: 12px;
    justify-center: center;
}
  
.Question-Navigation-Quizzes img {
  height: 1.5rem;
  width: auto;
  margin-bottom: 0px;
  filter: invert(var(--invertNumber));
  }

.Question.Navigation .capsule-button {
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  display: flex;
  justify-content: center;
}

.Question.Navigation .capsule-button.back {
  display: none;
  margin-right: auto;
}

.Question.Navigation .capsule-button.next {
  display: none;
  margin-left: auto;
}

.Question.Navigation img {
  height: 1.5rem;
  width: auto;
  margin-bottom: 0px;
  filter: invert(var(--invertNumber));
}

.Question.Navigation p {
  margin-bottom: 10px;
}

.Quiz.Question .quiz-capsule-button {
  margin-top: 10px;
  justify-content: center;
  display: flex;
}

.Share.Links img {
  margin-left: 5px;
  margin-right: 5px;
  height: 2rem;
  width: 2rem;
}

.Share.Your.Results {
  /*  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: grey;
  border-radius: 40px;
  height: 50px;
  width: auto;
  padding: 10px;
  color: white;
  margin-top: auto;
  margin-bottom: 20px; */
}

.Share.Your.Results img {
  /*
  margin-left: 5px;
  margin-right: 5px;
  height: 1.5rem;
  width: 1.5rem;
  */
}

.Share.Your.Results p {
  margin-bottom: 0px;
}

/* This styles the progress bar itself */
progress {
  width: 45%;
  height: 15px;
  border-radius: 10px; /* This makes the progress bar rounded */
  -webkit-appearance: none; /* This is necessary to style the progress bar in WebKit browsers */
  appearance: none;
  background-color: rgba(
    128,
    128,
    128,
    0.3
  ); /* This makes the background greyish with low opacity */
}

/* This styles the 'value' part of the progress bar in WebKit browsers */
progress::-webkit-progress-value {
  background: #00ff00; /* This makes the filling green */
  border-radius: 10px; /* This makes the filling rounded */
}

/* This styles the 'value' part of the progress bar in Firefox */
progress::-moz-progress-bar {
  background: #00ff00; /* This makes the filling green */
  border-radius: 10px; /* This makes the filling rounded */
}

/* This styles the 'remaining' part of the progress bar in WebKit browsers */
progress::-webkit-progress-bar {
  background: rgba(
    128,
    128,
    128,
    0.3
  ); /* This makes the background greyish with low opacity */
  border-radius: 10px; /* This makes the background rounded */
}

@keyframes growFromCenter {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.Results {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 80%;
  display: none;
  justify-content: center;
  align-items: column;
  flex-direction: column;
  /*  background-color: white;
 */
  background-color: var(--colorModeBGColor);
  border-radius: 40px;
  z-index: 1000;
  gap: 5px;
  animation: growFromCenter 0.5s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Exit.Result {
  height: 3rem;
  width: 3rem;
  margin-left: auto;
  margin-bottom: auto;
  margin-right: 20px;
  margin-top: 20px;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Results h3 {
  color: var(--colorModeColor);
}

.Results p {
  margin-top: auto;
  margin-bottom: auto;
  color: var(--colorModeColor);
}

.Results img {
  height: 2rem;
  width: 2rem;
}

.Share.Your.Results1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: grey;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 40px;
  height: 50px;
  width: 88%;
  padding: 10px;
  color: white;
  margin-top: 15px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

.Share.Your.Results1 p {
  margin-top: auto;
  margin-bottom: auto;
  height: auto; /* Adjust this value as needed */
  overflow: hidden;
}

.Try.Again {
  border-radius: 15px; /* This makes the buttons capsule-shaped */
  cursor: pointer;
  text-align: center;
  width: 60%;
  height: 20%;
  max-width: 200px;
  background-color: grey;
  color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  outline: none;
  font-family: Croissant One;
  font-size: 19px;
}

.Try.Again img {
  filter: invert(1);
}

/*  Animation and Connections          */
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(140%);
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}
  
@keyframes quickMoveDown {
  0% {
    opacity: 0;
    transform: translateY(-18%);
  }
  100% {
    opacity: 100;
    transform: translateY(0%);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes select {
  0% {
    background-color: white; // white
    box-shadow: 0 0 0px #00ff00; // none
  }
  100% {
    background-color: #00ff00;
    box-shadow: 0 0 10px #00ff00;
  }
}

@keyframes deselect {
  0% {
    background-color: #00ff00;
    box-shadow: 0 0 10px #00ff00;
  }
  100% {
    background-color: white; // white
    box-shadow: 0 0 0px #00ff00; // none
  }
}
  
@keyframes shine {
   0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}


.hide {
  display: none;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.show {
  display: block;
  transition: opacity 1s ease-out;
}

.show {
  visibility: visible;
  opacity: 1;
}

.fade-in {
  animation: fadeIn 2s ease-out forwards;
}

.selected {
  animation: select 1s ease-out forwards;
}

.deselected {
  animation: deselect 1s ease-out forwards;
}

.animate-right {
  animation: moveRight 2s ease-out forwards;
}

.animate-down {
  animation: moveDown 2s ease-out forwards;
}

/* ----------------- Shop ------------------- */
.Collection.View {
  justify-content: space-between;
}

.collection-button {
  border-radius: 10px;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  background-color: rgba(128, 128, 128, 0.3);
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  width: 30%;
  min-width: 175px;
  max-width: 150px;
  height: 60%;
  min-height: 225px;
  outline: none;
  outline: none !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
 /* animation: moveDown 2s ease-out forwards; */
  color: white;
}

.collection-button-start {
 animation: moveDown 2s ease-out forwards;
}


.collection-button:hover {
 background: linear-gradient(45deg, transparent, white, transparent);
  background-size: 100% 600%;
  animation: shine 1s linear 1;
  animation-fill-mode: forwards;
}


.collection-button-animated:hover {
  background: linear-gradient(45deg, transparent, white, transparent);
  background-size: 100% 600%;
  animation: shine 1s linear 1;
  animation-fill-mode: forwards;
}
  
.Item-Description {
    margin-left: 42px;
  }

.Item.Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

.Item.View {
  padding: 0;
}

.Item.View a {
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 15px;
  /* background-color: white;
  color: black; */
  background-color: var(--colorModeBGColor);
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  width: 30%;
  min-width: 175px;
  max-width: 150px;
  height: 60%;
  min-height: 225px;
  outline: none;
  outline: none !important;
}

.Item.View a img {
  height: 1.5rem;
  width: 1.5rem;
}

.Item.View p {
  font-size: 11px;
}

.Item.Right.View {
  padding: 0;
}

.Item.View img {
  justify-content: center;
  align-items: center;
  height: auto;
  width: 25%;
  margin-right: auto;
  border-radius: 60% / 20%;
}

.Item.Right.View img {
  justify-content: center;
  height: auto;
  width: 25%;
  margin-left: auto;
  margin-right: 10px;
  border-radius: 60% / 20%;
}

.Share.Your.Items img {
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
  margin: auto;
}

.Share.Your.Items .capsule-button {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Image.View {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
}

.Image.View img {
  width: 30%;
  min-width: 175px;
  max-width: 150px;
  height: 60%;
  min-height: 225px;
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  margin-left: 10px;
}

.Image.View .circles {
  margin-left: auto;
  padding: none;
}

.Image.Right.View .circles {
  margin-right: auto;
  padding: none;
}

.circles {
  margin-left: auto;
  margin-right: 20px;
  margin-top: 40px;
  margin-bottom: auto;
  z-index: 1;
}

.circle {
  margin-bottom: 10px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #dddddd; /* Inactive color */
  z-index: 1;
}

.circle.active {
  background-color: #00FF00; 
  box-shadow: 0 0 10px #00FF00;
  z-index: 1;
}

.Item.Action {
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: flex;
  margin-left: auto;
  margin-right: 20px;
  width: auto;
  overflow: hidden;
}

.Item.Action a {
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 10px;
  text-decoration: none;
  height: 40px;
  padding: 5px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: flex;
  min-height: 0px;
  min-width: 0px;
  margin-left: 75px;
  margin-right: 0px;
}

.Item.Action img {
  width: 1.75rem; /* Adjust as needed */
  height: 1.75rem;
  margin-top: 5px;
  margin-right: 4px;
  filter: invert(var(--invertNumber));
}

.Item.Action a img {
  width: 2rem;
  height: 2rem;
  margin-right: 0;
}

.Item.Action .capsule-button {
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 10px;
  text-decoration: none;
  height: 40px;
  padding: 5px 20px;
  border: none;
  border-radius: 50px; /* This makes the buttons capsule-shaped */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  display: flex;
  min-height: 0px;
  min-width: 0px;
  margin-left: auto;
  /* margin-left: 75px;
  margin-right: 0px; */
}

.circle-button {
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%; /* This makes the button circular */
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Croissant One;
  width: 45px; /* Adjust as needed */
  height: 45px; /* Adjust as needed */
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 13px;
  /* margin-right: auto; */
}
  
.circle-button img {
 position: relative;
 right: 4px;
  }

.Shop.Navigation {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
}

.Shop.Navigation img {
  height: 1.5rem;
  width: auto;
  filter: invert(var(--invertNumber));
}

.Shop.Navigation .capsule-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overlay-rectangle {
  position: fixed; /* This will keep the rectangle in the center even if you scroll */
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background-color: white;
 */
  background-color: white;
  border-radius: 60% / 20%;
  transform: translate(-50%, -50%); /* This centers the rectangle */
  z-index: 1000; /* This ensures the rectangle overlays over other elements */
  animation: growFromCenter 0.5s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Overlay.Image.View {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-right: auto;
  margin-left: 0px;
}

.Overlay.Image.View img {
  width: 65%;
  height: 65%;
  /*min-width: 85%;
  min-height: 85%;
  max-width: 85%; /* Adjust as needed */
  /* max-height: 85%; /* Adjust as needed */
  object-fit: contain; /* This ensures the image fits within the div */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
  margin-right: auto;
  margin-left: -35px;
}
  
.Overlay.Image.View .circles {
  margin-top: auto;
  margin-bottom: autopx;
}

.overlay-product-image-exit {
  cursor: pointer;
  margin-top: 20px; /* Adjust as needed */
  align-self: center; /* This centers the image horizontally */
  width: 3rem;
  height: 3rem;
 /* filter: invert(var(--invertNumber)); */
}

.item-row {
  display: none;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-x: auto;
  max-width: 100%; /* Adjust this value as needed */
  animation: moveDown 2s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.item {
  flex-basis: calc(50% - 10px); /* Adjust as needed */
  margin-bottom: 20px; /* Adjust as needed */
}

.product-image {
  justify-content: center;
  align-items: center;
  height: auto;
  width: 50%;
  margin-right: auto;
  border-radius: 60% / 20%;
}


.image-viewer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}



/* ----------------Checkout----------------- */

.Checkout {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr; /* Adjust as needed */
  gap: 10px; /* Adjust as needed */
  justify-items: start; /* Aligns the grid items to the start of their grid area */
}

.Checkout.Item.Row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; /* Aligns the flex items along the cross axis */
}

.Quantity.Chooser {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Checkout.Item.Row img {
  height: 1rem;
  width: 1rem;
}

.Checkout.Item.Row Button {
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  margin-right: 7px;
  margin-left: 7px;
}

.checkout-placeholder-rectangle {
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  border-radius: 10px;
}

/* ----------------Stories----------------- */

.story-list {
  list-style-type: none;
  padding-left: 0;
  overflow-y: auto;
  max-height: 500px; /* Adjust this value as needed */
}

.story-list li {
  display: block;
  padding: 10px 20px;
  margin: 5px 0;
  border: 1px solid #000;
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.Story {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  background-color: var(--colorModeBGColor);
  border-radius: 40px;
  z-index: 1000;
  gap: 5px;
  animation: growFromCenter 0.5s ease-out forwards;
  filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.Font.Story {
  position: fixed;
  top: 0%;
  right: 70%;
  display: flex;
  height: 3rem;
  width: 3rem;
  filter: invert(var(--invertNumber));
  margin-left: auto;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-top: 20px;
  padding: none;
  background-color: white;
}

.font-size-slider {
  visibility: hidden;
  display: flex;
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 5px;
  padding: 3px;
}

.Exit.Story {
  position: fixed;
  top: 0%;
  left: 90%;
  display: flex;
  height: 3rem;
  width: 3rem;
  margin-left: auto;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-top: 20px;
  filter: none;
  padding: none;
}

.Overlay.Story.View {
  height: 95%;
  width: 95%;
  margin-top: 0px;
  margin-bottom: auto;
  filter: none;
  /*
  background-color: #ffffff;
  color: black; */
  color: var(--colorModeColor);
  display: flex;
}

.story-title {
  height: 20%;
  margin-top: 60px;
  margin-bottom: 0px;
  filter: none;
}

.story-text {
  height: 200%;
  filter: none;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: auto;
}
  

.selector-button {
    border: none;
    color: white;
    width: 300%;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: flex;
    font-size: 16px;
    border-radius: 12px;
    background-color: #4CAF50;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 35px;
    margin-bottom: 10px;
    background-color: rgba(128, 128, 128, 0.3);
    box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: white;
    z-index: 3;
}

.Selector {
     display: none;
     top: 10;
     margin-top: -18px;
     margin-bottom: 10px;
     padding: 2px 24.5px;
     border-radius: 10px;
     position: absolute;
     background-color: #f1f1f1;
     width: 20%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 2;
}
  
.selector-button-start {
 animation: quickMoveDown 2s ease-out forwards;
}
  
  
  
  
  
  
  
  

/*  --------------Share-------------  */

.ShareTip {
  width: auto;
  height: auto;
}

.shareText {
  /* Position the tooltip */
  position: relative;
  bottom: 150px;
  right: 0px;
  z-index: 1;

  visibility: hidden;
  width: auto;
  height: auto;
  background-color: grey;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 30px 13px;
  gap: 5px;

  /*   Center   */
  justify-content: space-between;
  display: flex;
  align-items: center;

  /*   Wrapper No Wrapping      */
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

.shareText img {
  width: 2rem;
  height: 2rem;
}

.copy-button-img {
  filter: invert(1);
}

.copy-button-img:active {
  filter: invert(0);
}  
  
#chosenMoodDisplay {
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}


/* -------------- Email Subscription ------------------*/

.subscription-form {
  display: flex;
  flex-direction: column;
  align-items: center; 
  padding: 10px;
  margin: 0 auto; /* Center the form */
  height: 10%;
}

.subscription-form form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(128, 128, 128, 0.3);
  box-shadow: 0px 0px 10px rgba(0.2, 0.2, 0.2, 0.2);
  border-radius: 10px;
  border: 0.5px solid white; /* Add an outline */
  padding: 10px;
  height: 10%;
  width: 78%; /* Make the form take up the full width of .subscription-form */
  white-space: normal; /* Allows text to wrap */
  word-wrap: break-word; /* Breaks long words to prevent overflow */
}

.subscription-form form:hover {
  background: linear-gradient(45deg, transparent, white, transparent);
  background-size: 100% 1500%;
  animation: shine 1s linear 1;
  animation-fill-mode: both;
}

.subscription-form input[type="text"],
.subscription-form input[type="email"] {
  width: 60%;
  padding: 12px 20px;
  margin: 2px 0;
  box-sizing: border-box;
  border: 0.5px solid white; /* Add an outline */
  border-radius: 10px;
}

.subscription-form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 3px 0;
  border: none;
  cursor: pointer;
  width: 70%;
  border-radius: 10px;
}

.subscription-form input[type="submit"]:hover {
  saturated: 2;
  backgroundColor = '#00FF00'; // Bright green
  boxShadow = '0 0 10px #00FF00'; 
}