/* Standard reset */

* { margin: 0; padding: 0; box-sizing: border-box; }

html{min-width: 100vw;
min-height: 100vh;}

/* FONTS */

/* @font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/Satoshi-Black.woff2') format('woff2'),
       url('/static/fonts/Satoshi-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/Satoshi-Bold.woff2') format('woff2'),
  url('/static/fonts/Satoshi-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/Satoshi-Regular.woff2') format('woff2'),
  url('/static/fonts/Satoshi-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IndieFlower';
  src: url('/static/fonts/IndieFlower-Regular.woff2') format('woff2'),
  url('/static/fonts/IndieFlower-Regular.woff') format('woff');;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */

/* #instantly-card.DE::after{
  content:url("/static/flags/DE.svg");
  }

#instantly-card.JP::after{
content:url("/static/flags/JP-HS.svg");}

#instantly-card.TR::after{
content:url("/static/flags/TR.svg");
}    

#instantly-card.FR::after{
content:url("/static/flags/FR.svg");
}    

#instantly-card.IN::after{
content:url("/static/flags/IN.svg");
}  

#instantly-card.SE::after{
content:url("/static/flags/SE.svg");
}  

#instantly-card.US::after{
content:url("/static/flags/US.svg");

#instantly-card.ES::after{
content:url("/static/flags/ES.svg");

} */

/* ANIMATIONS */

@keyframes infoPopup {
  0% {
    transform:scale(0);
  }
  30% {
    transform:scale(1);
  }
  85% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

@keyframes popUp 
{
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  60% {
    transform: translateY(-40%);
    opacity: 1;
  } 
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scalePopUp
{
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.05);
  } 
  100% {
    transform: scale(1);
  }
}

@keyframes popUpReversed {
  0% {opacity:1;
  }
  100% {
  opacity:0;
  width:0;}}

  @keyframes slide {
    from {
      transform: translateX(-100%);
      opacity:0;
    }
    to {
      transform: translateX(0);
      opacity:100;
    }
  }

  @keyframes left-slide {
    from {
      transform: translateX(50%);
      opacity:0;
    }
    to {
      transform: translateX(0);
      opacity:100;
    }
  }

  @keyframes right-slide {
    from {
      transform: translateX(-50%);
      opacity:0;
    }
    to {
      transform: translateX(0);
      opacity:100;
    }
  }

  @keyframes up-slide {
    from {
      transform: translateY(50%);
      opacity:0;
    }
    to {
      transform: translateY(0);
      opacity:100;
    }
  }

  @keyframes down-slide {
    from {
      transform: translateY(-50%);
    }
    to {
      transform: translateY(0);
      opacity:100;
    }
  }

  @keyframes scrollLeft {
    to {
      left: -200px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -200px;
    }
  }
  
@keyframes fadeOut {
  0%{opacity:0;}
  25%{opacity:1;}
  75%{opacity:1;}
  100%{opacity:0; display:none;}
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes shine {
  /* start fully off the left (–100% of its own width) */
  0%   { transform: translateX(-100%) skewX(-12deg); }
  /* by 10% of the 5s, it’s moved to 500% (fully off the right edge) */
  10%  { transform: translateX(510%) skewX(-12deg); }
  /* hold there until the loop restarts */
  100% { transform: translateX(510%) skewX(-12deg); }
}

.spinner {
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* 2. make the button a clipping container */
.shine-button {
  position: relative;
  overflow: hidden;
}

/* 3. create the slanted white bar and animate it */
.shine-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;           /* width of the “glint” */
  height: 100%;
  background: rgba(255,255,255,0.3);
  transform: translateX(-100%) skewX(-12deg);
  pointer-events: none;  /* let clicks pass through */
  animation: shine 5s ease-in-out infinite;
}

.pulse-scale-animation {
  animation: pulse-scale 2s ease-in-out infinite;
}

.bounce-animation {
  animation: bounce 1s infinite;
}

.animate-pingx {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.font-extrabold {
  font-weight: 900 !important;
}

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

.scalePopup-animation {
  animation: scalePopUp 0.4s ease-in-out forwards;
}

.popup-animation {
  animation: popUp 0.4s ease-in-out forwards;
  transform-origin: bottom;
}

.popup-animation-reversed {
  animation: popUpReversed 1s ease-in-out forwards;
  transform-origin: top;
}

.slide-animation {animation: slide 15s linear infinite}

.fast-left-slide-animation {animation: left-slide 0.2s ease-in}

.fast-right-slide-animation {animation: right-slide 0.2s ease-in}

.fast-up-slide-animation {animation: up-slide 0.2s ease-in}

.fast-down-slide-animation {animation: down-slide 0.2s ease-in}

.fadeout-animation {animation: fadeOut 4s ease-out forwards}


/* BACKGROUNDS */

.checked-background {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%238fbeef' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.puzzle-background {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ffffff' fill-opacity='0.15' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");}

.deck-box-shadow{box-shadow:12px 12px #5687e8}

  

/* Django-select2-styling */

/* Toggle button */

.django-toggle-switch-slider {height: 50px;
position: relative;
border-radius: 25px;
width: 144px;
background-color: #8fbeef !important;}

.django-toggle-switch-slider.round:before {
height: 50px;
position: absolute;
border-radius: 25px !important;
width: 85px;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
display: flex;
background-color: #5687e8;
color: whitesmoke;}

.django-toggle-switch-success input:checked + .django-toggle-switch-slider, input:checked + .django-toggle-switch-slider{background-color: #8fbeef !important;}

input:checked + .django-toggle-switch-slider:before {
  -webkit-transform: translateX(70%) !important;
transform: translateX(70%) !important;}


 /* Decks list */

.select2-selection__choice{border-radius:10px !important;font-size: 16px !important;font-weight: normal !important;color:whitesmoke !important;background-color: #8fbeff !important; border:none !important; padding:0 10px 0 10px !important; height:30px !important;margin:0px 5px 0px 3px !important;display: flex !important;align-items: center !important;}

.select2-selection__choice__remove{color:whitesmoke !important; padding-right:5px !important;}

.select2-selection {border-radius: 15px !important;height:50px !important; border:2px solid rgb(209,213,219) !important;display: flex !important;align-items: center !important;width:100% !important;max-width: 770px;overflow: hidden !important;}

.select2-selection:focus-within {border:2px solid #8fbeef !important; outline: 1px solid #8fbeef !important;}

.select2-results {font-size: 16px !important;}

.select2-dropdown{border-radius: 15px !important;}

.select2-dropdown li {border-radius: 15px !important;}

.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: #5687e8 !important;}

.select2-container--default .select2-results__option[aria-selected=true] {background-color: #8fbeef !important; color:whitesmoke !important}

.select2-selection__rendered {display:flex !important;overflow: auto !important;}

.select2-container {flex-grow:1 !important;}

.select2-search__field{padding-left:9px !important;margin:0 !important}

.select2-search__field::placeholder {
  color: rgb(209,213,219) !important;
}

.select2-container {max-width: 770px !important;}

@media (max-width: 640px) {
  .select2-container {
      max-width: 150px !important;
  }
}

/* Deck selection scrollbar */

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  overflow: auto !important; /* Ensure scrollbars appear if needed */

}

/* WebKit Browsers (Chrome, Safari, Edge) */
.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar {
  width: 2px !important; /* Width of the scrollbar */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-thumb {
  background-color: #8fbeef; /* Color of the scrollbar thumb */
  border-radius: 1px; /* Rounded corners */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-thumb:hover {
  background-color: #8fbeef;; /* Darker color on hover */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-track {
  background-color: white; /* Color of the track */
  border-radius: 1px; /* Rounded corners */
}

/* Firefox */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  scrollbar-width: thin; /* Make scrollbar thin */
  scrollbar-color: #8fbeef white; /* Thumb color and track color */
}

/* Hero page rotating sign */

.rotate-x-180 {
  transform: rotateX(180deg) translateX(-50%);  /* Always apply rotateX */
}

/* #instantly-card::after{
  content: url("/static/flags/US.svg");
  color:#5687e8;
  position:absolute;
  right:-30px;
  top:-10px;
  transition: all 0.75s ease-in-out;
  z-index:10;
}

#instantly-card-::after{
  content: url("/static/flags/US.svg");
  color:#5687e8;
  z-index:10;
  top:-10px;
  position:absolute;
} */

#instantly-card.rotate-x-180::after{
  transform: rotateX(180deg);
  top:10px;
}

@media (min-width: 860px) {
  .rotate-x-180 {
    transform: rotateX(180deg) translateX(100%); /* Apply translateX only on screens larger than 640px */
  }

  #instantly-card::after{
    right:-20px;
    top:-40px;
    transition: all 0.75s ease-in-out;
    z-index:10;
  }
  
  #instantly-card.rotate-x-180::after{
    transform: rotateX(180deg);
    top:40px;
  }
  
  /* For proper Firefox display */
 #instantly-card-front{transform: rotateX(0deg);} 
  
}

.rotate-x-180-o {
  transform: rotateX(180deg);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html{min-width: 100vw;
min-height: 100vh;}

/* FONTS */

@font-face {
  font-family: 'Satoshi';
  src: url('https://storage.googleapis.com/flangu-static/fonts/Satoshi-Black.woff2') format('woff2'),
       url('https://storage.googleapis.com/flangu-static/fonts/Satoshi-Black.woff') format('woff');
  font-weight: 900;  /* Use numeric weight instead of "bolder" */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('https://storage.googleapis.com/flangu-static/fonts/Satoshi-Bold.woff2') format('woff2'),
  url('https://storage.googleapis.com/flangu-static/fonts/Satoshi-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('https://storage.googleapis.com/flangu-static/fonts/Satoshi-Regular.woff2') format('woff2'),
  url('https://storage.googleapis.com/flangu-static/fonts/Satoshi-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IndieFlower';
  src: url('https://storage.googleapis.com/flangu-static/fonts/IndieFlower-Regular.woff2') format('woff2'),
  url('https://storage.googleapis.com/flangu-static/fonts/IndieFlower-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ANIMATIONS */

@keyframes infoPopup {
  0% {
    transform:scale(0);
  }
  30% {
    transform:scale(1);
  }
  85% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

@keyframes popUp 
{
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  60% {
    transform: translateY(-40%);
    opacity: 1;
  } 
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scalePopUp
{
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.05);
  } 
  100% {
    transform: scale(1);
  }
}

@keyframes popUpReversed {
  0% {opacity:1;
  }
  100% {
  opacity:0;
  width:0;}}

  @keyframes slide {
    from {
      transform: translateX(-100%);
      opacity:0;
    }
    to {
      transform: translateX(0);
      opacity:100;
    }
  }

  @keyframes left-slide {
    from {
      transform: translateX(50%);
      opacity:0;
    }
    to {
      transform: translateX(0);
      opacity:100;
    }
  }

  @keyframes right-slide {
    from {
      transform: translateX(-50%);
      opacity:0;
    }
    to {
      transform: translateX(0);
      opacity:100;
    }
  }

  @keyframes up-slide {
    from {
      transform: translateY(50%);
      opacity:0;
    }
    to {
      transform: translateY(0);
      opacity:100;
    }
  }

  @keyframes down-slide {
    from {
      transform: translateY(-50%);
    }
    to {
      transform: translateY(0);
      opacity:100;
    }
  }

  @keyframes scrollLeft {
    to {
      left: -200px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -200px;
    }
  }
  
@keyframes fadeOut {
  0%{opacity:0;}
  25%{opacity:1;}
  75%{opacity:1;}
  100%{opacity:0; display:none;}
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes shine {
  /* start fully off the left (–100% of its own width) */
  0%   { transform: translateX(-100%) skewX(-12deg); }
  /* by 10% of the 5s, it’s moved to 500% (fully off the right edge) */
  10%  { transform: translateX(510%) skewX(-12deg); }
  /* hold there until the loop restarts */
  100% { transform: translateX(510%) skewX(-12deg); }
}

.spinner {
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* 2. make the button a clipping container */
.shine-button {
  position: relative;
  overflow: hidden;
}

/* 3. create the slanted white bar and animate it */
.shine-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;           /* width of the “glint” */
  height: 100%;
  background: rgba(255,255,255,0.3);
  transform: translateX(-100%) skewX(-12deg);
  pointer-events: none;  /* let clicks pass through */
  animation: shine 5s ease-in-out infinite;
}

.pulse-scale-animation {
  animation: pulse-scale 2s ease-in-out infinite;
}

.bounce-animation {
  animation: bounce 1s infinite;
}

.animate-pingx {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.font-extrabold {
  font-weight: 900 !important;
}

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

.scalePopup-animation {
  animation: scalePopUp 0.4s ease-in-out forwards;
}

.popup-animation {
  animation: popUp 0.4s ease-in-out forwards;
  transform-origin: bottom;
}

.popup-animation-reversed {
  animation: popUpReversed 1s ease-in-out forwards;
  transform-origin: top;
}

.slide-animation {animation: slide 15s linear infinite}

.fast-left-slide-animation {animation: left-slide 0.2s ease-in}

.fast-right-slide-animation {animation: right-slide 0.2s ease-in}

.fast-up-slide-animation {animation: up-slide 0.2s ease-in}

.fast-down-slide-animation {animation: down-slide 0.2s ease-in}

.fadeout-animation {animation: fadeOut 4s ease-out forwards}


/* BACKGROUNDS */

.checked-background {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%238fbeef' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.puzzle-background {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ffffff' fill-opacity='0.15' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");}

.deck-box-shadow{box-shadow:12px 12px #5687e8}

  

/* Django-select2-styling */

/* Toggle button */

.django-toggle-switch-slider {height: 50px;
position: relative;
border-radius: 25px;
width: 144px;
background-color: #8fbeef !important;}

.django-toggle-switch-slider.round:before {
height: 50px;
position: absolute;
border-radius: 25px !important;
width: 85px;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
display: flex;
background-color: #5687e8;
color: whitesmoke;}

.django-toggle-switch-success input:checked + .django-toggle-switch-slider, input:checked + .django-toggle-switch-slider{background-color: #8fbeef !important;}

input:checked + .django-toggle-switch-slider:before {
  -webkit-transform: translateX(70%) !important;
transform: translateX(70%) !important;}


 /* Decks list */

.select2-selection__choice{border-radius:10px !important;font-size: 16px !important;font-weight: normal !important;color:whitesmoke !important;background-color: #8fbeff !important; border:none !important; padding:0 10px 0 10px !important; height:30px !important;margin:0px 5px 0px 3px !important;display: flex !important;align-items: center !important;}

.select2-selection__choice__remove{color:whitesmoke !important; padding-right:5px !important;}

.select2-selection {border-radius: 15px !important;height:50px !important; border:2px solid rgb(209,213,219) !important;display: flex !important;align-items: center !important;width:100% !important;max-width: 770px;overflow: hidden !important;}

.select2-selection:focus-within {border:2px solid #8fbeef !important; outline: 1px solid #8fbeef !important;}

.select2-results {font-size: 16px !important;}

.select2-dropdown{border-radius: 15px !important;}

.select2-dropdown li {border-radius: 15px !important;}

.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: #5687e8 !important;}

.select2-container--default .select2-results__option[aria-selected=true] {background-color: #8fbeef !important; color:whitesmoke !important}

.select2-selection__rendered {display:flex !important;overflow: auto !important;}

.select2-container {flex-grow:1 !important;}

.select2-search__field{padding-left:9px !important;margin:0 !important}

.select2-search__field::placeholder {
  color: rgb(209,213,219) !important;
}

.select2-container {max-width: 770px !important;}

@media (max-width: 640px) {
  .select2-container {
      max-width: 150px !important;
  }
}

/* Deck selection scrollbar */

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  overflow: auto !important; /* Ensure scrollbars appear if needed */

}

/* WebKit Browsers (Chrome, Safari, Edge) */
.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar {
  width: 2px !important; /* Width of the scrollbar */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-thumb {
  background-color: #8fbeef; /* Color of the scrollbar thumb */
  border-radius: 1px; /* Rounded corners */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-thumb:hover {
  background-color: #8fbeef;; /* Darker color on hover */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-track {
  background-color: white; /* Color of the track */
  border-radius: 1px; /* Rounded corners */
}

/* Firefox */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  scrollbar-width: thin; /* Make scrollbar thin */
  scrollbar-color: #8fbeef white; /* Thumb color and track color */
}

/* Hero page rotating sign */

.rotate-x-180 {
  transform: rotateX(180deg) translateX(-50%);  /* Always apply rotateX */
}

#instantly-card::after{
  content: url("https://storage.googleapis.com/flangu-static/flags/US.svg");
  color:#5687e8;
  position:absolute;
  right:-30px;
  top:-10px;
  transition: all 0.75s ease-in-out;
  z-index:10;
}

#instantly-card-::after{
  content: url("https://storage.googleapis.com/flangu-static/flags/US.svg");
  color:#5687e8;
  z-index:10;
  top:-10px;
  position:absolute;
}

#instantly-card.rotate-x-180::after{
  transform: rotateX(180deg);
  top:10px;
}

@media (min-width: 860px) {
  .rotate-x-180 {
    transform: rotateX(180deg) translateX(100%); /* Apply translateX only on screens larger than 640px */
  }

  #instantly-card::after{
    right:-20px;
    top:-40px;
    transition: all 0.75s ease-in-out;
    z-index:10;
  }
  
  #instantly-card.rotate-x-180::after{
    transform: rotateX(180deg);
    top:40px;
  }
  
  /* For proper Firefox display */
 #instantly-card-front{transform: rotateX(0deg);} 
  
}

.rotate-x-180-o {
  transform: rotateX(180deg);
}

#instantly-card.ES::after{
content:url("https://storage.googleapis.com/flangu-static/flags/ES.svg");
}

#instantly-card.DE::after{
  content:url("https://storage.googleapis.com/flangu-static/flags/DE.svg");
  }

#instantly-card.JP::after{
content:url("https://storage.googleapis.com/flangu-static/flags/JP-HS.svg");}

#instantly-card.TR::after{
content:url("https://storage.googleapis.com/flangu-static/flags/TR.svg");
}    

#instantly-card.FR::after{
content:url("https://storage.googleapis.com/flangu-static/flags/FR.svg");
}    

#instantly-card.IN::after{
content:url("https://storage.googleapis.com/flangu-static/flags/IN.svg");
}  

#instantly-card.SE::after{
content:url("https://storage.googleapis.com/flangu-static/flags/SE.svg");
}  

#instantly-card.US::after{
content:url("https://storage.googleapis.com/flangu-static/flags/US.svg");
}

/* Chart.js styling */

.chartjs-tooltip {
  z-index: 100 !important;
}

/* styling for rating button carousel */

.rating-buttons {
  width: 90%;
  max-width: 1536px;
  margin-inline: auto;
  height: 75px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

.itemLeft,
.itemRight {
  position: absolute;
  bottom:0;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  justify-content: center;
  width:115px;
}

.itemLeft {
  left: max(calc(115px * 16), 100%);
  animation-name: scrollLeft;
}

.itemRight {
  right: max(calc(115px * 16), 100%);
  animation-name: scrollRight;
}

.item1 {
  animation-delay: calc(30s / 16 * (16 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 16 * (16 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 16 * (16 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 16 * (16 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 16 * (16 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 16 * (16 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 16 * (16 - 7) * -1);
}

.item8 {
  animation-delay: calc(30s / 16 * (16 - 8) * -1);
}

.item9 {
  animation-delay: calc(30s / 16 * (16 - 9) * -1);
}

.item10 {
  animation-delay: calc(30s / 16 * (16 - 10) * -1);
}

.item11 {
  animation-delay: calc(30s / 16 * (16 - 11) * -1);
}

.item12 {
  animation-delay: calc(30s / 16 * (16 - 12) * -1);
}

.item13 {
  animation-delay: calc(30s / 16 * (16 - 13) * -1);
}

.item14 {
  animation-delay: calc(30s / 16 * (16 - 14) * -1);
}

.item15 {
  animation-delay: calc(30s / 16 * (16 - 15) * -1);
}

.item16 {
  animation-delay: calc(30s / 16 * (16 - 16) * -1);
}

/* User panel side icons styling */

.side-icon{
  transition: color 0.2s ease-in-out, opacity 0.8s ease-in-out, margin 0.8s ease-in-out, width 0.8s ease-in-out;
}

        /* Custom fade-in and slide-up animation */
@keyframes fadeInSlideUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Custom fade-in and slide-up animation using margin */
@keyframes fadeInSlideUpMargin {
  from {
      opacity: 0;
      margin-top: 20px;
  }
  to {
      opacity: 1;
      margin-top: 0;
  }
}      


/* Dynamic staggered animation for child elements */
.animate-fade-in > * {
  opacity: 0;
  animation: fadeInSlideUp 0.8s ease-out forwards ;
}

.animate-fade-in > *:nth-child(n) {
  animation-delay: calc(0.2s * var(--appear-order, 0));
}

/* Dynamic staggered animation for child elements */
.animate-fade-in-margin > * {
  opacity: 0;
  animation: fadeInSlideUpMargin 0.8s ease-out forwards ;
}

.animate-fade-in > *:nth-child(n) {
  animation-delay: min(calc(0.1s * var(--appear-order, 0)), 2s);
}


/* Hamburger menu for landing page */

.hamburger-button {
  width: 40px;
  height: 40px;
  position: relative;
}

.hamburger-icon{
  top:18px;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  background-color: #5687E8;
  width: 32px;
  height: 3px;
  border-radius: 3px;
  position: absolute;
  transition: all 0.5s;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
}

.hamburger-icon::before {
  transform: translate(-16px, -9px);
}

.hamburger-icon::after {
  transform: translate(-16px, 9px);
}

.hamburger-menu {
  padding: 30px;
  display: none;
  z-index: 20;
  transform-origin: top center;
  gap: 18px;
  animation: rollOut 0.3s ease-out;
}

@keyframes rollOut {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

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

.hamburger-button.active .hamburger-icon {
  background-color: transparent;
 }
 
 .hamburger-button.active .hamburger-icon::before {
  transform: translate(-16px, 0) rotate(-45deg);
 }
 
 .hamburger-button.active .hamburger-icon::after {
  transform: translate(-16px, 0) rotate(45deg);
 }

 .translator-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #D1D5DB white; 
}

/* Styles for warning messages in reviews */

.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.fade-out.hiding {
  opacity: 0;
}

/* Tailwind does not work for some reason */
.border-b-1{
  border-bottom: 1px solid #5687E8;
}

#sidebar{
  transition: 
  filter 0.3s ease-in-out,   /* filter takes 300 ms */
  width  0.8s ease-in-out;   /* width takes 600 ms */
}

main {
  transition: filter 0.3s ease-in-out;
}

.blurred-modal {
  filter: blur(3px) brightness(0.75);
}

#showcase-images-container{
  aspect-ratio: 1100 / 582;
}

.post-content h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}
.post-content h3 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.post-content p {
  line-height: 1.75;
  margin-bottom: 1rem;
}
.post-content a {
  color: #5687e8; /* indigo-400 */
  text-decoration: underline;
}
.post-content ul, .post-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  list-style-position: outside;
}
.post-content ul {
  list-style-type: disc;
}
.post-content ol {
  list-style-type: decimal;
}
.post-content blockquote {
  border-left: 4px solid #5687e8; /* indigo-600 */
  padding-left: 1rem;
  margin-left: 0;
  font-style: italic;
  color: #9ca3af; /* gray-400 */
}
.post-content pre {
  background-color: #1f2937; /* gray-800 */
  color: #d1d5db; /* gray-300 */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.post-content img {border-radius: 15px; width:max-content; height:auto !important;}

.table-of-contents h2 {font-weight: bold; margin-bottom: 18px;}

.table-of-contents a {color:#5687E8; animation: 500ms ease-in-out ;}

.table-of-contents a:hover {color:#8fbeef; text-decoration: underline;}

.toc-container li {
  margin-bottom: 0.5rem;
}

/* --- Styling for H3 items (the user's request) --- */

/* 1. Add bigger indentation for the h3 list item */


.toc-container li.toc-h3 {
  padding-left: 1.5rem; /* Adjust this value for more/less indentation */
}

/* 2. Add a dot before the h4 list item */
.toc-container li.toc-h3::before {
  content: "•"; /* This creates the dot */
  color: #888;  /* Optional: style the dot's color */
  font-weight: bold;
  display: inline-block;
  width: 1em; /* Ensures consistent spacing */
  margin-left: -1em; /* Pulls the dot into the padding area */
}

/* Chart.js styling */

.chartjs-tooltip {
  z-index: 100 !important;
}

/* styling for rating button carousel */

.rating-buttons {
  width: 90%;
  max-width: 1536px;
  margin-inline: auto;
  height: 75px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

.itemLeft,
.itemRight {
  position: absolute;
  bottom:0;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  justify-content: center;
  width:115px;
}

.itemLeft {
  left: max(calc(115px * 16), 100%);
  animation-name: scrollLeft;
}

.itemRight {
  right: max(calc(115px * 16), 100%);
  animation-name: scrollRight;
}

.item1 {
  animation-delay: calc(30s / 16 * (16 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 16 * (16 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 16 * (16 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 16 * (16 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 16 * (16 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 16 * (16 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 16 * (16 - 7) * -1);
}

.item8 {
  animation-delay: calc(30s / 16 * (16 - 8) * -1);
}

.item9 {
  animation-delay: calc(30s / 16 * (16 - 9) * -1);
}

.item10 {
  animation-delay: calc(30s / 16 * (16 - 10) * -1);
}

.item11 {
  animation-delay: calc(30s / 16 * (16 - 11) * -1);
}

.item12 {
  animation-delay: calc(30s / 16 * (16 - 12) * -1);
}

.item13 {
  animation-delay: calc(30s / 16 * (16 - 13) * -1);
}

.item14 {
  animation-delay: calc(30s / 16 * (16 - 14) * -1);
}

.item15 {
  animation-delay: calc(30s / 16 * (16 - 15) * -1);
}

.item16 {
  animation-delay: calc(30s / 16 * (16 - 16) * -1);
}

/* User panel side icons styling */

.side-icon{
  transition: color 0.2s ease-in-out, opacity 0.8s ease-in-out, margin 0.8s ease-in-out, width 0.8s ease-in-out;
}

        /* Custom fade-in and slide-up animation */
@keyframes fadeInSlideUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Custom fade-in and slide-up animation using margin */
@keyframes fadeInSlideUpMargin {
  from {
      opacity: 0;
      margin-top: 20px;
  }
  to {
      opacity: 1;
      margin-top: 0;
  }
}      


/* Dynamic staggered animation for child elements */
.animate-fade-in > * {
  opacity: 0;
  animation: fadeInSlideUp 0.8s ease-out forwards ;
}

.animate-fade-in > *:nth-child(n) {
  animation-delay: calc(0.2s * var(--appear-order, 0));
}

/* Dynamic staggered animation for child elements */
.animate-fade-in-margin > * {
  opacity: 0;
  animation: fadeInSlideUpMargin 0.8s ease-out forwards ;
}

.animate-fade-in > *:nth-child(n) {
  animation-delay: min(calc(0.1s * var(--appear-order, 0)), 2s);
}


/* Hamburger menu for landing page */

.hamburger-button {
  width: 40px;
  height: 40px;
  position: relative;
}

.hamburger-icon{
  top:18px;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  background-color: #5687E8;
  width: 32px;
  height: 3px;
  border-radius: 3px;
  position: absolute;
  transition: all 0.5s;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
}

.hamburger-icon::before {
  transform: translate(-16px, -9px);
}

.hamburger-icon::after {
  transform: translate(-16px, 9px);
}

.hamburger-menu {
  padding: 30px;
  display: none;
  z-index: 20;
  transform-origin: top center;
  gap: 18px;
  animation: rollOut 0.3s ease-out;
}

@keyframes rollOut {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

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

.hamburger-button.active .hamburger-icon {
  background-color: transparent;
 }
 
 .hamburger-button.active .hamburger-icon::before {
  transform: translate(-16px, 0) rotate(-45deg);
 }
 
 .hamburger-button.active .hamburger-icon::after {
  transform: translate(-16px, 0) rotate(45deg);
 }

 .translator-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #D1D5DB white; 
}

/* Styles for warning messages in reviews */

.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.fade-out.hiding {
  opacity: 0;
}

/* Tailwind does not work for some reason */
.border-b-1{
  border-bottom: 1px solid #5687E8;
}

#sidebar{
  transition: 
  filter 0.3s ease-in-out,   /* filter takes 300 ms */
  width  0.8s ease-in-out;   /* width takes 600 ms */
}

main {
  transition: filter 0.3s ease-in-out;
}

.blurred-modal {
  filter: blur(3px) brightness(0.75);
}

#showcase-images-container{
  aspect-ratio: 1100 / 582;
}

.post-content h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}
.post-content h3 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.post-content p {
  line-height: 1.75;
  margin-bottom: 1rem;
}
.post-content a {
  color: #5687e8; /* indigo-400 */
  text-decoration: underline;
}
.post-content ul, .post-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  list-style-position: outside;
}
.post-content ul {
  list-style-type: disc;
}
.post-content ol {
  list-style-type: decimal;
}
.post-content blockquote {
  border-left: 4px solid #5687e8; /* indigo-600 */
  padding-left: 1rem;
  margin-left: 0;
  font-style: italic;
  color: #9ca3af; /* gray-400 */
}
.post-content pre {
  background-color: #1f2937; /* gray-800 */
  color: #d1d5db; /* gray-300 */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.post-content img {border-radius: 15px; width:max-content; height:auto !important;}

.table-of-contents h2 {font-weight: bold; margin-bottom: 18px;}

.table-of-contents a {color:#5687E8; animation: 500ms ease-in-out ;}

.table-of-contents a:hover {color:#8fbeef; text-decoration: underline;}

.toc-container li {
  margin-bottom: 0.5rem;
}

/* --- Styling for H3 items (the user's request) --- */

/* 1. Add bigger indentation for the h3 list item */


.toc-container li.toc-h3 {
  padding-left: 1.5rem; /* Adjust this value for more/less indentation */
}

/* 2. Add a dot before the h4 list item */
.toc-container li.toc-h3::before {
  content: "•"; /* This creates the dot */
  color: #888;  /* Optional: style the dot's color */
  font-weight: bold;
  display: inline-block;
  width: 1em; /* Ensures consistent spacing */
  margin-left: -1em; /* Pulls the dot into the padding area */
}

.deck-mode-button{
  height: 100px;
  width:50px;
  background-color: whitesmoke;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}