:root {
  --blue: rgb(20, 120, 167);
  --blueRGB: 20, 120, 167;
  --darkBlue: rgb(15, 48, 98);
  --darkBlueRGB: 15, 48, 98;
  --lightBlue: rgb(82, 181, 217);
  --lightBlueRGB: 82, 181, 217;
  --red: rgb(255, 115, 105);
  --redRGB: 255, 115, 105;
  --gray: rgb(78, 78, 78);
  --lightGray: rgb(128, 128, 128);
}


/*
Device viewport
Check out this article about device viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env
*/
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-inset-left: env(safe-area-inset-left, 0);
  --safe-area-inset-right: env(safe-area-inset-right, 0);
  --margin-top: var(--safe-area-inset-top, 0);
  --margin-bottom: var(--safe-area-inset-bottom, 0);
  --window-shift: 0px;
  --vh: 1vh;
}

html body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: fixed;
  background: red;

}

button {
  cursor: pointer;
  pointer-events: auto;
}

.clickable {
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}
.clickable:hover {
  transform: scale(1.05);
  transition: all 0.2s ease-in-out;
}

* {
  font-family: "Poppins", "Sans-serif";
  user-select: none;
}

a {
  text-decoration: none; /* Removes underline */
  color: inherit;       /* Keeps button text color */
  display: inherit; /* Prevents layout shifts */
}

span {
  color: white;
  text-shadow: 0 0 4px black;
}

.vertical {
  display: flex;
  flex-direction: column;
}

.horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}


.button-group{
  display: flex;
  justify-content: flex-start;
  padding: 4px;
}
.button-group > button {
  border-radius: 10px;
  padding: 0px 12px;
  border: none;
  background: rgb(0 0 0 / 0%);
}
.button-group > button.selectedOption {
  background: var(--red);
  box-shadow: 0 0 4px black;
}


.divider {
  width: 100%;
  height: 1px;
  margin: 16px;
  background: var(--lightGray);
}

.divider-small {
  height: 1px;
  margin: 8px;
  background: rgba(255, 255, 255, 0.432);
  box-shadow: 0 0 4px black;
}

.divider-smaller {
  height: 1px;
  margin: 4px 8px;
  background: var(--lightGray);
}


@media screen and (max-width: 770px) {
  .hiddenInMobile {
    display: none
  }

  .visibleInMobile {
    display: block;
  }
}

@media screen and (min-width: 770px) {
  .visibleInMobile {
    display: none;
  }
}






/* SCROLLBAR */
/* Works on Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: lightblue var(--blue);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: lightblue
}

*::-webkit-scrollbar-thumb {
  background-color: var(--lightBlue);
  border-radius: 5px;
  border: 1px solid var(--darkBlue);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--blue);
  border-radius: 5px;
  border: 1px solid var(--darkBlue);
}








/* 1. The entering/leaving timing (The "Middle" State) */
.slideBottom-fade-enter-active {
  transition: transform 0.5s ease-out, opacity 0.3s ease;
}
.slideBottom-fade-leave-active {
  transition: none;
}

/* 2. The "From" state (Start of enter / End of leave) */
.slideBottom-fade-enter-from {
  transform: translateY(100%); /* Slide it off to the right */
  opacity: 0;
}

/* 3. The "To" state (End of enter / Start of leave) */
/* Optional: defaults to original CSS if not defined, 
   but good for clarity */
.slideBottom-fade-enter-to{
  transform: translateY(0);
  opacity: 1;
}



/* 1. The entering/leaving timing (The "Middle" State) */
.scale-fade-enter-active {
  transition: transform 0.5s ease-out, opacity 0.3s ease;
}
.scale-fade-leave-active {
  transition: none;
}

/* 2. The "From" state (Start of enter / End of leave) */
.scale-fade-enter-from {
  transform: scale(0);
  opacity: 0;
}

/* 3. The "To" state (End of enter / Start of leave) */
/* Optional: defaults to original CSS if not defined, 
   but good for clarity */
.scale-fade-enter-to{
  transform: scale(1);
  opacity: 1;
}