@font-face {
  font-family: 'b-inline';
  src: url('./fonts/BungeeInline-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'b-outline';
  src: url('./fonts/BungeeOutline-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'b-shade';
  src: url('./fonts/BungeeShade-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'anon-pro';
  src: url('./fonts/AnonymousPro-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'crim-text';
  src: url('./fonts/CrimsonText-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'crim-text';
  src: url('./fonts/CrimsonText-Regular.ttf') format('truetype');
}

@font-face { /* cursive */
  font-family: 'comic-bold';
  src: url('./fonts/ComicNeue-Bold.ttf') format('truetype');
}

@font-face { /* sans-serif */
  font-family: 'audio-wide';
  src: url('./fonts/Audiowide-Regular.ttf') format('truetype');
}

@font-face { /* sans-serif */
  font-family: 'michroma';
  src: url('./fonts/Michroma-Regular.ttf') format('truetype');
}

@font-face { /* sans-serif */
  font-family: 'exo2';
  src: url('./fonts/Exo2-Regular.ttf') format('truetype');
}

@font-face { /* sans-serif */
  font-family: 'roboto';
  src: url('./fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face { /* system-ui */
  font-family: 'ps2p';
  src: url('./fonts/PressStart2P-Regular.ttf') format('truetype');
}

@font-face { /* cursive */
  font-family: 'phr';
  src: url('./fonts/PatrickHand-Regular.ttf') format('truetype');
}

@font-face { /* cursive */
  font-family: 'phr-sc';
  src: url('./fonts/PatrickHandSC-Regular.ttf') format('truetype');
}

@font-face { /* system-ui */
  font-family: 'untiqua';
  src: url('./fonts/UncialAntiqua-Regular.ttf') format('truetype');
}

@font-face { /* cursive */
  font-family: 'medsharp';
  src: url('./fonts/MedievalSharp-Regular.ttf') format('truetype');
}

@font-face { /* cursive */
  font-family: 'gloria';
  src: url('./fonts/GloriaHallelujah-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'pf-display';
  src: url('./fonts/PlayfairDisplay.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face { /* sans-serif */
  font-family: 'jaro';
  src: url('./fonts/Jaro.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


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

body {
    background-color: #151A24;
}

/* hero or whatever section */

header {
    background-image: url('../assets/img/upper_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    height: 300px;
}

.nav-bar {
    display: flex;
    justify-content: center;
    padding: 20px;
}


.nav-links {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 2rem;
    font-family: 'anon-pro', monospace;
}

.nav-links a {
    text-decoration: none;
    font-size: 1rem;
    color: white;
    transition: color 0.3s ease-in-out;
}

.nav-links a:hover {
    color: #f4a261;
}

.nav-links a.active {
    background-color: #B3CDE0;
    color: #151A24;
    padding: 10px 23px;
    border-radius: 20px;
}


h1 {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.75rem;
}

.bungee-inline {
  font-family: 'b-inline', sans-serif;
  font-weight: 400;
  font-style: normal;
}


.bungee-outline {
  font-family: 'b-outline', sans-serif;
  font-weight: 400;
  font-style: normal;
}

html {
    scroll-behavior: smooth;
}

a.done {
    filter: grayscale(100%);
    pointer-events: none;
    opacity: 0.5;
    display: inline-block;
}

/* quest paths section */
.quest-paths {
    container-type: inline-size;
    background-image: url('../assets/img/lower_bg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* necessary for layering with z-index */
    margin-top: -.1rem;
}

.banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    width: 100%;
}

.banner img {
    width: 100%;
}

.banner h2 {
    font-family: 'pf-display', serif;
    color: white;
    position: absolute;
    text-align: center;
    font-size: clamp(0.75rem, 3.2cqi, 3.5rem);
    padding-bottom: clamp(0.85rem, 4.5cqi, 5rem);
}

.paths {
    margin-top: -7.3cqi;
    width: 90%;
}

.paths ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
}

.paths ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paths ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.paths img {
    width: clamp(70px, 18cqi, 300px);
    height: clamp(95px, 22cqi, 350px);
}

.paths span {
    font-family: 'pf-display', serif;
    font-size: clamp(0.5rem, 2cqi, 2.5rem);
    color: white;
    text-align: center;
    padding-top: clamp(0.8rem, 2cqi, 2.5rem);
}

.paths ul li a:hover img {
    height: clamp(110px, 26cqi, 390px);
}

.paths .inactive {
    pointer-events: none;
}

.paths .inactive img {
    height: clamp(50px, 15cqi, 230px);
}

.paths .inactive span {
    padding-top: clamp(0.4rem, 1cqi, 1.5rem);
}

.paths ul li a:hover .science-label {
    color: #A33E37CC;
    text-shadow: 0 0 5px #A33E37CC;
    transition: color 0.3s ease, text-shadow 0.3s ease; 
}

.paths ul li a:hover .tech-label {
    color: #193D71;
    text-shadow: 0 0 5px #193D71CC;
    transition: color 0.3s ease, text-shadow 0.3s ease; 
}

.paths ul li a:hover .history-label {
    color: #D19637;
    text-shadow: 0 0 5px #D19637CC;
    transition: color 0.3s ease, text-shadow 0.3s ease; 
}

.paths ul li a:hover .math-label {
    color: #086C5C;
    text-shadow: 0 0 5px #086C5CCC;
    transition: color 0.3s ease, text-shadow 0.3s ease; 
}

.end-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(30px, 7.5cqi, 150px);
    margin-top: clamp(3rem, 7cqi, 7rem);
    display: none;
}

.end-options button {
    font-family: 'untiqua', system-ui;
    font-size: clamp(0.8rem, 1.8cqi, 2.5rem);
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    text-shadow: 0 0 2px rgba(255, 255, 0, 0.8);
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.end-options button:hover {
    transform: translateY(1px);
    text-shadow: 
    0 0 4px rgba(255, 255, 0, 0.9),
    0 0 8px rgba(255, 255, 0, 0.8),
    0 0 12px rgba(255, 255, 0, 0.7);
}

.end-options button.view-score {
    position: relative;
}

.end-options button.view-score::after {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: url('/assets/img/view_score.png') no-repeat bottom;
    background-size: contain;
}

.end-options button.view-score:hover::after {
    display: none;
}

/* About Overlay */
.about-overlay {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: white;
    box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.6),
    0px 5px 15px rgba(255, 255, 255, 0.4);
    border-radius: 25px;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.about-overlay.active {
    opacity: .9;
    pointer-events: auto;
}

.about-overlay h2 {
    font-family: 'pf-display';
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: 10px;
}

.about-overlay .shade {
    font-family: 'b-shade';
}

.about-overlay p {
    font-family: 'crim-text';
    font-size: .6rem;
    padding: 8px 10px;
    padding-bottom: 0;
}

.p3 {
    font-weight: 700;
}

/* Quest Paths Overlay */
/* Science */
.science-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.science-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.science-overlay img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 5cqi;
}

.science-content {
    position: absolute;
    width: 100%;
    padding: 12cqi 13% 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 3;
    text-align: center;
}

.science-title {
    font-family: 'jaro', sans-serif;
    color: #06227B;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 2cqi;
}

.science-title h3 {
    font-size: clamp(0.7rem, 2cqi, 2rem);
    display: flex;
    align-items: center;
    gap: 5px;
}

.science-title img {
    width: clamp(18px, 3cqi, 50px);
    height: auto;
    overflow: visible;
    position: relative;
    top: 2.5cqi;
}

.science-title p {
    font-size: clamp(1.1rem, 3cqi, 3.2rem);
}

.science-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.science-question img {
    width: 35%;
    border-radius: 10px;
    margin-bottom: 3%;
}

.science-question p {
    font-family: 'comic-bold', cursive;
    font-size: clamp(0.5rem, 2cqi, 1.8rem);
    width: 85%;
}

.science-answers {
    margin-top: auto;
    margin-bottom: 12.5cqi;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

.science-answers button {
    background-color: #EBECF0;
    font-family: 'comic-bold', cursive;
    color: #B2B6C6;
    font-size: clamp(0.5rem, 2cqi, 1.8rem);
    width: auto;
    height: auto;
    padding: clamp(2px, 0.5cqi, 10px) clamp(10px, 2.5cqi, 25px);
    margin: clamp(3px, 0.8cqi, 16px) clamp(10px, 2.5cqi, 25px);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.science-answers button:hover {
    color: rgb(0, 0, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.science-answers .correct {
    color: white;
    background-color: #00B900;
}

.science-answers .wrong {
    color: white;
    background-color: #F03A3A;
}

/* Science Result */
.science-result-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.science-result-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.science-result-overlay img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 5cqi;
}

.science-result-content {
    font-family: 'roboto', sans-serif;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: 12cqi 13% 12.5cqi;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.science-result-content h3 {
    color: #A6ABBD;
    font-weight: 700;
    font-size: clamp(1rem, 3cqi, 4.5rem);
    margin-top: clamp(10px, 4cqi, 120px);
    margin-bottom: clamp(5px, 1.5cqi, 20px);
}

.science-result {
    font-size: clamp(0.5rem, 2.5cqi, 2rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: clamp(5px, 1cqi, 30px);
}

.science-result .correct {
    color: #00B300;
}

.science-result .wrong {
    color: #F13E3E;
}

.progress-circle-cont {
    width: 50px;
    height: 50px;
}

.outer-circle {
    width: 100%;
    height: 100%;
    background: conic-gradient(
        #f44336 0deg 72deg, /* Red: First 20% (72 degrees out of 360) */
        #4caf50 72deg 360deg /* Green: Remaining 80% */
    );
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-circle {
    position: absolute;
    background: white;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.inner-circle span {
    font-size: .8rem;
    color: #A6ABBD;
}

.science-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 50px;
    margin-top: 10px;
}

.science-options button {
    font-family: 'roboto', sans-serif;
    font-size: 0.5rem;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.science-options button.choose {
    background-color: #1C7DCB;
}

.science-options button.retake {
    background-color: #F13E3E;
}

.science-options button:hover {
    background-color: #00B900;
}

/* Technology */
.tech-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
    background-color: #151A24;
}

.tech-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.tech-overlay > img {
    width: 100cqi;
    margin-bottom: 5cqi;
}

.tech-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    text-align: center;
}

.tech-title {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.tech-title p {
    position: absolute;
    top: 10cqi;
    left: 11%;
    transform: translate(-50%, -50%);
    font-family: 'audio-wide', sans-serif;
    font-size: clamp(1.2rem, 3cqi, 4.5rem);
    color: #00415A;
}

.tech-title h3 {
    position: absolute;
    top: 11.5cqi;
    left: 65%;
    transform: translate(-50%, -50%);
    font-family: 'michroma', sans-serif;
    font-size: clamp(0.5rem, 2cqi, 2.8rem);
    font-weight: 400;
    color: white;
    letter-spacing: clamp(0.4rem, 0.8cqi, 2rem);
}

.tech-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 18cqi;
}

.tech-question img {
    width: 20%;
    border-radius: 10px;
    margin-bottom: 3%;
}

.tech-question p {
    font-family: 'exo2', sans-serif;
    font-size: clamp(0.5rem, 2cqi, 2.25rem);
    color: white;
    max-width: 60%;
    text-align: start;
}

.tech-answers {
    margin-top: auto;
    margin-bottom: 14cqi;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(4px, 1.5cqi, 28px);
    width: 60%;
}

.tech-answers button {
    background: url('../assets/img/tech_button.png') no-repeat center bottom;
    background-size: contain;
    font-family: 'michroma', sans-serif;
    font-size: clamp(0.3rem, 1.2cqi, 1.2rem);
    text-align: left;
    color: white;
    width: 80%;
    height: clamp(16px, 5cqi, 70px);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    padding-bottom: 2px;
}

.tech-answers button span {
    width: 80%;
    white-space: wrap;
    display: inline-block;
    padding-left: clamp(2px, 0.8cqi, 8px);
}

.tech-answers button:hover {
    background: url('../assets/img/tech_button_hover.png') no-repeat center bottom;
    background-size: contain;
    transform: scale(1.05);
}

.tech-answers .correct {
    background: url('../assets/img/tech_button_hover.png') no-repeat center bottom;
    background-size: contain;
    text-shadow: 
    0 0 5px #00FF00, 
    0 0 10px #00FF00, 
    0 0 15px #00FF00;
}

.tech-answers .wrong {
    background: url('../assets/img/tech_button_wrong.png') no-repeat center bottom;
    background-size: contain;
    text-shadow: 
    0 0 5px #FF0000,
    0 0 10px #FF0000,
    0 0 15px #FF0000;
}

/* Technology Result */
.tech-result-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
    background-color: #151A24;
}

.tech-result-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.tech-result-overlay > img {
    width: 100cqi;
    margin-bottom: 5cqi;
}

.tech-result-content {
    font-family: 'audio-wide', sans-serif;
    color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: 16cqi 5cqi 10cqi;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tech-result-content h3 {
    font-weight: 400;
    font-size: clamp(0.7rem, 3cqi, 4rem);
    margin-bottom: clamp(5px, 2cqi, 25px);
}

.tech-result {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(10px, 2cqi, 40px);
    margin-top: clamp(20px, 9cqi, 100px);
}

.tech-result .correct {
    background-image: url(/assets/img/tech_result_correct_bg.png);
    background-size: cover;
    background-position: center;
    padding: clamp(6px, 1.5cqi, 20px) clamp(14px, 4cqi, 45px);
}

.tech-result .wrong {
    background-image: url(/assets/img/tech_result_wrong_bg.png);
    background-size: cover;
    background-position: center;
    padding: clamp(6px, 1.5cqi, 20px) clamp(14px, 4cqi, 45px);
}

.tech-result .result {
    font-size: clamp(0.7rem, 4cqi, 4.5rem);
}

.tech-result .result-text {
    font-size: clamp(0.4rem, 1.5cqi, 2rem);
}

.progress-bar-cont {
    width: clamp(40px, 40cqi, 420px);
    height: clamp(6px, 1.5cqi, 20px);
    background-color: #666666;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
}

.progress-bar {
    width: 60%;
    height: 80%;
    background-color: white;
    border-radius: 10px;
    transition: width 0.4s ease;
}

.progress-label {
    position: absolute;
    top: clamp(8px, 1.5cqi, 20px);
    left: 60%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.progress-label p {
    font-size: clamp(0.4rem, 1.5cqi, 1.8rem);
}

.arrow-up {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid white;
}

.tech-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(8px, 1.5cqi, 25px);
    margin-top: clamp(8px, 1.8cqi, 25px);
}

.tech-options button {
    font-family: 'audio-wide', sans-serif;
    font-size: clamp(0.4rem, 1.5cqi, 2rem);
    color: white;
    padding: clamp(4px, 1cqi, 12px) clamp(8px, 2cqi, 20px);
    cursor: pointer;
    background: transparent;
    border: .025rem solid #00BCD4;
    border-radius: 5px;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.tech-options button:hover {
    background-color: #00BCD4;
    color: #00415A;
}

/* History */
.history-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.history-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.history-overlay > img {
    width: 100cqi;
}

.history-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10%;
    right: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 23cqi 0 3cqi;
}

.history-question {
    margin-bottom: 0;
}

.history-question p {
    font-family: 'roboto', sans-serif;
    font-size: clamp(0.5rem, 2cqi, 1.8rem);
}

.history-answers {
    margin-bottom: clamp(8px, calc(5cqi - 10px), 51px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(4px, 2cqi, 70px) clamp(10px, 3cqi, 45px);
    width: 100%;
}

.history-answers button {
    background: url('../assets/img/history_button.png') no-repeat center center;
    background-size: 100% 100%;
    font-family: 'ps2p', system-ui;
    font-size: clamp(0.285rem, 1cqi, 1.6rem);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    height: clamp(18px, 4cqi, 80px);
    width: auto;
    color: white;
    padding: clamp(2px, 0.5cqi, 6px) clamp(4px, 1cqi, 12px);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-answers button:hover {
    background-size: 100% 100%;
    color: white;
    transform: scale(1.05);
}

.history-answers .correct {
    background: url('../assets/img/history_button_hover.png') no-repeat center center;
    background-size: 100% 100%;
    color: white;
}

.history-answers .wrong {
    background: url('../assets/img/history_button_wrong.png') no-repeat center center;
    background-size: 100% 100%;
    color: white;
}

/* History Result */
.history-result-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.history-result-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.history-result-overlay > img {
    width: 100cqi;
}

.history-result-content {
    font-family: 'ps2p', system-ui;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.history-result-content h3 {
    text-align: center;
    font-size: clamp(0.7rem, 3cqi, 3rem);
    margin-top: clamp(15px, 3cqi, 40px);
    margin-bottom: clamp(10px, 2.5cqi, 35px);
}

.history-result {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0 clamp(15px, 6cqi, 90px);
}

.history-result .correct {
    color: #1A954E;
}

.history-result .wrong {
    color: #9C2A30;
}

.history-result .result {
    font-size: clamp(1.4rem, 6cqi, 6rem);
}

.history-result img {
    width: clamp(14px, 4cqi, 40px);
    margin-top: clamp(5px, 1.5cqi, 15px);
}

.history-result .result-text {
    font-family: 'roboto', sans-serif;
    font-size: clamp(0.4rem, 1.4cqi, 1.4rem);
    padding-top: 3px;
}

.history-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(8px, 4cqi, 50px);
    margin-top: clamp(8px, 1.8cqi, 25px);
}

.history-options button {
    border: none;
    background: none;
    width: clamp(55px, 16cqi, 160px);
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.history-options button:hover {
    transform: translateY(-4px);
}

.history-options button img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mathematics */
.math-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.math-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.math-overlay > img {
    width: 100cqi;
}

.math-content {
    color: white;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80%;
    padding-top: clamp(20px, 4cqi, 60px);
}

.math-question {
    margin-bottom: clamp(20px, 5cqi, 100px);
}

.math-question p {
    font-family: 'phr', cursive;
    font-size: clamp(0.6rem, 4cqi, 5rem);
}

.math-answers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(5px, 1.5cqi, 30px) clamp(8px, 3cqi, 50px);
    width: 80%;
}

.math-answers button {
    font-family: 'phr', cursive;
    font-size: clamp(0.5rem, 2.5cqi, 3rem);
    color: white;
    width: 100%;
    border: none;
    border-radius: clamp(2px, 0.8cqi, 10px);
    padding: clamp(3px, 1cqi, 15px) 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

.math-answers button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.math-answers button.correct {
    text-shadow:
    0 0 5px #00FF00,
    0 0 10px #00FF00,
    0 0 15px #00FF00;
}

.math-answers button.correct::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    width: clamp(15px, 5cqi, 80px);
    height: clamp(15px, 5cqi, 80px);
    transform: translateY(-50%);
    background-image: url('../assets/img/math_correct.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.math-answers button.wrong {
    text-shadow:
    0 0 5px #f00,
    0 0 10px #f00,
    0 0 20px #f00,
    0 0 30px #f00;
}

.math-answers button.wrong::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    width: clamp(15px, 5cqi, 80px);
    height: clamp(15px, 5cqi, 80px);
    transform: translateY(-50%);
    background-color: transparent;
    background-image: url('../assets/img/math_wrong.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Mathematics Result */
.math-result-overlay {
    container-type: inline-size;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.math-result-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.math-result-overlay > img {
    width: 100cqi;
}

.math-result-content {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.math-result-content h3 {
    font-family: 'phr-sc', cursive;
    font-weight: 400;
    text-align: left;
    width: 90%;
    font-size: clamp(1rem, 6cqi, 7rem);
    margin-bottom: clamp(8px, 1.5cqi, 25px);
}

.math-result {
    font-family: 'phr', cursive;
    font-size: clamp(0.7rem, 3cqi, 3.5rem);
    text-align: center;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(5px, 1cqi, 15px) 0;
}

.math-result .correct {
    text-shadow:
    0 0 5px #0f0,
    0 0 10px #0f0,
    0 0 20px #0f0,
    0 0 30px #0f0;
}

.math-result .wrong {
    text-shadow:
    0 0 5px #f00,
    0 0 10px #f00,
    0 0 20px #f00,
    0 0 30px #f00;
}

.math-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: clamp(10px, 3cqi, 60px);
    width: 70%;
    gap: 0 clamp(20px, 7cqi, 120px);
}

.math-options button {
    background: transparent;
    color: white;
    border: 1px dashed white;
    padding: clamp(3px, 0.8cqi, 12px) 0;
    font-family: 'gloria', cursive;
    font-size: clamp(0.5rem, 2cqi, 2.5rem);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.math-options button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Result */
.result-overlay {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease-in-out;
}

.result-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.result-overlay img {
    width: 100%;
}

.result-content {
    font-family: 'medsharp', cursive;
    color: white;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: 15px;
}

.result-content h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.result-each {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 50px;
    padding-left: 50px;
}

.result-each img {
    width: 10px;
}

.result-each p {
    font-size: .5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.result-total {
    display: flex;
    font-size: .7rem;
    color: #F5AC24;
    gap: 0 30px;
    margin-top: 10px;
    padding-left: 50px;
}

.result-content button {
    font-family: 'untiqua', system-ui;
    font-size: .5rem;
    color: white;
    width: auto;
    border: none;
    cursor: pointer;
    text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffbf00, 0 0 30px #ffbf00, 0 0 40px #ffbf00;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 30px;
}

/* Full-Screen Blur*/
.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

.blur-overlay.active {
    opacity: 1;
    pointer-events: none;
}

/* Block banner clicks when any quiz is active */
.blur-overlay.active ~ section .paths {
    pointer-events: none;
}

/* footer */
footer {
    position: absolute;
    bottom: 80px;
    width: 100%;
    text-align: center;
}

footer p {
    font-family: 'anon-pro', monospace;
    font-size: .7rem;
    color: white;
    text-align: center;
}



@media (min-width: 480px) /* 800 */ {

    .science-overlay {
        top: 23%;
    }

    .progress-circle-cont {
        width: 60px;
        height: 60px;
    }

    .inner-circle span {
        font-size: 1rem;
    }

    .science-options {
        gap: 0 60px;
        margin-top: 15px;
    }

    .science-options button {
        font-size: 0.6rem;
    }

    .tech-overlay {
        top: 23%;
    }


    .result-overlay {
        top: 23%;
    }

    .result-content {
        margin-top: 30px;
    }

    .result-content h3 {
        font-size: 1.5rem;
    }

    .result-each {
        gap: 12px 50px;
        padding-left: 70px;
    }

    .result-each img {
        width: 12px;
    }

    .result-each p {
        font-size: .675rem;
    }

    .result-total {
        font-size: .75rem;
        margin-top: 13px;
        padding-left: 70px;
    }

    .result-content button {
        font-size: .65rem;
        margin-top: 45px;
    }
}


@media (min-width: 580px) /* 800 */ {
    .science-overlay {
        top: 28%;
    }

    .science-result-overlay {
        top: 25%;
        left: 50%;
    }

    .progress-circle-cont {
        width: 80px;
        height: 80px;
    }

    .inner-circle span {
        font-size: 1.25rem;
    }

    .science-options button {
        font-size: 0.75rem;
    }

    .tech-overlay {
        top: 28%;
    }

    .tech-result-overlay {
        top: 23%;
    }


    .math-overlay {
        top: 25%;
    }

    .math-result-overlay {
        top: 25%;
    }

    .result-overlay {
        top: 27%;
    }

    .result-content h3 {
        font-size: 2rem;
    }

    .result-each {
        gap: 14px 50px;
        padding-left: 80px;
    }

    .result-each img {
        width: 15px;
    }

    .result-each p {
        font-size: .9rem;
    }

    .result-total {
        font-size: 1rem;
        margin-top: 15px;
        padding-left: 80px;
    }

    .result-content button {
        font-size: .8rem;
        margin-top: 50px;
    }
}

@media (min-width: 640px) /* 800 */ {
    .about-overlay h2 {
        font-size: 1.2rem;
    }

    .about-overlay p {
        font-size: .8rem;
    }

    .science-overlay {
        top: 30%;
    }

    .science-result-overlay {
        top: 25%;
    }

    .tech-overlay {
        top: 30%;
    }

    .tech-result-overlay {
        top: 25%;
    }

    .history-overlay {
        top: 25%;
    }

    .history-result-overlay {
        top: 25%;
    }

    .math-overlay {
        top: 28%;
    }

    .math-result-overlay {
        top: 28%;
    }

    .result-overlay {
        top: 29%;
    }

    .result-content {
        margin-top: 45px;
    }

    .result-content button {
        margin-top: 60px;
    }
}

@media (min-width: 768px) /* 432 */ {
    header {
        background-size: 100% 100%;
        height: 100vh;
    }

    .nav-bar {
        justify-content: end;
        padding: 20px 40px;
    }

    h1 {
        align-items: end;
        font-size: 3rem;
        margin-right: 6rem;
    }

    .quest-paths {
        background-size: 100% 100%;
        height: 100vh;
        margin-top: -.1rem;
    }

    .about-overlay {
        top: 50%;
        left: 50%;
        width: 90%;
        height: 70%;
    }

    .about-overlay h2 {
        font-size: 2.5rem;
    }

    .about-overlay p {
        font-size: 1rem;
        padding: 10px 30px;
    }

    .science-overlay {
        top: 50%;
        left: 50%;
        width: 70%;
        max-width: 70vw;
    }

    .science-result-overlay {
        top: 50%;
        width: 70%;
        max-width: 70vw;
    }

    .progress-circle-cont {
        width: 90px;
        height: 90px;
    }

    .inner-circle span {
        font-size: 1.3rem;
    }

    .science-options {
        gap: 0 80px;
        margin-top: 20px;
    }

    .science-options button {
        font-size: .85rem;
    }

    .tech-overlay {
        top: 50%;
        width: 70%;
        max-width: 70vw;
    }

    .tech-result-overlay {
        top: 45%;
        width: 70%;
        max-width: 70vw;
    }

    .history-overlay {
        top: 50%;
        width: 80%;
    }

    .history-result-overlay {
        top: 50%;
        width: 80%;
    }

    .math-overlay {
        top: 50%;
        width: 80%;
    }

    .math-result-overlay {
        top: 50%;
        width: 80%;
    }

    .result-overlay {
        top: 50%;
        width: 75%;
    }

    .result-content {
        margin-top: 30px;
    }

    .result-content h3 {
        font-size: 2.3rem;
    }

    .result-each {
        gap: 16px 60px;
    }

    .result-each img {
        width: 18px;
    }

    .result-total {
        font-size: 1.25rem;
        margin-top: 18px;
        padding-left: 70px;
    }

    .result-content button {
        font-size: .875rem;
        margin-top: 50px;
    }

    footer {
        bottom: 30px;
    }

    footer p {
        font-size: 1rem;
    }
}


@media (min-width: 1200px) /* 675 */ {
    h1  {
        font-size: 5rem;
        margin-right: 8rem;
    }

    .nav-bar {
        padding: 30px 50px;
    }

    .nav-links a {
        font-size: 1.25rem;
    }




    .about-overlay h2 {
        font-size: 4rem;
        padding-bottom: 20px;
    }

    .about-overlay p {
        font-size: 1.5rem;
        padding: 20px 50px;
        padding-bottom: 0;
    }

    .progress-circle-cont {
        width: 130px;
        height: 130px;
    }

    .inner-circle span {
        font-size: 2rem;
    }

    .science-options {
        gap: 0 120px;
        margin-top: 30px;
    }

    .science-options button {
        font-size: 1.5rem;
    }


    .history-overlay {
        top: 50%;
    }

    .result-overlay {
        width: 70%;
    }

    .result-content {
        margin-top: 50px;
    }

    .result-content h3 {
        font-size: 3.25rem;
        margin-bottom: 15px;
    }

    .result-each {
        gap: 23px 130px;
        padding-left: 100px;
    }

    .result-each img {
        width: 25px;
    }

    .result-each p {
        font-size: 1.25rem;
    }

    .result-total {
        font-size: 1.5rem;
        margin-top: 25px;
        padding-left: 150px;
    }

    .result-content button {
        font-size: 1.175rem;
        margin-top: 90px;
    }

    footer {
        bottom: 80px;
    }
}

@media (min-width: 1400px) /* 787 */ {
    .nav-bar {
        padding-right: 60px;
    }

    h1 {
        font-size: 7rem;
    }

    .about-overlay h2 {
        font-size: 4.3rem;
    }

    .about-overlay p {
        font-size: 1.7rem;
    }

    .progress-circle-cont {
        width: 150px;
        height: 150px;
    }

    .inner-circle span {
        font-size: 2.5rem;
    }

    .science-options {
        gap: 0 150px;
        margin-top: 40px;
    }

    .science-options button {
        font-size: 1.8rem;
    }


    .result-content {
        margin-top: 70px;
    }

    .result-content h3 {
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .result-each {
        gap: 23px 130px;
        padding-left: 130px;
    }

    .result-each img {
        width: 30px;
        margin-right: 10px;
    }

    .result-each p {
        font-size: 1.5rem;
    }

    .result-total {
        font-size: 1.8rem;
        margin-top: 25px;
        padding-left: 190px;
    }

    .result-content button {
        font-size: 1.5rem;
        margin-top: 90px;
    }

    footer {
        bottom: 100px;
    }
}

@media (min-width: 1600px) /* 900 */ {



    .result-content {
        margin-top: 70px;
    }

    .result-content h3 {
        font-size: 4.5rem;
    }

    .result-each {
        gap: 30px 180px;
        padding-left: 170px;
    }

    .result-each img {
        width: 35px;
        margin-right: 15px;
    }

    .result-each p {
        font-size: 1.7rem;
    }

    .result-total {
        font-size: 2.25rem;
        margin-top: 35px;
        padding-left: 250px;
    }

    .result-content button {
        font-size: 1.675rem;
        margin-top: 100px;
    }

    footer {
        bottom: 120px;
    }
}

@media (min-width: 1900px) {

    .paths ul li {
        width: 100%;
    }

    .paths ul li a {
        width: 80%;
    }

    .about-overlay h2 {
        font-size: 5rem;
    }

    .about-overlay p {
        font-size: 2rem;
        padding: 40px 80px;
        padding-bottom: 0;
    }

    .progress-circle-cont {
        width: 200px;
        height: 200px;
    }

    .inner-circle span {
        font-size: 3.5rem;
    }

    .science-options {
        gap: 0 200px;
        margin-top: 50px;
    }

    .science-options button {
        font-size: 2.5rem;
    }




    .result-content {
        margin-top: 80px;
    }

    .result-content h3 {
        font-size: 5.5rem;
        margin-bottom: 25px;
    }

    .result-each {
        gap: 40px 200px;
        padding-left: 180px;
    }

    .result-each img {
        width: 40px;
        margin-right: 20px;
    }

    .result-each p {
        font-size: 2rem;
    }

    .result-total {
        font-size: 2.8rem;
        margin-top: 40px;
        padding-left: 270px;
    }

    .result-content button {
        font-size: 1.8rem;
        margin-top: 110px;
    }

    footer {
        bottom: 150px;
    }
}