.clock {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 200ms;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}
.buttonContainer {
    position: absolute;
    z-index: 5;
    bottom: 3%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    width: 96%;
    height: 46%;
    left: 2%;
}
.questionsAnswers {
    position: absolute;
    top: 0vh;
    z-index: 5;
    left: 50%;
    width: 75%;
    height: 100%;
    translate: -50%;
}

/* Remove blue selection square on mobile */
input, textarea, button, select, a {
    -webkit-tap-highlight-color: transparent;
}

.recallButton {
    --border-radius: 42px;
    --resting-pos: -6px;
    --pressed-pos: 3px;
    --popped-pos: -10px;
    
    background: transparent;
    border: none;
    position: relative;
    outline: none;
    border-radius: var(--border-radius);
    margin: 20px 15px;
    transition: filter 150ms;
}
.recallButtonText {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E7ECEF;
    text-align: center;
    font-family: 'Sl-Open-Sans', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    transform: translateY(var(--resting-pos));
    border-radius: var(--border-radius);
    padding: 0 6%;
}

.recallButtonGraphic {
    outline: none;
    cursor: pointer;
    border: 0;
    border-radius: var(--border-radius);
    /* box-shadow: 0 9px 0px #305caa, 0 30px 45px #000000ab; */
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px 25px;
    cursor: pointer;
    
    /* background: linear-gradient(to bottom, #80a6d7, #6e97d0); */
    transition: transform 100ms, box-shadow 100ms, filter 300ms;
    /* transition: all 2s; */
    /* filter: saturate(0.9); */
    /* border: #ffffff1c 1px outset; */
    /* background: #6ba0f5; */
    /* border-bottom: 5px solid #8eafe7; */
    /* border-bottom-style: groove; */
    transform: translateY(var(--resting-pos));
    /* background: linear-gradient(180deg, rgb(164 202 255) 0%, rgba(138, 170, 216, 1) 2%, rgba(111, 150, 204, 1) 100%); */
    filter: blur(0.8px);
    box-shadow: inset 0 0 8px 0px var(--ridge-color), 0 9px 0px var(--small-shadow-color), 0 14px 10px #00000073, 0 49px 17px var(--big-shadow-color);
}

.clickable.recallButton:active .recallButtonGraphic,
.buttonDown  .recallButtonGraphic
{
    animation: buttonPress 34ms ease-in-out 0s 1 forwards;
}
.clickable.recallButton:hover .recallButtonGraphic, .buttonDown .recallButtonGraphic, .buttonHighlight .recallButtonGraphic, .wasClicked:hover .recallButtonGraphic {
    filter: blur(.8px) saturate(1.5);
}
.clickable.recallButton:active .recallButtonText,
.buttonDown  .recallButtonText
{
    animation: buttonPressText 34ms ease-in-out 0s 1 forwards;
}
.recallButton.dark {
    /*opacity: 0.5;*/
    filter: blur(2px) brightness(0.6);
}

/* Adds noise texture */
/*
https://css-tricks.com/grainy-gradients/
https://stackoverflow.com/questions/4011113/can-you-add-noise-to-a-css-gradient
https://stackoverflow.com/questions/27866812/make-css-of-gradient-from-image-style/49111298#49111298
https://jsfiddle.net/NuRwW/1/
https://jsfiddle.net/PetrHaluza/jre3dxhq/
https://grainy-gradients.vercel.app/noise.svg
https://codepen.io/DavidJAldred/pen/pVbQBJ
*/

.recallButtonGraphic:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /*
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'> <filter id='noise' x='0' y='0'> <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/> <feBlend mode='screen'/> </filter> <rect width='500' height='500' filter='url(%23noise)' opacity='0.5'/></svg>");
    */
    mix-blend-mode: color-dodge;
    top: var(--resting-pos);
    left: 0;
    border-radius: var(--border-radius);
    opacity: 1;
    mix-blend-mode: color-burn;
    border-top: 17px solid transparent;
    filter: blur(0.4px);
}
.hq .recallButtonGraphic:before {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'> <filter id='noise' x='0' y='0'> <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/> <feBlend mode='screen'/> </filter> <rect width='500' height='500' filter='url(%23noise)' opacity='0.5'/></svg>");
}
.clickable.recallButton:active .recallButtonGraphic:before,
.buttonDown .recallButtonGraphic:before {
    animation: buttonPressNoise 34ms ease-in-out 0s 1 forwards;
}
@keyframes buttonPressNoise {
  100% {
    border-top: 14px solid transparent;
  }
}
.reactivate .recallButtonGraphic:before {
    animation: reactivateAnimNoise 100ms linear 0ms 1 forwards;
}

@keyframes reactivateAnimNoise {
  90% {
    border-top: 22px solid transparent;
  }
}

@keyframes buttonPress {
  100% {
    transform: translateY(var(--pressed-pos));
    box-shadow: inset 0 0 8px 0px var(--ridge-color), 0 2px 0px var(--small-shadow-color), 0 2px 10px #000000ff, 0 21px 17px var(--big-shadow-color);
  }
}
@keyframes buttonPressText {
  100% {
    transform: translateY(var(--pressed-pos));
  }
}

.reactivate .recallButtonGraphic {
    animation: reactivateAnim 100ms linear 0ms 1 forwards;
}
.reactivate .recallButtonText {
    animation: reactivateTextAnim 100ms linear 0ms 1 forwards;
}

@keyframes reactivateAnim {
  90% {
    transform: translateY(var(--popped-pos));
    box-shadow: inset 0 0 8px 0px var(--ridge-color), 0 13px 0px var(--small-shadow-color), 0 20px 10px #00000073, 0 60px 17px var(--big-shadow-color);
  }
}
@keyframes reactivateTextAnim {
  90% {
    transform: translateY(var(--popped-pos));
  }
}


.button1 {
    --ridge-color: #6d91cac7;
    --small-shadow-color: #305caa;
    --big-shadow-color: #0e19398a;
    background: linear-gradient(180deg, #a4caff 0%, #8aaad8 2%, #7ea4d6 9%, #77a0d3 50%, #6f96cc 100%);
    border-bottom: 4px ridge #97b6ee;
    border-top: 5px solid #b0c7eb;
}
.button2 {
    --ridge-color: #4c9fa1c7;
    --small-shadow-color: #026f76;
    --big-shadow-color: #0021288a;
    background: linear-gradient(180deg, #85d7d6 0%, #6fb5b5 2%, #61b1ae 9%, #5aada9 50%, #50a3a2 100%);
    border-bottom: 4px ridge #76c4c9;
    border-top: 5px solid #9bd0d1;
}
.button3 {
    --ridge-color: #c88069c7;
    --small-shadow-color: #a44726;
    --big-shadow-color: #3214038a;
    background: linear-gradient(180deg, #ffb8a5 0%, #d89b8a 2%, #d89281 9%, #d68c7c 50%, #cd8370 100%);
    border-bottom: 4px ridge #e9a78f;
    border-top: 5px solid #eabcae;
}
.button4 {
    --ridge-color: #a181cfc7;
    --small-shadow-color: #7647af;
    --big-shadow-color: #2811378a;
    background: linear-gradient(180deg, #d6baff 0%, #b59dde 2%, #ae95de 9%, #a990dc 50%, #a286d3 100%);
    border-bottom: 4px ridge #c9a7f1;
    border-top: 5px solid #d1bdee;
}
.buttonCorrect .recallButtonGraphic {
    --ridge-color: #4ea372c7;
    --small-shadow-color: #037537;
    --big-shadow-color: #0024118a;
    background: linear-gradient(180deg, #8adaa9 0%, #73b88e 2%, #66b383 9%, #60b07c 50%, #54a774 100%);
    border-bottom: 4px ridge #77c89c;
    border-top: 5px solid #9dd2b3;
}
.buttonIncorrect .recallButtonGraphic {
    --ridge-color: #9c5c5fc7;
    --small-shadow-color: #843032;
    --big-shadow-color: #2a0c098a;
    background: linear-gradient(180deg, #bf868c 0%, #a77175 2%, #a76a70 9%, #a5666d 50%, #9f5f65 100%);
    border-bottom: 4px ridge #b6797b;
    border-top: 5px solid #b38a8d;
}
    


.recallQuestion {
    position: absolute;
    z-index: 5;
    box-shadow: 5px 2px 16px 0px #000;
    background: #EDF2F4;
    color: #010101;
    border-radius: 10px;
    border-top: none;
    font-family: 'Sl-Open-Sans', sans-serif;
    font-size: 2.5rem;
    transition: top 300ms, opacity 200ms;
    top: 5%;
    height: 33%;
    width: 96%;
    left: 2%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1vw;
    box-sizing: border-box;
    background: radial-gradient(circle, rgba(69,121,197,1) 0%, rgba(48,110,195,1) 50%, rgba(12,72,160,1) 100%);
    color: white;
    border-radius: 45px;
    /* border: 7px solid #00000073; */
    box-shadow: 1px 1px black, 0px 0px 14px black inset, 0px 7px 14px 0px #001933d9;
    text-shadow: 0px 0px 2.5px #ffffffdd;
    font-weight: bold;
    padding: 4vh 5vw;
    filter: blur(0.5px);
    /* These should get overwritten with random numbers in JS. */
    --background-offset-x1: 10px;
    --background-offset-x2: -15px;
    --background-offset-y1: 23px;
    --background-offset-y2: -19px;
}
.recallQuestion:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 98%;
    background:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'> <filter id='noise' x='0' y='0' width='100%' height='100%'> <feTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='3' stitchTiles='stitch' seed='684'/> </filter>  <rect x='0' y='0' width='1024' height='1024' style='filter: url(%23noise); transform: translate(0px, 0);' /></svg> "),
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'> <filter id='noise' x='0' y='0' width='100%' height='100%'> <feTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='3' stitchTiles='stitch' seed='4892'/> </filter>  <rect x='0' y='0' width='1024' height='1024' style='filter: url(%23noise); transform: translate(0px, 0);' /></svg> ")
    ;
    
    left: 0;
    top: 1%;
    opacity: 0.32;
    /*opacity: 1;*/
    
    mix-blend-mode: soft-light;
    filter: blur(3px) saturate(0);
    
    /* interesting too */
    /*
    mix-blend-mode: color-burn;
    opacity: 0.22;
    */
    
    /* for water effect */
    /*
    mix-blend-mode: luminosity;
    filter: blur(3px) saturate(100);*/ /* or 1000 for sharper image */
    
    
    border-radius: 45px;
    --background-size: 3072px;
    background-size: var(--background-size);
    
    background-position-x: var(--background-offset-x1), var(--background-offset-x2);
    background-position-y: var(--background-offset-y1), var(--background-offset-y2);
    /*animation: moveBackground 600s linear infinite;*/
    
}
.hq .recallQuestion:before {
    animation: moveBackground 600s linear infinite;
}
@keyframes moveBackground {
  from {
    background-position-x: var(--background-offset-x1), var(--background-offset-x2);
    background-position-y: var(--background-offset-y1), var(--background-offset-y2);
  }
  to {
    background-position-x: calc(var(--background-size) * 5 + var(--background-offset-x1)), calc(var(--background-size) * -8 + var(--background-offset-x2));
    background-position-y: calc(var(--background-size) * 6 + var(--background-offset-y1)), calc(var(--background-size) * -4 + var(--background-offset-y2));
  }
}

.incorrectFeedback {
    animation: shake 0.15s ease-in-out 0s 2;
}
@keyframes shake {
  0% {
    transform: translateX(0vw);
  }
  25% {
    transform: translateX(0.5vw);
  }
  75% {
    transform: translateX(-0.5vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

.starHolder {
    margin: 2vh 0;
    overflow: hidden; /* Hide both scrollbars initially */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Explicitly disable horizontal scrolling */
    height: 70%;
}
.score-holder {
    font-family: 'Sl-Open-Sans', sans-serif;
    font-size: 2.5em;
    color: white;
    font-weight: bold;
    position: absolute;
    bottom: 1vh;
    padding: 5px;
}
.score-num {
    padding-left: 7px;
}
.starIcon {
    margin-bottom: -2px;
}
.strikeContainer {
    top: 1vh;
    left: 1vw;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 0;
    width: 125px;
    z-index: 20;
    margin: 0 auto;
}
.starContainer {
    top: 1vh;
    left: 1vw;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 0;
    max-width: 300px;
    z-index: 20;
    margin: 0 auto;
}
.spin {
  animation: spin 0.5s;
}
@keyframes spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

.smallStar {
    scale: 0;
    opacity: 0;
}
.grow {
  animation: growEffect 0.5s forwards;
}
@keyframes growEffect {
  0% {
    scale: 0;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}




.mark {
    width: 30px; /* Adjust size as needed */
    height: 30px;
    border-radius: 50%; /* Makes them circular */
    display: inline-block; /* Allows them to sit side-by-side if you want */
    box-sizing: border-box; /* Ensures padding and border don't increase total size */
}
.mark.incorrect {
    background-color: #e74c3c; /* A nice red */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    background-image: radial-gradient(circle at top center, #f07b7b 0%, #e74c3c 70%); /* Highlight effect */
    border: 2px solid #c0392b; /* Optional: slightly darker border */
}
.mark.correct {
    background-color: #2ecc71; /* A nice green */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    background-image: radial-gradient(circle at top center, #66e0a1 0%, #2ecc71 70%); /* Highlight effect */
    border: 2px solid #27ae60; /* Optional: slightly darker border */
}
.mark.black {
    background-color: #333; /* A dark grey */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Deeper shadow for depth */
    background-image: radial-gradient(circle at top center, #444 0%, #333 70%); /* Subtle highlight effect */
    border: 2px solid #222; /* Optional: slightly darker border */
}
.timer-bar {
    --timer-speed: 0;
    --timer-color: white;
    width: 100vw;
    height: max(0.5vh, 4px);
    background: var(--timer-color);
    box-shadow: 0px 0px 8px 0px var(--timer-color);
    transform: translateX(0);
    border-radius: 0.25vh;
    position: absolute;
    top: 0px;
}
.warning-bar {
    animation: glowingBar 300ms ease infinite alternate;
}

@keyframes glowingBar {
  from {
    box-shadow: 0px 0px 8px 0px var(--timer-color);
  }
  to {
    box-shadow: 0px 0px 8px 2px var(--timer-color);
  }
}


.timer-num {
    font-family: 'Sl-Open-Sans', sans-serif;
    position: relative;
    margin: 1px;
    font-size: 2.5em;
    top: 1.5vh;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
    
    font-size: 4rem;
    left: 50%;
    top: -5px;
    translate: -50%;
}
.countdown {
    animation: zoomin 300ms ease forwards;
}

@keyframes zoomin {
  from {
    transform: scale(3.5);
    opacity: 0;
    filter: blur(3px);
  }
  to {
    transform: scale(1);
    opacity: 1;
    filter: blur(0.1px);
  }
}
.mainBody {
    flex: 3;
    /*width: 75%; /* Takes 75% of the page width */
    position: relative;
}
 
.side-container {
    /*width: 25%;*/
    flex: 1;
    position: relative;
}
.side-panel {
    position: relative;
    /*background-color: #3B4A5E;
    background-color: #2d2d2d;
    background-color: #4A5B70;
    background-color: #454F5B;*/
    background-color: #3B4A5E;
    height: 96%;
    width: 90%;
    top: 2%;
    left: 5%;
    padding: 20px;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    color: #ffffff;
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}
.levelText {
    font-family: 'Sl-Open-Sans', sans-serif;
    font-size: 2em;
    position: absolute;
    bottom: 1vh;
    /*left: 50%;
    translate: -50%;*/
    font-weight: bold;
}
.right-aligned {
    text-align: right;
    right: 1.25vw;
}


.recallContainer {
    display: flex;
    height: calc(100vh - 80px);
}
.star {
    width: 15%;
    height: 15%;
}
.splitTable .star {
    height: 20px;
}
.splitTable .starContainer {
    padding: 5px 0px;
}
.splitTable td {
    vertical-align: top;
}
table {
    width: 100%;
    background-color: transparent;
}
.manName {
    font-family: 'Sl-Open-Sans', sans-serif;
    margin: 1px;
    font-size: 1.5em;
    top: 1.5vh;
    font-weight: bold;
    color: white;
    text-align: center;
}

@media (aspect-ratio <= 5/4) {
    .recallContainer {
        display: block;
    }
    .mainBody {
        height: 90vh;
    }
    body {
        overflow-y: auto;
    }
}