* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background:
      url(../assets/images/bg-pattern-bottom-desktop.svg) bottom right no-repeat fixed,
      url(../assets/images/bg-pattern-top-desktop.svg) left top no-repeat fixed;
  }

:root {
  /* Color Palette */
  --compGold: #b8860b;
  --compRed: #b22222;
  --compWhite: #fdf5e6;
  --compYellow: #eee8aa;
  --compBlack: rgb(43, 11, 14);
  /* Typography */
  --times: Times, "Times New Roman", Georgia, serif;
  --san-serif: Geneva, Tahoma, Helvetica, Arial, sans-serif;
  --serif: "Hoefler Text", Baskerville, Lucida, "Palatino Linotype", "URW Palladio", serif;
}

.text-shadow {
  text-shadow: 2px 4px 2px var(--compBlack);
}
.gold-text-shadow {
  text-shadow: 2px 4px 2px var(--compGold);
}
.red-text-shadow {
  text-shadow: 2px 4px 2px var(--compRed);
}
.white-text-shadow {
  text-shadow: 2px 4px 2px var(--compWhite);
}
.box-glow {
  box-shadow: 4px 4px 16px var(--compYellow);
}
.box-shadow {
  box-shadow: 4px 4px 16px var(--compBlack);
}
.Tgold {
  background-color: var(--compGold);
}
.Tred {
  background-color: var(--compRed);
}
.Tyellow {
  background-color: var(--compYellow);
}
.Twhite {
  background-color: var(--compWhite);
}
.Tblack {
  background-color: var(--compBlack);
}
.Times {
  font-family: var(--times);
}
.Sans {
  font-family: var(--san-serif);
}
.Serif {
  font-family: var(--serif);
}
.myBorder {
  border: 5px solid var(--compWhite) ;
}
.logo {
  border-radius: 50%;
  max-height: 15%;
  max-width: 15%;
}
/* Hidden Menu */
.top-label[for="toggle"] {
  font-size: 2rem;
  color: var(--compWhite);
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 1200;
  cursor: pointer;
}
/* hidden checkbox */
input[type="button"] {
  position: absolute;
  top: -100px;
}
#hidden-nav {
  background-color: rgba(255,255,255, 0.8);
  color: var(--compBlack);
  background-image:
    linear-gradient(45deg, rgba(0,0,0, 33%),
                    rgba(204,204,204, 66%));
  width: 375px;
  max-height: fit-content;
  padding: 0 18px;
  overflow: auto;
  position: fixed;
  top: 0;
  right: -370px;
  z-index: 1000;
  overflow: auto;
  transition: 0.6s all;
}
input[type=checkbox]:checked + #hidden-nav {
  right: 0.5px;
}
checkbox:hover,
#answer1:hover,
#answer2:hover,
#answer3:hover,
#answer4:hover {
  cursor: pointer;
  color: ghostwhite;
  background-color: grey;
  text-decoration: underline;
}
#user-name {
  max-width: fit-content;
}
#Timer {
  font-size: 0.875rem;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
}