:root {
  --math_azure_dark: #113d7a;
  --math_azure_mid: #2b86ba;
  --math_azure_light: #58c3ea;
  --math_azure_gold: #fcde4b;
  --math_azure_red: #ff6943;
  --math_azure_green: #45bb30;
  --math_white: #f2fcff;
  --math_grey: #cfd5d6;
  --math_black: #2c2d2e;
  --math_glass: #cfd5d648;
  --math_glass_shadow: #4041413a;
}

body {
  background-image: url("./assets/Mathematica_2_0.png");
  height: 100vh;
  width: 100vw;
  color: var(--math_black);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  user-select: none; /* Prevents text selection while dragging */
}

header {
  background-color: var(--math_white);
  border-bottom: 7px solid var(--math_black);
}
h1 {
  font-size: 5svb;
  padding: 2rem;
  padding-bottom: 0.7rem;
}

header p {
  font-family: monospace;
}

button {
  margin-top: 3rem;
  padding: 1em;
  border: none;
  background-color: var(--math_white);
  font-weight: 500;
  font-size: 23px;
  box-shadow: 10px 3px var(--math_black);
  transition: 0.5s ease-in-out;
}

p {
  font-size: 18px;
}

form {
  font-size: 26px;
  font-weight: 900;
}

a {
  color: var(--math_azure_light);
}

th,
td {
  font-family: monospace;
  color: var(--math_white);
}

/* ------- Sketch Window ---------------- */
.window {
  position: absolute;
  top: 80svh;
  right: -10svw;
  transform: translate(-50%, -50%); /* Centers the window initially */
  width: 350px;
  height: 450px;
  background-color: #ffffff82;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none; /* Prevents default browser actions like zooming */
  z-index: 1000;
}

.hidden {
  display: none;
}

.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--math_azure_gold);
  border-bottom: 1px solid #ddd;
  cursor: move;
}

.window-title {
  font-weight: bold;
}

.close-button {
  font-size: 1.5em;
  cursor: pointer;
}

#drawing-canvas {
  flex-grow: 1; /* Makes the canvas fill the remaining space */
  background-color: #f9f9f9;
  cursor: crosshair;
  touch-action: none;
}

.recordBox {
  position: fixed;
  right: -6.2rem;
  bottom: -10rem;
  width: 500px;
}

#rec_arm {
  position: relative;
  z-index: 1;
  bottom: -14rem;
  /* right: -110%; */
  /* scale: 60%; */
  cursor: pointer;
  /* transform: scaleX(-1); */
  rotate: -110deg;
  transition: 0.1s linear;
}
.rec {
  z-index: -1;
  position: static;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}

.resultTable th {
  color: var(--math_black);
}

footer {
  bottom: 30px;
  padding-top: 2rem;
  padding-bottom: 1rem;
  position: static;
  background-color: var(--math_black);
  color: var(--math_white);
}

.card-body {
  display: flex;
  justify-content: center;
  padding-top: 0;
}

#startBtn {
  border-radius: 50%;
  height: 200px;
  width: 200px;
  margin-top: 7rem;
  margin-bottom: 13rem;
}
#param_box {
  display: flex;
  justify-content: center;
}
#paramsForm {
  background-color: var(--math_black);
  color: var(--math_white);
  width: 390px;
  padding: 3rem;
}

#quizForm,
#savePlayer {
  border: 5px solid black;
  background-color: var(--math_grey);
  padding: 2rem;
  padding-top: 1rem;
  border-radius: 8px;
  box-shadow: 12px 12px black;
  margin-bottom: 5rem;
}

.score_box {
  background-color: var(--math_black);
  color: var(--math_white);
  width: 100vw;
  margin: 0;
  padding: 3rem;
}

#quiz {
  font-size: 56px;
}
#ansLabel {
  padding: 1rem;
  padding-top: 0;
  padding-left: 2em;
  padding-right: 2em;
  font-size: 56px;
}
#answer,
#playerInitials {
  padding: 0.5rem;
  /* border: 1px solid white; */
  background-color: black;
  color: var(--math_white);
  border-radius: 12px;
  font-size: 46px;
  font-weight: 600;
  text-align: center;
  width: 250px;
  height: 75px;
}
#initialsLabel {
  padding: 1rem;
  padding-top: 0;
  font-size: 28px;
}
#timerText {
  font-size: 28px;
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 1;
}

#resultText1 {
  font-weight: 600;
  font-size: 77px;
}
#resultText2 {
  color: #24a305;
  font-weight: 600;
  font-size: 27px;
}

#correctAns {
  color: #24a305;
  font-size: 28px;
}

#wrongAns {
  color: #fd251d;
  font-size: 28px;
}

.minorBtn,
#startTest {
  /* padding: 2rem; */
  margin-top: 1em;
  font-size: 20px;
  font-weight: 600;
  border-radius: none;
  box-shadow: 10px 12px var(--math_black);
  height: auto;
  width: auto;
}

#startTest {
  background-color: #8fd853;
  font-weight: 500;
  box-shadow: 14px 9px black;
}

.numPad {
  margin: 5px;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 20px;
  font-weight: 600;
  box-shadow: none;
  border: 2px solid black;
}

.numPad:hover {
  background-color: #ffe100;
  box-shadow: none;
}

#numPadDel {
  padding-left: 4.25rem;
  padding-right: 4.25rem;
}

#numPadDel:hover {
  background-color: #fd461d;
}
#resetBtn,
#open-window-btn {
  background-color: #fd461d;
  color: black;
  padding: 1rem;
  float: right;
  right: 30px;
  font-weight: 500;
  box-shadow: 14px 9px black;
  z-index: 2;
  position: fixed;
}

#open-window-btn {
  background-color: var(--math_azure_gold);
  top: 250px;
}

#startTest {
  margin-top: 3rem;
}

#next3,
#next4 {
  background-color: var(--math_azure_light);
  width: 15rem;
  margin-bottom: 1rem;
}

#next3 {
  box-shadow: none;
  border: 2px solid black;
}
/* BOOTSTRAP customizing-------------------- */
.btn-radio-green {
  border: 1px solid var(--math_azure_green);
  color: var(--math_azure_green);
  margin-right: 0.5rem;
  border-radius: 5px;
  padding: 1rem;
  border-radius: 5px;
}

.btn-radio-yellow {
  border: 1px solid var(--math_azure_gold);
  color: var(--math_azure_gold);
  margin-right: 0.5rem;
  font-size: 18px;
  padding: 1rem;
  border-radius: 5px;
}

.btn-radio-red {
  border: 1px solid var(--math_azure_red);
  color: var(--math_azure_red);
  /* margin-right: 5px; */
  border-radius: 5px;
  font-size: 18px;
  padding: 1rem;
}

.btn-radio-blue {
  border: 1px solid var(--math_azure_light);
  color: var(--math_azure_light);
  margin-right: 0.5rem;
  border-radius: 5px;
  font-size: 16px;
  padding: 0.7rem;
}

/* Define checked state for custom buttons */
.btn-check:checked + .btn-radio-green {
  background-color: var(--math_azure_green);
  color: black;
  border: 1px solid var(--math_azure_green);
}

.btn-check:checked + .btn-radio-yellow {
  background-color: var(--math_azure_gold);
  color: black;
  border: 1px solid var(--math_azure_gold);
}

.btn-check:checked + .btn-radio-red {
  background-color: var(--math_azure_red);
  color: black;
  border: 1px solid var(--math_azure_red);
}
.btn-check:checked + .btn-radio-blue {
  background-color: var(--math_azure_light);
  color: black;
  border: 1px solid var(--math_azure_light);
}
/* Events---------------------------------- */
button:hover {
  cursor: pointer;
  box-shadow: 6px 8px var(--math_black);
}

#startTest:hover,
#resetBtn:hover {
  box-shadow: -14px 9px black;
  font-weight: 700;
  color: black;
  background-color: var(--math_azure_light);
}

a:hover {
  color: lightskyblue;
}

a:focus {
  color: lightskyblue;
}

#next3:hover {
  background-color: #ffe100;
  box-shadow: none;
}

.rec:hover {
  transform: scale(1.1) rotate(15deg);
}

.btn-radio-green:hover {
  background-color: var(--math_azure_green);
}
.btn-radio-yellow:hover {
  background-color: var(--math_azure_gold);
}
.btn-radio-red:hover {
  background-color: var(--math_azure_red);
}

.btn-radio-blue:hover {
  background-color: var(--math_azure_light);
}

/* This clicked class will be added/removed in script.js when the record is clicked. */
.clicked {
  animation: rotation 3s infinite linear;
}

.arm_click {
  animation: 3s linear 1s infinite running slide-in;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*  if using this app at school or on small screens, the record player will get in the way and teachers won't want multiple devices playing music in classs. This will hide the record player on tablets (horizontal and vertical) and mobile. */
.recordBox {
  display: none;
}
@media (max-width: 1200px) {
  .recordBox {
    display: none;
  }
  .window {
    top: 60%;
    left: 18%;
  }
}