*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  line-height: calc(1em + 0.5rem);
}

@font-face {
  font-family: "Plus Jakarta Sans Bold";
  src: url("/fonts/PlusJakartaSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Bold Italic";
  src: url("/fonts/PlusJakartaSans-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Extra Bold";
  src: url("/fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Extra Bold Italic";
  src: url("/fonts/PlusJakartaSans-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Extra Light";
  src: url("/fonts/PlusJakartaSans-ExtraLight.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Extra Light Italic";
  src: url("/fonts/PlusJakartaSans-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Italic";
  src: url("/fonts/PlusJakartaSans-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Light";
  src: url("/fonts/PlusJakartaSans-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Light Italic";
  src: url("/fonts/PlusJakartaSans-LightItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Medium";
  src: url("/fonts/PlusJakartaSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Medium Italic";
  src: url("/fonts/PlusJakartaSans-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Regular";
  src: url("/fonts/PlusJakartaSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans Semi Bold";
  src: url("/fonts/PlusJakartaSans-SemiBold.woff2") format("woff2");
}

html {
  scroll-behavior: smooth;

  --color-text: #222020;
  --color-background: #ffffff;
  --color-green: #2AB789;
  --color-cyan: #B1F2D9;
  --color-cyan-dark: #8bcab2;
  --color-pink: #FF94E1;
  --color-blue: #647bef;
  --color-red: #FF6631;
  --color-yellow: #E9F279;
  --onboarding-text: #7e7676;
  --onboarding-label:#73747a;
  --onboarding-text-dark: #525252;
  --onboarding-back-button: #ABADAC;
  --error-login: #b43f3f;
  --button-background: transparent;

  --module-card-background: #ffffffb8;
  --module-wrong-error: #fff0ed;
  --module-right-correct: #ecfff7;
  --module-feedback-wrong: #fff0ed;
  --module-option-label: #ffffff80;
  --module-option-label-hover: #ffffffe6;
  --module-option-checked: color-mix(in srgb, var(--color-accent) 50%, white);
  --module-option-checked-letter: #ffffff;
  --module-text-input: #ffffffcc;

  --simulator-background: #000;
  --simulator-background-panel: #ffffff;
  --simulator-num: #00000014;

  --select-dropdown: #ffffff00;

  --accent-intro: #B1F2D9;
  --accent-module-1: #FF94E1;
  --accent-module-2: #E9F279;
  --accent-module-3: #FF6631;
  --accent-module-4: #647bef;

  --accent-intro-dark: #1e4d3a;
  --accent-module-1-dark: #7a3d63;
  --accent-module-2-dark: #6b6e12;
  --accent-module-3-dark: #8a3318;
  --accent-module-4-dark: #2d3f8a;

  --gradient-bg-cyan: radial-gradient(circle at 0% 0%, rgb(181 219 206 / 0.4) 0%, transparent);
  --gradient-bg-cyan-card: #fff;
  --gradient-bg-green: radial-gradient(circle at 0% 0%, rgb(42 183 137 / 0.2) 0%, transparent);
  --gradient-bg-pink: radial-gradient(circle at 0% 0%, rgb(255 148 225 / 0.3) 0%, transparent);
  --gradient-bg-blue: radial-gradient(circle at 0% 0%, rgb(34 65 221 / 0.2) 0%, transparent);
  --gradient-bg-yellow: radial-gradient(circle at 0% 0%, rgb(233 242 121 / 0.4) 0%, transparent);
  --gradient-bg-red: radial-gradient(circle at 0% 0%, rgb(255 102 49 / 0.4) 0%, transparent);
  --gradient-bg-header: radial-gradient(circle at 0% 0%, rgb(181 219 206 / 0.4) 0%, transparent);

  --font-bold: 'Plus Jakarta Sans Bold', sans-serif;
  --font-bold-italic: 'Plus Jakarta Sans Bold Italic', sans-serif;
  --font-extra-bold: 'Plus Jakarta Sans Extra Bold', sans-serif;
  --font-extra-bold-italic: 'Plus Jakarta Sans Extra Bold Italic', sans-serif;
  --font-extra-light: 'Plus Jakarta Sans Extra Light', sans-serif;
  --font-extra-light-italic: 'Plus Jakarta Sans Extra Light Italic', sans-serif;
  --font-italic: 'Plus Jakarta Sans Italic', sans-serif;
  --font-light: 'Plus Jakarta Sans Light', sans-serif;
  --font-light-italic: 'Plus Jakarta Sans Light Italic', sans-serif;
  --font-medium: 'Plus Jakarta Sans Medium', sans-serif;
  --font-medium-italic: 'Plus Jakarta Sans Medium Italic', sans-serif;
  --font-regular: 'Plus Jakarta Sans Regular', sans-serif;
  --font-semi-bold: 'Plus Jakarta Sans Semi Bold', sans-serif;

  --size-xxs: 0.5rem;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-lg: 1.125rem;
  --size-xl: 1.25rem;
  --size-2xl: 1.5rem;
  --size-3xl: 1.875rem;
  --size-4xl: 2.25rem;
  --size-5xl: 3rem;
  --size-6xl: 3.75rem;
  --size-7xl: 4.5rem;
  --size-8xl: 6rem;
  --size-9xl: 8rem;
  --size-10xl: 10rem;

  font-family: var(--font-bold);
  color: var(--color-text);
  background-color: var(--color-background);
}

html.dark-mode {
  --color-text: #ffffff;
  --color-background: #fff;
  --color-green: #142621;
  --color-cyan: #1e4d3a;
  --color-cyan-dark: #2d6b52;
  --color-pink: #7a3d63;
  --color-blue: #2d3f8a;
  --color-red: #8a3318;
  --color-yellow: #6b6e12;
  --onboarding-text: #fff;
  --onboarding-text-dark: #fff;
  --onboarding-label:#fff;
  --onboarding-back-button: #565656;
  --error-login: #fa4545;
  --button-background: #6ecfab2b;

  --module-card-background: #9ebfaf47;
  --module-wrong-error: #ffffff00;
  --module-right-correct: #ffffff00;
  --module-feedback-wrong: #eec6be;
  --module-option-label: #789889c7;
  --module-option-label-hover: #e2e2e290;
  --module-option-checked: var(--color-accent);
  --module-option-checked-letter: #ffffff00;
  --module-text-input: #a0b4acab;

  --simulator-background: #000;
  --simulator-background-panel: #bababa;
  --simulator-num: #00000033;

  --select-dropdown: #00000047;

  --accent-intro: var(--accent-intro-dark);
  --accent-module-1: var(--accent-module-1-dark);
  --accent-module-2: var(--accent-module-2-dark);
  --accent-module-3: var(--accent-module-3-dark);
  --accent-module-4: var(--accent-module-4-dark);

  --gradient-bg-cyan: radial-gradient(circle at 0% 0%, rgb(59, 129, 102) 0%, rgb(26 26 26));
  --gradient-bg-cyan-card: radial-gradient(circle at 0% 0%, rgb(181 219 206 / 0.4) 0%);
  --gradient-bg-green: radial-gradient(circle at 0% 0%, rgb(29 143 105) 0%, rgb(26 26 26));
  --gradient-bg-pink: radial-gradient(circle at 0% 0%, rgb(196 96 159) 0%, rgb(26 26 26));
  --gradient-bg-blue: radial-gradient(circle at 0% 0%, rgb(79 106 245) 0%, rgb(26 26 26));
  --gradient-bg-yellow: radial-gradient(circle at 0% 0%, rgb(184 193 42) 0%, rgb(26 26 26));
  --gradient-bg-red: radial-gradient(circle at 0% 0%, rgb(204 74 31) 0%, rgb(26 26 26));
  --gradient-bg-header: radial-gradient(circle at 0% 0%, rgb(4 5 5 / 40%) 0%, transparent);
}


img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .course-detail,
  .course-detail.active {
    transition: none !important;
  }

  .course-card:hover {
    scale: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}