:root[data-theme="dark"] {
  --switch-bg: #0f0f12; 
  --axe-image: ./assets/axe.png;
  --back-card-image: ./assets/back-card.png;
  --candlestick-image: ./assets/candlestick.png;
  --cleaver-image: ./assets/cleaver.png;
  --hammer-image: ./assets/hammer.png;
  --hex-image: ./assets/hex.png;
  --knife-image: ./assets/knife.png;
  --lead-pipe-image: ./assets/lead-pipe.png;
  --logo-image: ./assets/logo.png;
  --poison-image: ./assets/poison.png;
  --revolver-image: ./assets/revolver.png;
  --rope-image: ./assets/rope.png;
  --saw-image: ./assets/saw.png;
  --syringe-image: ./assets/syringe.png;
  --font-family: "Jersey 10", sans-serif;
  --msg-color: rgb(159, 42, 62);
}
:root[data-theme="light"] {
  --switch-bg: pink;
  --axe-image: ./assets/axe-decoy.png;
  --back-card-image: ./assets/back-card-decoy.png;
  --candlestick-image: ./assets/candlestick-decoy.png;
  --cleaver-image: ./assets/cleaver-decoy.png;
  --hammer-image: ./assets/hammer-decoy.png;
  --hex-image: ./assets/hex-decoy.png;
  --knife-image: ./assets/knife-decoy.png;
  --lead-pipe-image: ./assets/lead-pipe-decoy.png;
  --logo-image: ./assets/logo-decoy.png;
  --poison-image: ./assets/poison-decoy.png;
  --revolver-image: ./assets/revolver-decoy.png;
  --rope-image: ./assets/rope-decoy.png;
  --saw-image: ./assets/saw-decoy.png;
  --syringe-image: ./assets/syringe-decoy.png;
  --font-family: "Quicksand", sans-serif;
  --msg-color: rgb(164, 83, 127);
}

:root {
  --default-transition: color 0.3s ease-in-out,
    background-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
    fill 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.card-container {
  perspective: 1000px; 
}

.card {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  width: 6rem; 
  height: 8.4rem; 
  margin: 0.6rem; 
  border-radius: 10px; 
}

.card:hover {
  box-shadow: 10px 10px 10px rgb(218, 214, 214);
  transform: scale(1.1);
  cursor: pointer;
}

.card.rotate {
  transform: rotateY(180deg);
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%; 
  height: 100%; 
  border-radius: 10px; 
  background: #efe;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(180deg);
}

.card-game {
  display: grid;
  grid-template-rows: repeat(4, 1fr); 
  grid-template-columns: repeat(6, 1fr); 
  margin-bottom: 0;
}

body {
  background-color: var(--switch-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  margin-bottom: 4.2rem; 
}

.header-logo {
  content: var(--logo-image);
  height: 21rem; 
}

header {
  padding-top: 0.6rem;
  display: flex;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cartoon-bear {
  height: 15rem; 
  margin-bottom: 2.4rem; 
}

.bear-speech {
  display: flex;
}

.pink-bubble {
  height: 12rem; 
}

.play-button {
  font-size: 1.2rem; 
  background-color: rgb(131, 39, 173);
  color: aliceblue;
  border-radius: 6px; 
  padding: 0.6%; 
  margin: 3px; 
  border: 1px solid white;
  box-shadow: 10px 10px 10px rgb(218, 214, 214); 
  font-family: var(--font-family);
  cursor: pointer;
}

.continue-button {
  font-size: 2.4rem; 
  background-color: rgb(173, 39, 55);
  color: rgb(254, 254, 254);
  border-radius: 6px; 
  padding: 1.5%; 
  margin: 3px; 
  border: 1px solid white;
  box-shadow: 10px 10px 10px rgb(218, 214, 214);
  font-family: var(--font-family);
}

.play-button:hover, .continue-button:hover {
  transform: scale(1.1);
  cursor: pointer;
}

h1 {
  font-size: 3rem;
  color: var(--msg-color);
}

* {
  font-family: var(--font-family);
}

#timerDisplay {
  font-size: 3rem;
  color: white;
  margin-top: 0.6rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  grid-column: span 6;
}

.end-message {
  font-size: 3rem;
  color: white;
}

.welcome {
  font-size: 1.2rem;
  margin-right: 6rem; 
  margin-left: 6rem;
  color: var(--msg-color);
  font-weight: 800;
  margin-top: 0;
}

.bigMsg {
  font-size: 1.5rem;
  font-weight: 900;
  color: purple;
}