/* @import url(https://fonts.bunny.net/css?family=figtree:50,100,200,300,400,500,600,700,800);
 */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Golos+Text:wght@400..900&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap");

@import url("./utilities.css");
@import url("./layout.css");
@import url("./main.css");

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

html {
  height: -webkit-fill-available;
  cursor: none;
  font-size: 100%;
}

/* CURSOR */
#custom-cursor {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  opacity: 0.98;
  pointer-events: none;
  transition:
    width 0.3s ease-out,
    height 0.3s ease-out;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: normal;
  background: var(--petrol-200);
  outline: 8px solid var(--black-op70);
}

@media (hover: none) and (pointer: coarse) {
  #custom-cursor {
    display: none;
  }

  html {
    cursor: auto !important;
  }
}

/* CLICKABEL - HOVER */
a:hover,
.dropdown-button:hover,
[onclick]:hover,
.hitbox:hover,
.clickable:hover {
  cursor: none;
}

a:hover ~ #custom-cursor,
.dropdown-button ~ #custom-cursor,
[onclick]:hover ~ #custom-cursor,
.clickable:hover ~ #custom-cursor {
  width: 1.25rem;
  height: 1.25rem;
}

/* CURSOR MARK */
::-moz-selection,
::selection {
  background: var(--yellow-800);
}

.bg_gold {
  background: var(
    --fade_3,
    linear-gradient(
      180deg,
      #b5a26f 0%,
      #bfaf83 5.95%,
      #fff3d3 17.86%,
      #ffeec1 52.58%,
      #bfaf83 88.79%,
      #b5a26f 95.24%
    )
  );
}

#flag {
  background: var(--gold-400);
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  margin: 0rem;
  color: var(--cream-200);
  font-family: var(--font-primary);
  letter-spacing: 0.06rem;
  line-height: 150%;
  font-size: var(--font-size-xs);
  font-weight: 350;
  overflow: auto;
}

.background-container {
  display: flex;
  justify-content: center;
  height: 100vh;
  height: auto;
  width: 100vw;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
    url(/images/memolia_bg/memolia_night_nc.png);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
    url(/images/memolia_bg/memolia_index_night.png);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    url(images/memolia_bg/memolia_index_day.png);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    url(../images/memolia_bg/bg_closeup.png);

  background-position: center;
  margin: 0;
  background-size: cover;
}

main {
  min-width: 360px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--black-op70);
  margin: 0;
}

.site-wrapper {
  min-width: 360px;
  width: 780px;
  max-height: 96.5%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  border-radius: 20px;
  box-shadow: 0rem 0rem 2rem 1rem rgba(0, 0, 0, 0.1);
  /*   overflow: auto;
 */
  margin: 1rem 1rem auto 1rem;
}

.section_environment_crop {
  display: flex;
  position: absolute;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  height: 100%;
  width: 100%;
}

.section_block {
  display: flex;
  position: absolute;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  align-self: end;
  bottom: 0;
  right: 0;
  max-width: 224px;
  min-height: 40px;
  padding: 1rem 1.5rem;
  color: var(--secondary-bright);
  border-radius: 1.25rem;
  margin: 1rem;
  z-index: 10;
  gap: 2rem;
  background: var(--black-op70);
  backdrop-filter: blur(100rem);
}

/* LOGOTYPE */
.logotype {
  height: 1.55rem;
  opacity: 100%;
  filter: grayscale(0.5);
}

/* LINE */
.line {
  border: 0;
  height: 1.5px;
  background-color: var(--petrol-700);
  background: #3bcebf;
  width: 100%;
  margin: 0;
}

/* FONTS */
/* H1 */
.text-display {
  font-size: 1.5rem;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 125%;
  margin: 0;
}

.text-effect {
  text-shadow:
    0px 0px 0px rgba(0, 0, 0, 0),
    -1px -1px 0 rgba(0, 0, 0, 0),
    -1px 1px 0 rgba(0, 0, 0, 0),
    1px 1px 0px rgba(0, 0, 0, 0.1);
  color: var(--petrol-200);
}
.text-effect:hover {
  color: var(--pink-200);
  opacity: 1;
}

.op75 {
  filter: opacity(0.75);
}

/* H2 */
.text-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: 125%;
  margin: 0;
  word-wrap: break-word;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
}

/* H3 - GÅ ÖVER TEXT-HEADING - SKA VARA HEADLINE*/
.text-headline-md {
  line-height: 125%;
  margin: 0;
  word-wrap: break-word;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
}

.text-headline-sm {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04rem;
}
/*  */
.text-headline {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.04rem;
}

/* TEXT MODIFIERS */
.text--size-lg {
  font-size: var(--font-size-lg);
}
.text--size-md {
  font-size: var(--font-size-md);
}
.text--size-sm {
  font-size: var(--font-size-sm);
}

.text--weight-bold {
  font-weight: var(--font-weight-bold);
}

.text--weight-regular {
  font-weight: var(--font-weight-regular);
}

.text--weight-light {
  font-weight: var(--font-weight-light);
}

.text--uppercase {
  text-transform: uppercase;
}

/* POPUP TEXT-ANIMATION */
#popupText {
  scale: 1;
  line-height: 125%;
  animation: scaleText 1000ms ease-in-out 1;
}

@keyframes scaleText {
  0%,
  100% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.05);
  }
  40% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.02);
  }
}

.h3_animated_path {
  font-size: 1.25rem;
  font-weight: 800;
  fill: var(--petrol-200);
}

.h3_menu-card-label {
  color: var(--color-text-dark);
  letter-spacing: 0.04rem;
  text-align: center;
  font-size: var(--font-size-xs);
  line-height: 100%;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

.color--text-dark {
  color: var(--color-text-dark);
}

.h3_label_s {
  text-align: right;
  line-height: 1rem;
  margin: 0;
  padding: 0;
}

h5 {
  font-size: 1.25rem;
  font-weight: 500;
}

p {
  line-height: 150%;
  margin: 0;
  text-align: left;
}

.p_mini {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  line-height: 150%;
  color: var(--petrol-200);
}

.p_game-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: inline-block;
  animation: ani_logo-mini 1s ease-in-out;
  font-size: 150%;
}
ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
li {
  line-height: 170%;
}

.tooltip {
  position: absolute;
  text-align: center;
  line-height: 125%;
  background: var(--petrol-200);
  color: var(--black-op80);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 450;
  padding: 0.5rem 0.75rem;
  width: auto;
  /*   z-index: 10;
 */
  border-radius: 0.75rem;
  opacity: 0;
  margin-top: 0.5rem;
  transition: opacity 0.5s ease;
  transform: translateY(3rem); /* lite uppflyttad */
  pointer-events: none;
}

.icon-wrapper {
  display: flex;
  position: static;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  gap: 1rem;
  overflow: visible;
}

.icon-wrapper:hover .tooltip {
  opacity: 1;
  transition: opacity 0.5s ease 1s;
}

@keyframes ani_logo-mini {
  0% {
    font-size: 100%; /* Ursprunglig storlek */
    /* Ingen skalning */
  }
  25% {
    font-size: 160%; /* Mellanstorlek */ /* Mellanskala */
  }
  100% {
    font-size: 150%; /* Slutstorlek */
    /* Slutskala */
  }
}

strong {
  font-weight: 800;
  animation: blink 0.7s steps(2, start) infinite;
}

.p-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* LINKS */
a {
  text-decoration: none;
  color: var(--petrol-200);
}

a:hover {
  color: var(--pink-200);
}

/* TEXT ANIMATION */
defs {
  top: 1rem;
}

/* TEXT ON PATH */
.container_text-animation {
  position: relative;
  width: 100%;
  height: 0;
  top: -20px;
}

.svg-path-container  {
  width: 100%;
}
/* TEXT ON PATH ENDS */
/* FONTS END */

/* INDEX - ARROW */
.arrow-container {
  display: inline-block;
  position: relative;
  padding-right: 2rem;
  width: auto;
  height: 2rem;
}

.arrow_long {
  display: flex;
  min-height: 0.75rem;
  height: 2rem;
  width: auto;
  position: absolute;
  top: 50%;
  left: -10%;
  transform: translate(-25%, -25%);
  animation: move-arrow 1s infinite ease-in-out alternate;
}

/* ANIMATION INDEX-ARROW */
@keyframes move-arrow {
  0% {
    transform: translate(-0.5rem, -50%);
  }
  100% {
    transform: translate(0.5rem, -50%);
  }
}

.section_block:hover .arrow_long {
  animation-play-state: paused;
}

.section_environment {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  z-index: 9;
}
/* ANIMATION INDEX-ARROW ENDS */

header {
  box-shadow: 0px -0px 16px 4px rgba(0, 0, 0, 0.5) inset;
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 1.25rem 2rem;
  position: sticky;
  height: 100%;
  top: 0;
  z-index: 100;
  gap: 0.5rem;
  /*   background: var(--black-op80);
 */
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  border-radius: 1.25rem 1.25rem 0 0;
}

.section_title-play {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navbar {
  display: flex;
  position: relative;
  width: 100%;
  height: 4rem;
  justify-content: space-between;
  align-items: start;
  align-items: center;
  z-index: 9;
  gap: 4rem;
}

/* NAV-MENU */
.nav-menu-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 112;
  background: var(--black-op80);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  padding: 2rem;
  border-radius: 1.25rem;
}

.nav-menu-overlay.active {
  display: flex;
}

.nav-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: static;
  top: 100%;
  right: 0;
  padding: 2rem;
  height: 100%;
  width: 100%;
  list-style-type: none;
  overflow: hidden;
  transition: max-height 0.5s ease-in;
  color: var(--color-text-primary);
  gap: 2.5rem;
  font-weight: 450;
}
/* FOR CLOSE BUTTON LANGUAGE */

.nav-toggle {
  position: relative;
  bottom: 1rem;
  justify-content: end;
  width: 100%;
  display: inline-flex;
}

.nav-list-item {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999rem;
  color: var(--cream-200);
  transition: all 0.2s ease;
}

.nav-list-item:hover {
  background: var(--green-400);
  color: var(--color-text-muted);
}

/* .selected-option {
  background: var(--cream-200);
  color: var(--color-text-muted);
} */

.nav-list-item:hover .nav-icon,
.selected-option .nav-icon {
  filter: invert(1);
}

.nav-icon {
  transition: filter 0.2s ease;
}

.position-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
}

.wrapper-horizontal {
  display: flex;
  flex-direction: row;
  /*  justify-content: end; */
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.hamburger-icon {
  z-index: 9;
  height: 1.75rem;
}

.container_page-label {
  display: flex;
  width: auto;
  min-width: var(--measure-total-width-m, 320px);
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-gap-l, 20px);
  padding-top: 0.25rem;
}

/* BOARD */
.board {
  background: rgba(0, 0, 0, 0.85);
  color: var(--secondary-bright);
  width: auto;
  height: auto;
  padding: 5rem 2.5rem;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 101;
}
.board-gap {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

board-width {
  width: 100%;
}

.board-selector {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  justify-content: space-between;
}
.board-option {
  /*   background: var(--bg-card); */
  background: none;
  color: #cecece;
  border-radius: 0.75rem;
  padding: 1.25rem;
  border: transparent;
  display: flex;
  flex-direction: column;
  align-items: left;
  font-size: 12px;
  font-weight: 600;
  gap: 1rem;
  margin: 0;
}

.board-option:hover {
  background: rgba(255, 255, 255, 0.1);
  background: var(--green-200);
  color: var(--black-op80);
}

.board-option.selected {
  background: var(--cream-200);
  color: #1a1a1a;
}

.board-option.selected:hover .img-board {
  filter: invert(0);
}

.board-option:hover .img-board {
  filter: invert(1) contrast(200);
}

/* WORDS CATEGORY DD */
.dd-arrow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow:
    -1px -8px 16px 1px rgba(10, 4, 4, 0.07) inset,
    0px 0px 4px 2px rgba(140, 127, 69, 0.07) inset;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
}
.arrow {
  width: 100%;
  object-fit: scale-down;
  transition: transform 0.5s ease-in;
  transform: rotate(0deg);
}

.arrow.rotate {
  transition: transform 0.5s ease-out;
  transform: rotate(180deg);
}

.bg_secondary {
  background: var(--secondary-bright);
}

.bg_secondary:hover {
  box-shadow: var(--shadow_primary_box-shadow);
  background: var(--cream-200);
}

/* BUTTON HITBOX ETC */
.hit-box {
  display: flex;
  min-width: var(--hit-box);
  min-height: var(--hit-box);
  width: auto;
  align-items: center;
  cursor: pointer;
}

.hitbox_tl {
  display: flex;
  justify-content: start;
  align-items: flex-start;
}

.hitbox_cr {
  display: flex;
  justify-content: end;
  align-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
}

.close-btn {
  height: 1rem;
  width: 1rem;
}

/* button {
  display: flex;
  justify-items: end;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  width: auto;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  justify-content: end;
  margin: auto 0 auto auto;
} */

/* .button {
  display: flex;
  justify-content: center;
  align-items: center;
 
  width: auto;
  gap: 0.5rem;
  border-radius: 99px;
  color: var(--brown-800);
  text-transform: uppercase;
  text-wrap: nowrap;
  padding: 1.25rem 1.25rem;
  size: 100%;
} */
/*  */

/*  */

.button_icon {
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 99px;
  align-items: center;
  color: var(--brown-800);
}

/* .width_100 {
  width: 100%;
} */

/* .button_info {
  background: var(--secondary-bright);
} */
/* .button_info:hover {
  background-color: var(--cream-200);
} */

/* PAUSED BUTTONS */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    border-radius: 999%;
  }
  50% {
    transform: scale(1.25);
    border-radius: 999%;
  }
}

.pulse-effect {
  animation: pulse 500ms ease-in-out 3;
}

.icon_xs {
  width: 1rem;
  height: 1rem;
  transition: ease-out 0.3s;
}

.icon_sm {
  width: 1.25rem;
  height: 1.25rem;
  transition: ease-out 0.3s;
}
.icon_md {
  width: 1.5rem;
  height: 1.5rem;
  transition: ease-out 0.3s;
}

.icon_lg {
  width: 2rem;
  height: 2rem;
  transition: ease-out 0.3s;
}

.icon_single {
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}

.icon_single:hover {
  filter: contrast(200);
  scale: 1.25;
}

/* .button_s_r {
  width: 1.5rem;
  margin: 4px;
  transition: ease-out 0.3s;
}

.button_m {
  width: 2.5rem;
  transition: ease-out 0.3s;
}

.button_m_r {
  width: 2.5rem;
  transition: ease-out 0.3s;
} */

.r {
  justify-content: end;
}

/* .button_m {
  width: 2.5rem;
  transition: ease-out 0.3s;
} */

.button_m:hover {
  /*   opacity: 0.9;
 */
  filter: contrast(2);
}

/* .button_pause {
  width: 32px;
  height: 32px;
} */

.button_m_r:hover,
.icon_s_r:hover {
  /*   opacity: 0.8;
 */
  filter: contrast(2);
}
/* 
.button_mini {
  min-width: 2rem;
  min-height: 2rem;
  scale: 1;
}
.button_mini:hover {
  scale: 1.2;
  filter: contrast(2);
} */

.button_icon-text {
  min-width: 120px;
  padding: 0.75rem 1rem;
}

/* .button_warning {
  background: var(--color-bg-warning);
  color: var(--black-op70);
}

.button_cta {
  background-color: var(--color-bg-success);
}

.button_info {
  background-color: var(--color-text-info);
}

.button_text {
  min-width: 152px;
  width: 100%;
  padding: 1.25rem 2.5rem;
}

.button_label {
  color: var(--brown-800);
  color: var(--black-op80);
  font-size: var(--font-size-sm);
  font-weight: 650;
} */

.button_close {
  width: auto;
}

/* .wrapper_h2-text-button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
} */

.wrapper-buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  gap: 2rem;
  /*   flex-wrap: wrap; */
}

/* BUTTONS - PAUS & PLAY */
.wrapper-buttons-round {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-self: stretch;
  gap: 1.75rem;
}

/* BUTTONS ETC ENDS */

footer {
  width: auto;
  height: auto;
  padding: 0.25rem 2rem;
  box-shadow: 0px -0px 16px 2px rgba(0, 0, 0, 0.5) inset;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  border-radius: 0 0 1.25rem 1.25rem;
}

.footer_container {
  display: flex;
  width: auto;
  min-height: 40px;
  margin: 0;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.wrapper_h2-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

/* SECTION TOTAL */
.container_total {
  display: flex;
  width: auto;
  height: auto;
  padding: 0.5rem 0;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}

.wrapper_spel-min {
  display: flex;
  justify-content: space-between;
  width: auto;
  height: 100%;

  border-radius: 20px;
  align-items: center;
  gap: 20px;
}

.wrapper_text-min {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.wrapper_text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.position_right {
  display: flex;
  justify-content: end;
}

/* SECTION TOTAL ENDS */

.scroll-area {
  display: flex;
  flex-direction: column;
  width: auto;
  min-height: 50vh;
  align-items: stretch;
  overflow-y: auto;
  padding: 1.75rem;
  gap: 1.75rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.8));
}
.cate-section_bg {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--black-op70);
  border-radius: 20px;
  overflow: auto;
  overflow-y: scroll;
  overflow: clip;
  padding: 2rem;
  position: relative;
}

/* PAGE MENU (SCROLL AREA) */
.container_menu-cards {
  /*  display: flex;
  flex-direction: column; */
  /* flex-wrap: wrap; */
  height: 100%;
  min-height: 100%;
  padding: 4rem 0;
  /*   align-content: center;
 */
  margin-bottom: 0px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
}

.container_menu-cards_column {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  column-gap: 2rem;
}

.column2 {
  padding-top: 80px;
}

.wrapper_h3 {
  display: flex;
  position: absolute;
  width: 100%;
  padding: 0 2rem;
  color: var(--petrol-200);
}
.wrapper_h3-words {
  padding: 1rem 0 0 0;
  color: var(--petrol-200);
}

.menu-card {
  display: flex;
  width: 200px;
  height: 200px;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  align-items: center;
  flex-shrink: 0;
  border-radius: 99rem;
  transition: 0.3s ease-out;
  /*box-shadow: rgba(49, 31, 5, 0.5) -10px -10px 50px 10px inset;*/
  box-shadow: var(--shadow-menu-card);
}

.menu_card_padding_left {
  display: flex;
  padding-left: 2rem;
  width: auto;
}

.menu_card_padding_right {
  display: flex;
  padding-right: 2rem;
  width: auto;
}

.menu-card:hover {
  scale: 1.02;
}

/* MENU-CARDS */
.icon_menu-card_image {
  display: flex;
  width: 3.25rem;
  height: 3.25rem;
  justify-content: center;
  align-items: center;
  /*   filter: sepia(10%) contrast(100%) saturate(1.5);
 */
}

.wrapper_icon-text-stars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-gap-xs, 0.5rem);
}

.container_categories {
  display: flex;
  flex-direction: row;
}
.image_cate_icon {
  width: 2rem;
  height: 2rem;
  filter: sepia(0.5);
  filter: sepia(10%) contrast(100%) saturate(1.5);
}

/* PAGE WORDS (SCROLL AREA) */
.category_label_dd {
  flex-direction: row;
  min-width: var(--measure-total-width-s, 320px);
  width: 100%;
  overflow: hidden;
  border-radius: 1.25rem;
}

.dd-category_label {
  width: auto;
  padding: 1rem 1.75rem;
  box-shadow: rgb(19, 6, 2, 0.6) -0px -8px 20px 4px inset;
}

.wrapper_category {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.button_category {
  display: flex;
  width: auto;
  padding: var(--spacing-padding-m, 20px) var(--spacing-padding-m, 0px);
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
  border-radius: 8px;
}

.wrapper_text-stars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-gap-xxs, 4px);
}

.wrapper_stars-hitbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.wrapper_total-stars {
  display: flex;
  margin: auto;
  gap: var(--spacing-gap-xxs, 4px);
  object-fit: cover;
}

.wrapper_total-stars_horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-gap-s, 8px);
  object-fit: cover;
}

/* TEST NEW STAR MENU
.wrapper_hori {
  display: flex;
  justify-content: column;
  align-content: center;
  color: #e3a856;
  color: var(--yellow-800);
  gap: 0.25rem;
  background: #002623;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.125rem 0.75rem;
  border-radius: 1rem;
  box-shadow: var(--shadow_button);
} */

.star {
  position: relative;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  /* previous star - filter: contrast(125%) hue-rotate(350deg); */
  filter: contrast(80%) hue-rotate(325deg) brightness(50%);
}
.star-bright {
  /*   width: 1.5rem; */
  /*   filter: contrast(70%) hue-rotate(350deg) brightness(110%);
  filter: contrast(80%) hue-rotate(325deg) brightness(100%);
 */
  filter: brightness(150%);
}

.star-filled {
  width: 1rem;
  height: 1rem;
  filter: none;
  filter: brightness(75%);
}

.star-empty {
  width: 1rem;
  height: 1rem;
  opacity: 0.3;
}

.hide {
  display: none;
}

#flag {
  /* width: 1.75rem;
  height: 1.75rem; */
  border-radius: 100%;
  filter: saturate(0.8);
  padding: 2px;
  background: var(
    --gold_fade_bright,
    linear-gradient(
      180deg,
      #fff3d3 0%,
      #ffeec1 22.32%,
      #b5a26f 68.45%,
      #b5a26f 95.24%
    )
  );
  /* button-shadow */
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

/* DROPWOWN WORDS */
.dd-category_words {
  display: flex;

  flex-direction: column;
  align-items: flex-start;
  /* align-self: stretch; */
  max-height: 0;
  transition: max-height 0.8s ease-out;
}

.dd-category_words.open {
  max-height: 80vh;
  transition: max-height 0.8s ease-out;
}

.height {
  height: 200px;
  width: 100%;
}

.wrapper-word {
  width: 100%;
  height: auto;
}

.list-word {
  display: flex;
  margin: 0;
  padding: 0.75rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  font-weight: 500;
  color: var(--color-text-dark);
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.25) inset;
  min-height: 44px;
}

.list-word:hover {
  background: rgba(255, 255, 255, 0.2);
}

.translation {
  position: relative;
  text-decoration: underline 4px var(--black-op70) dotted;
  text-underline-offset: 6px;
  transition: color 300ms ease-in;
}

.translation::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 5px;
  background: var(--petrol3);
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform 300ms ease-in,
    background 300ms ease-in;
}

.translation.clicked::after {
  transform: scaleX(1);
  text-underline-offset: 6px;
}

/* PAGE WORDS (SCROLL AREA) ENDS */

/* LANGUAGE */
/* .menu {
  display: flex;
  position: relative;
  justify-content: end;
  width: 352px;
  border-radius: 1.25rem;
} */
.menu-header {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  cursor: pointer;
  width: auto;
  min-height: 40px;
  min-width: 40px;
}
.menu__list {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.5s ease-in;
  position: relative;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1;
  gap: 1rem;
}

/* LANGUAGE LIST */
/* .menu_item_wrapper {
  padding: 0.5rem 0;
} */

.menu__item {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  align-items: center;
  min-height: 44px;
  max-height: 52px;
  padding: 0.5rem 1.25rem;
  gap: 1.25rem;
  border-radius: 999rem;
  /*   text-transform: uppercase;
 */
}

.menu__item:hover {
  background-color: var(--green-400);
  color: var(--color-text-muted);
}

.selected-option {
  background-color: var(--cream-200);
  color: var(--color-text-muted);
}

.flag {
  border-radius: 999rem;
  border: solid 1.5px #fff;
}

/* DD - TIDIGARE LANGUAGE */
.dd {
  display: flex;
  position: relative;
  justify-content: end;
  width: 352px;
  border-radius: 1.25rem;
}

.dd-header {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  cursor: pointer;
  width: auto;
  min-height: 40px;
  min-width: 40px;
}

.dd-header_title {
  display: flex;
  align-items: center;
}

.dd__list {
  display: inline;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--green-900);
  color: var(--cream-400);
  border-radius: 1rem;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.dd__item {
  display: flex;
  cursor: pointer;
  align-items: center;
  min-height: 40px;
  padding: 1rem 1.25rem;
}

.dd__item:hover {
  background-color: var(--cream-400);
  color: var(--color-text-muted);
}

.dd--open .dd__list {
  display: block;
  max-height: 300px;
}

#ddArrow {
  transition: transform 0.5s ease;
}
.arrow-sm {
  height: 1rem;
  width: auto;
}

.dd--open #ddArrow {
  transform: rotate(180deg);
}
/* DD ENDS */

/* INDEX */
.section_text {
  padding: 1.5rem 3.5rem;
  background-color: rgba(49, 151, 144, 0.7);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 75ch;
  border-radius: 1.25rem;
  overflow: visible;
  /*   box-shadow: var(--shadow_menu-card);
 */
  backdrop-filter: blur(4px);
}

.top_minus {
  padding-top: 0rem;
}

.wrapper_p {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: 300%;
}

/* PAGE GAME (WITHIN SCROLL AREA)  */
.section_card-area {
  height: auto;
  margin: 0;
  background-color: var(--black-op70);
}

.main_card-area {
  background-color: var(--black-op80);
}

.container_game {
  padding: 1.25rem;
  display: grid;
  grid-gap: clamp(0.75rem, 0.75rem, 0.75rem);
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  max-width: 100%;
}

/* PAGE GAME CARDS */
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 8.25rem;
  height: 8.25rem;
  min-width: 64px;
  min-height: 64px;
  margin: auto;
  padding: 1rem;
  border-radius: 1rem;
  transform-style: preserve-3d;
  transition: all 0.4s ease-in-out;
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}

.card-text {
  /*   font-size: clamp(0.75rem, 1vw, 1rem);
 */
  font-size: var(--font-size-xxs);

  letter-spacing: 0.04rem;
  line-height: 1rem;
  text-align: center;
  text-wrap: wrap;
  font-weight: 400;
  text-transform: lowercase;
}

.front-image {
  height: 3.5rem;
  width: auto;
}

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  border-radius: 1rem;
  top: 0;
  left: 0;
  gap: 0.5rem;
  height: 100%;
  width: 100%;
  padding: 0.5rem;
  box-shadow:
    1px 1px 8px 0px rgba(0, 0, 0, 0.1),
    -1px -1px 8px 0px rgba(0, 0, 0, 0.1) inset,
    1px 1px 8px 0px rgba(0, 0, 0, 0.15) inset;
}

.card .front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
}

.card.flipped {
  transform: rotateY(180deg);
}

.card .back {
  /*background-image: url(data:image...); */
  background: var(
    --gold_fade_bright,
    linear-gradient(
      180deg,
      #fff3d3 0%,
      #ffeec1 22.32%,
      #b5a26f 68.45%,
      #b5a26f 95.24%
    )
  );
  background: var(--fade-forest);
  background-position: center center;
  background-size: cover;
  backface-visibility: hidden;
}

/* PAGE GAME (WITHIN SCROLL AREA) ENDS */

.info-seconds {
  flex-direction: row;
  min-width: 2.5rem;
}

.timer {
  gap: 0.25rem;
}

.article_game-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

.container-mission {
  display: flex;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}

.mission-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: aquamarine;
  border-radius: 100rem;
  width: 200px;
  height: 200px;
  box-shadow: 8px 4px 12px rgba(2, 2, 2, 0.2);
  transition: box-shadow 0.2s ease-out; /* Lägg till övergången här */
}

.mission-card:hover {
  background-color: aliceblue;
  box-shadow: 8px 4px 12px rgba(2, 2, 2, 0);
  animation-name: mission-card;
}

@keyframes mission-card {
  0% {
    box-shadow: 8px 4px 12px rgba(2, 2, 2, 0.2);
  }
  100% {
    box-shadow: 8px 4px 12px rgba(2, 2, 2, 0);
  }
}

/* OVERLAY */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  margin: 0;
}

.overlay.hidden {
  display: none;
}

/* POP UPS */

.popup {
  width: 32rem;
  margin: auto;
  background-color: rgba(49, 151, 144, 0.7);
  backdrop-filter: blur(8px);
  border-radius: 1.25rem;
  padding: 0.5rem 3rem;
  z-index: 12;
}

.modal-section {
  position: relative;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background-color: var(--black-op80);
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.popup_bg {
  display: none;
  position: absolute;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background-color: rgba(20, 10, 5, 0.6);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 20% rgba(0, 0, 0, 0.2) 10%
  );
  z-index: 100;
  padding: 15px;
}

/* .popup_styling {
  position: relative;
  display: inline-flex;
  height: auto;
  max-width: 540px;
  padding: 2.5rem;
  bottom: 0;
  gap: 2.5rem;
  flex-direction: column;
  z-index: 101;
  border-radius: 1rem;
  animation-name: fadeIn;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  box-shadow: 0 0 0 20px var(--petrol-400);
  background: var(--black-op90);
} */

.lottie-container {
  position: absolute;
  width: 60;
  height: 60%;
  opacity: 0.8;
  z-index: 10;
}

.wrapper_justify-end {
  display: flex;
  justify-content: flex-end;
}

.hidden {
  display: none;
}
/* POPUP ENDS */

/* BREAKPOINTS 1024, 880, 640, 468 */
@media screen and (max-width: 1024px) {
  /*   p {
    font-size: 1.125rem;
  } */
  .navbar {
    height: 3rem;
  }
  header {
    padding: 1.75rem 1.75rem 1rem 1.75rem;
  }
  .container_game {
    grid-template-columns: repeat(5, 1fr);
    padding: 1.25rem;
  }
  /* .button_icon-text {
    padding: 0.75rem 1rem;
  } */

  .cate-section_bg {
    padding: 2em;
  }
  .dd-category_label {
    padding: 0.75rem 1.25rem;
  }
  .scroll-area {
    padding: 1.25rem;
  }
  .board-gap {
    gap: 2.5rem;
  }
  .popup_styling {
    max-width: 520px;
    padding: 2.25rem;
  }
}

@media screen and (max-width: 880px) {
  .logotype {
    height: 1.25rem;
  }
  p {
    line-height: 175%;
  }

  .h3_menu-card-label {
    font-size: inherit;
  }

  h5 {
    font-size: 1rem;
    font-weight: 500;
  }
  header {
    padding: 1.75rem 1.75rem 0.75rem 1.75rem;
  }
  footer {
    padding: 0rem 2rem;
  }
  ul {
    gap: 1rem;
  }
  .site-wrapper {
    max-width: 532px;
  }
  .wrapper_p {
    gap: 0.25rem;
  }

  .dd {
    width: 100%;
  }
  .section_title-play {
    gap: 0rem;
  }
  .menu-card {
    width: 180px;
    height: 180px;
  }

  .icon_menu-card_image {
    width: 2.75rem;
    height: 2.75rem;
  }
  .wrapper-buttons-round {
    gap: 1.75rem;
  }
  /*  .button_primary {
    min-width: 1.75rem;
    min-height: 1.75rem;
  }
  .button_icon-text {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0rem;
  } */

  .star {
    width: 0.875rem;
  }
  /*  .button_text {
    padding: 1rem 2rem;
    min-width: 120px;
  }
  .button_mini {
    width: 1.75rem;
    height: 1.75rem;
  }
  .button_m_r {
    height: 2.25rem;
    width: 2.25rem;
  } */
  .hide-button-text-sm {
    display: none;
    padding: 0.25rem;
  }
  .button_category {
    gap: 1.5rem;
  }
  .container_game {
    grid-template-columns: repeat(4, 1fr);
  }
  .translation {
    text-underline-offset: 5px;
  }
  .container_total {
    padding: 0.5rem 0;
  }
  .card {
    height: 7rem;
    width: 7rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
  }
  .front,
  .back {
    border-radius: 0.75rem;
    gap: 0.125rem;
    padding: 0.25rem;
  }
  .card-text {
    /*       font-size: clamp(0.75rem, 1vw, 1rem);
 */
    margin: 0.25rem;
  }
  .front-image {
    height: 3rem;
  }
  .wrapper_icon-text-stars {
    gap: 0.25rem;
  }
  .section_text {
    padding: 1.125rem 2.5rem;
    gap: 2.5rem;
  }
  .board-option {
    padding: 0.75rem;
  }
  .board-gap {
    gap: 2.25rem;
  }
  .scroll-area {
    padding: 1rem;
  }
  .popup_styling {
    max-width: 468px;
    padding: 2rem 2rem;
    box-shadow: 0 0 0 15px inherit;
  }
  .lottie-container {
    width: 100%;
    height: 100%;
  }
  .section_block {
    max-width: 188px;
    padding: 0.5rem 1rem;
  }
}

@media screen and (max-width: 640px) {
  .site-wrapper {
    width: 600px;
  }
  .navbar {
    height: 2.75rem;
  }
  .card {
    width: 19.25vw;
    height: 19.25vw;
    max-width: 7rem;
    max-height: 7rem;
    min-width: var(--measure-card-size-s, 5.25rem);
    min-height: var(--measure-card-size-s, 5.25rem);
    padding: 0.5rem;
  }
  .card-text {
    line-height: 0.75rem;
    margin: 4px;
  }
  .board {
    padding: 3rem 2.25rem;
  }
  .board-option {
    padding: 0.5rem;
  }
  .board-gap {
    gap: 2rem;
  }
  .section_text {
    /*  padding: 8rem 3rem; */
    padding: 0.75rem 2.25rem;
    gap: 2.5rem;
  }
  .popup {
    width: 26.5rem;
    padding: 0.5rem 2rem;
  }
  .lottie-container {
    width: 150%;
    height: 150%;
  }
}

@media screen and (max-width: 468px) {
  .site-wrapper {
    margin: 0 0 auto 0;
    border-radius: 0 0 1.25rem 1.25rem;
  }
  .hide_animated_game_bg {
    display: none;
  }
  header {
    padding: 1.25rem 1.25rem 0.75rem 1.25rem;
    border-radius: 0;
  }
  footer {
    padding: 0rem 1.5rem;
  }
  .info-seconds {
    min-width: 1.5rem;
  }
  .score {
    min-width: 1.5rem;
  }
  .section_title-play {
    gap: 0.5rem;
  }
  .section_text {
    padding: 0.25rem 1.25rem;
  }
  .board {
    padding: 3rem 1.25rem;
    gap: 1.25rem;
  }

  .board-selector {
    gap: 0.25rem;
  }
  .board-option {
    padding: 0.5rem;
  }
  .board-gap {
    gap: 1.5rem;
  }
  .site-wrapper {
    min-width: 360px;
  }
  .navbar {
    height: 3rem;
    gap: 0rem;
  }
  .arrow-sm {
    height: 0.75rem;
  }
  .wrapper_text-min {
    gap: 0.75rem;
  }

  .dd {
    min-width: auto;
  }
  .dd-category_label {
    padding: 0.25rem 1.25rem;
    box-shadow: (19, 6, 2, 0.6) -0px -4px 16px 2px inset;
  }
  .scroll-area {
    padding: 0.75rem;
    gap: 1rem;
  }
  .cate-section_bg {
    padding: 2em;
  }
  .card {
    width: 19.25vw;
    height: 19.25vw;
    padding: var(--spacing-padding-xxs, 8px) var(--spacing-padding-xxs, 8px);
    border-radius: 0.5rem;
  }
  .front,
  .back {
    border-radius: 0.5rem;
  }
  .front-image {
    min-height: 2rem;
  }
  .container_game {
    padding: 1.25rem;
    justify-content: center;
    grid-gap: clamp(0.5rem, 0.5rem, 0.5rem);
  }
  .icon_menu-card_image {
    width: 2.5rem;
    height: 2.5rem;
  }
  .menu-card {
    width: 156px;
    height: 156px;
  }
  .menu_card_padding_left {
    padding-left: 1.25rem;
  }
  .menu_card_padding_right {
    padding-right: 1.25rem;
  }
  .star {
    width: 0.75rem;
  }
  .container_game {
    padding: auto;
  }
  .container-direction {
    display: flex;
    flex-direction: column;
  }
  .container_menu-cards_column {
    margin: -0.75rem;
    row-gap: 1rem;
  }
  /*   .container_menu-cards_column1 {
    row-gap: 1rem;
  } */
  .popup_styling {
    padding: 1.75rem 1.75rem;
    gap: 2rem;
  }
  .popup {
    width: 20rem;
    padding: 0.5rem 1.25rem;
  }
  .wrapper_h2-text {
    gap: 0.75rem;
  }
  /*   .button {
    padding: 0.5rem 1.25rem;
  } */
  /*  .button_primary {
    width: 100%;
  } */
  .button_icon-text {
    width: 2rem;
    height: 2rem;
  }
  .hide-button-text-sm {
    padding: 0.25rem;
  }
  .wrapper-buttons {
    padding-top: 0.25rem;
    gap: 1.75rem;
  }
  .wrapper-buttons-round {
    gap: 1rem;
  }
  .button_category {
    gap: 1.25rem;
  }
  /*   .button_m_r {
    width: 2rem;
    height: 2rem;
  } */
  .dd-category_label {
    padding: 0.25rem 1.25rem;
  }
  .dd-arrow {
    padding: 0.25rem;
  }
  .arrow {
    width: 50%;
  }

  .list-word {
    padding: 0.5rem 1.25rem;
  }
  .wrapper_icon-text-stars {
    gap: var(--spacing-gap-xs, 0.125rem);
  }
  .wrapper_stars-hitbox {
    gap: 0.75rem;
  }
  .lottie-container {
    width: 200%;
    height: 200%;
  }
}

/*
@media (orientation: portrait) {
  .container_game {
    grid-template-columns: repeat(4, 1fr);
  }
}
   */

/* TEST NEDAN */

/* 6 kort → 3x2 */
.container_game[data-cards="6"] {
  grid-template-columns: repeat(3, 1fr);
}

/* 12 kort → 4x3 */
.container_game[data-cards="12"] {
  grid-template-columns: repeat(4, 1fr);
}

/* 16 kort → 4x4 */
.container_game[data-cards="16"] {
  grid-template-columns: repeat(4, 1fr);
}

/* 20 kort → 5x4 */
.container_game[data-cards="20"] {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 468px) {
  /* 6 kort → 2x3 */
  .container_game[data-cards="6"] {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 12 kort → 3x4 */
  .container_game[data-cards="12"] {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 16 kort → 4x4 (behåll) */
  .container_game[data-cards="16"] {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 20 kort → 4x5 */
  .container_game[data-cards="20"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (orientation: portrait) {
  .container_game[data-cards="20"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* TEST TOGGLE */

.toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer; /* hela raden känns klickbar */
  user-select: none;
}

.toggle-checkbox {
  display: none; /* vi gömmer själva checkboxen */
}

.toggle-slider {
  width: 40px;
  height: 20px;
  background-color: var(--pink-200);
  border-radius: 999px;
  position: relative;
  transition: background-color 0.3s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--cream-200);
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-checkbox:checked + .toggle-slider {
  background-color: var(--green-200);
}

.toggle-checkbox:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* BANNER */
.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--brown-600);
  color: var(--cream-200);
  font-weight: bold;
  overflow: hidden;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 9999;
}

.banner p {
  white-space: nowrap;
  display: inline-block;
  padding-right: 100%;
  animation: scroll-text 20s linear infinite;
}

@keyframes scroll-text {
  0% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* toggle - switch card language */
.btn-switch {
  display: inline-flex;
  align-items: center;
  cursor: none;
}

.flag-left {
  z-index: 1;
}
.flag-right {
  z-index: 2;
  transform: translateX(-0.5rem);
}

.test {
  width: 60px;
  height: 20px;
  background: #003a35;
}

/* statistik tillfällig */
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.spacing-sm {
  gap: 0.25rem;
}

.spacing-md {
  gap: 1rem;
}