@import url(https://fonts.googleapis.com/css2?family=Happy+Monkey&family=Kavoon&family=Miltonian+Tattoo&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Rum+Raisin&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Mouse+Memoirs&family=Sniglet:wght@400;800&display=swap);

:root {
  --bash: #f4d430;
  --alpa: #f7e378;
  --bg: #010101;
  --kin: #133;
  --pita: #e00;
  --blok: #000;
  --text: #fff;
  --btn: #182d62;
  --harga: #008000;
  --opsi: #ff7f00;
  --abstrak: linear-gradient(135deg, #ffd099, #e5c2ad, #ccb5c1, #b3a7d4, #9999e8);
  --linear: linear-gradient(45deg, #f4d430, #000);
  --linear1: linear-gradient(135deg, #3e1d0a, #6c2604, #5c1817, #844205);
  --judul-font: "Kavoon", serif;
  --body1-font: "Nunito", serif;
  --body2-font: "Sniglet", serif;
  --harga-font: "Rum Raisin", serif;
  --mouse-font: "Mouse Memoirs", serif;
  --bonus: "Miltonian Tattoo", serif;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body1-font);
  background-color: var(--bg);
  color: var(--text);
  font-size: 1.4rem;
}


.game {
  padding: 0 1% 1rem;
}

.guess-game {
  text-align: center;
  display: fixed;
  }

 .guess-game #colorText {
  font-size: 80px;
  font-family: var(--body2-font);
  margin: 20px 0;
  font-weight: bold;
  text-shadow: 0 0 10px var(--bg);
  }
.guess-game button {
  padding: 10px 20px;
  font-size: 2rem;
  margin: 10px;
  font-family: var(--body2-font);
  border: 1px solid var(--blok);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  background-color: var(--opsi);
  font-weight: 100;
  user-select: none;
  height: 40px;
  }
.guess-game button:active {
  background-color: var(--pita);
  transform: translateY(3px);
  }
  
.guess-game #timer {
  font-size: 1.5rem;
  color: var(--pita);
  align-items: center;
  }
  
.guess-game #gameOver {
  font-family: var(--mouse-font);
  color: var(--blok);
  font-size: 2.5rem;
  margin-top: 20px;
  }

  


/* Suit game */
.suit-game h1, .rubik-game h1, .puzzle-game h1 {
  margin-bottom: 1rem;
  text-align: left;
  font-size: 3rem;
  margin-bottom: 3rem;
  font-family: var(--judul-font);
  font-style: italic;
  text-shadow: 0 0 5px #000;
}
.suit-game h1 span, .rubik-game h1 span, .puzzle-game h1 span {
  color: var(--bash);
}


.suit-game .choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 100%;
  margin: 10px auto;
  }
  
.suit-game .choices button {
  width: 35wh;
  height: 10vh;
  background-color: var(--bg);
  font-family: var(--body2-font);
  color: var(--bg);
  font-weight: bold;
  font-size: 7rem;
  border: 1px solid var(--bash);
  border-radius: 7px;
  box-shadow: 0 2rem var(--bash);
  margin: 2px;
  cursor: pointer;
  font-weight: 100;
  }
  
.suit-game .choices button:hover {
background-color: #000;
}
  
.suit-game .choices button:active {
background-color: var(--pita);
box-shadow: 0 5px var(--bash);
transform: translateY(2.5rem);
}

.suit-game .result {
margin-top: 30px;
font-size: 20px;
color: #fff;
text-align: center;
min-height: 50px;
}

.suit-game .result span {
color: var(--bash);
}

.suit-game .hasilnya {
font-size: 8rem;
}


/* Rubik 3x3 */
.rubik-game .rubik-container {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  max-width: 90vh;
  justify-content: center;
  }

.rubik-game .rubik-face {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  gap: 2px;
  max-width: fit-content;
  margin: auto;
  }

.rubik-game .rubik-cell {
  width: 100%;
  aspect-ratio: 1;
  background-color: #fff;
  border: 2px solid #000;
  }

.rubik-game .red { background-color: #e13; }
.rubik-game .blue { background-color: #12d; }
.rubik-game .green { background-color: green; }
.rubik-game .yellow { background-color: #fe5; }
.rubik-game .orange { background-color: #e72; }
.rubik-game .white { background-color: #eef; }

.rubik-game .controls {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 5px;
  justify-content: center;
  text-align: center;
  margin-top: 2px;
  }

.rubik-game .controls button {
  width: 10rem;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background: var(--linear1);
  box-shadow: 0 2px 4px #006;
  font-family: var(--body1-font);
  gap: 5px;
  color: var(--text);
  }

.rubik-game .extra-btn {
  justify-content: center;
  text-align: center;
  align-items: center;
}

.rubik-game .shufflebtn {
  width: 70%;
  padding: 10px;
  font-family: var(--body1-font);
  font-weight: bold;
  background: var(--abstrak);
  box-shadow: 0 2px 4px #000;
  }

.rubik-game .controls button:active, .rubik-game .shufflebtn:active {
  background: var(--pita);
  transform: translateY(5px);
  }

/* Puzzle game 4x4 */
.puzzle-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: auto;
  font-family: var(--judul-font);
  }

.puzzle-game .level {
  font-size: 20px;
  margin-bottom: 15px;
  font-family: var(--harga-font);
  font-style: italic;
  color: #fff;
  text-shadow: 0 0 5px #000;
  }

.puzzle-game .container {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, 85px);
  grid-gap: 2px;
  justify-content: center;
  margin: auto;
  background: ;
  padding: 2px;
  width: 100wh;
  height: auto;
  font-family: var(--body1-font);
  font-weight: bold;
  box-shadow: 0 0 5px #006;
  }

.puzzle-game .tile {
  height: 85px;
  margin: 0;
  background: var(--linear1);
  color: var(--text);
  text-shadow: 0 2px 5px black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  }

.puzzle-game .tile.empty {
  background: var(--alpa);
  cursor: default;
  }

.puzzle-game .level {
  font-size: 20px;
  margin: 10px 0;
  }

/* Quis Math */
.quiz-artikel {
  padding: 2rem 4% 0;
}

.quiz-artikel img {
  display: block;
  margin: auto;
  width: 100%;
  height: auto;
  justify-content: center;
}
.quiz-artikel .content {
  margin-bottom: 0.5rem;
  text-align: left;
  line-height: 1;
  font-size: 1.8rem;
  color: #fff;
  }
.quiz-artikel .content h2 {
  font-family: var(--harga-font);
  font-style: italic;
  color: #fff;
}
.quiz-artikel .content h2 span {
  font-weight: bold;
  color: var(--bash);
}

.quiz-artikel .content input {
  background-color: transparent;
  font-family: var(--vadan1-font);
  border-radius: 5px;
  border: 1px solid var(--text);
  padding: 5px;
  font-size: 2rem;
  width: 70%;
  text-align: left;
  color: var(--text);
}

.quiz-artikel button {
  padding: 6px 14px;
  background-color: var(--bash);
  font-family: var(--badan2-font);
  color: var(--bg);
  font-weight: bold;
  font-size: 1rem;
  border-radius: 7px;
  box-shadow: 1px 1px 3px var(--bg);
  margin: 1rem auto;
  cursor: pointer;
}

.quiz-artikel .number-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  max-width: 100%;
  margin: 10px auto;
  }

.quiz-artikel .number-buttons button {
  width: 20wh;
  height: 45px;
  margin: 2px;
  font-size: 18px;
  cursor: pointer;
  }
.quiz-artikel .number-buttons button:active, .quiz-artikel #show-results-button:active { 
   color: #fff;
   background-color: var(--btn);
   transform: translateY(5px);
 }
.quiz-artikel .extra-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  max-width: 100%;
  margin: 10px auto;
  }
        
.quiz-artikel .extra-buttons button {
  width: 50wh;
  height: 45px;
  margin: 2px;
  font-size: 18px;
  cursor: pointer;
  }
.quiz-artikel #show-results-button {
  width: 100%;
  height: 45px;
  margin: 2px;
  font-size: 18px;
  cursor: pointer;
  }
        
.quiz-artikel .extra-buttons button:active {
  color: #fff;
  background-color: var(--pita);
 transform: translateY(0);
 }

.quiz-artikel #results-popup {
  display: none;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  max-height: 70%;
  color: #000;
  background: var(--alpa);
  border: 1px solid var(--pita);
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  z-index: 1000;
  padding: 20px;
}

.quiz-artikel #results-popup h3 {
  margin-top: 0;
}

.quiz-artikel .close-result-button {
  background: var(--pita);
  color: var(--text);
  margin-top: 10px;
  border-radius: 14px;
  cursor: pointer;
}

.quiz-artikel .close-result-button:hover {
  opacity: 0.8;
}