@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

:root {
    --quanta-primary: #3A32FF;
    --quanta-secondary: #aa4efe;
    --quanta-bg-default: #fff;
    --quanta-pre-bg: #2a2d30;         /* near slate-900 */
    --quanta-pre-text: #e2e8f0;       /* slate-200 */
    --quanta-pre-border: #1e293b;     /* slate-800 */
    --quanta-pre-dot-red: #f87171;    /* rose-400 */
    --quanta-pre-dot-yellow: #facc15; /* amber-400 */
    --quanta-pre-dot-green: #34d399;  /* emerald-400 */
    --quanta-primary-hover:   var(--quanta-blue-600);
    --quanta-text-primary:    #ffffff;
    --quanta-border-primary:  #3A32FF;

}

html[data-theme="dark"] {
    --quanta-primary: #3A32FF;
    --quanta-primary-hover:   var(--quanta-blue-600);
    --quanta-text-primary:    #ffffff;
    --quanta-border-primary:  #3A32FF;
    --quanta-secondary: #aa4efe;
    --quanta-bg-default: #0f172a;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.font-chivo{
  font-family: "Chivo", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.bricolage-grotesque {
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

*{
  outline: none;
  font-family: "Bricolage Grotesque", "Geist", "Poppins", "Inter", sans-serif;
}

html, body {
  font-family: "Poppins", "Inter", sans-serif;
}

#mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  transition: left 0.3s ease-in-out;
}

/* When open, slide into view */
#mobile-menu.open {
  left: 0;
}

nav a.active{
  border-bottom: 2px solid var(--quanta-primary);
}