@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #330033;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
   font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  color: whitesmoke;
  overflow: hidden;
    
  
}

#option > div {
  height: 80px;
  width: 80px;
  border-radius: 20px;
  border: 2px solid white;
}
#option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  width: 300px;
  margin: 50px auto; 
   
}
#option > div:hover {
  cursor: pointer;
  scale: 1.2;
  transition: 0.4s ease-out;
}
#btn {
  font-family: "Bitcount Grid Double", system-ui;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "slnt" 0, "CRSV" 0.5, "ELSH" 0, "ELXP" 0;
  padding: 10px 20px;
}
.score {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1); 
  border: 2px solid #fff;
  border-radius: 12px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  z-index: 1000;
}
.title {
  font-size: 40px;
  text-align: center;
  margin-top: 70px;
  transform-origin: center center;
  animation: popFromPoint 0.8s ease-out;
  animation-fill-mode: forwards;
}

@keyframes popFromPoint {
  0% {
    transform: scale(0) translateY(-50px);
    opacity: 0;
  }
  70% {
    transform: scale(1.5) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.2) translateY(0);
    opacity: 1;
  }
}

#color-code {
  margin-top: 100px;
  text-align: center;
  letter-spacing: 2px;
}
#op{
  text-align: center;
  font-size: 20px;
}

#btn{
  position: fixed;
  bottom: 50px;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 12px;
  left: 45%;
}

@media (max-width:600px) {
  .score {
  padding: 8px 10px;
  font-size: 15px;
}
.title {
  font-size: 30px;
  letter-spacing: 1.2px;
  margin-top: 90px;
  line-height: 1.4;
  transform-origin: center center;
  animation: popFromPoint 0.9s ease-out;
  animation-fill-mode: forwards;
}

@keyframes popFromPoint {
  0% {
    transform: scale(0.8) translateY(-50px);
    opacity: 0;
  }
  70% {
    transform: scale(1.2) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.0) translateY(0);
    opacity: 1;
  }
}
#color-code {
  margin-top: 50px;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 2px;
}
#btn{
  position: absolute;
  height: 40px;
  top: 20px;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 12px;
  left: 10%;
}

}