styles.css

:root {
  --main-bg-color: rgb(193, 240, 251);
  --button-color: rgb(188, 219, 131);
  --white-color: rgb(255, 255, 255);
  --blue-color: rgb(138, 195, 208);
  --darkgray-color: rgb(61, 61, 61);
  --animation-time: 1s;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

#gameScreen {
  display: none;
}

body {
  background-image: radial-gradient(var(--white-color) 28.8%, transparent 30.8%),
    radial-gradient(var(--white-color) 28.8%, transparent 30.8%);
  background-position: 0px 0px, 104px 104px;
  background-size: 208px 208px;
  background-color: var(--main-bg-color);
  font-family: "Dongle", sans-serif;
  font-size: 27px;
  line-height: 20px;
  cursor: url("img/spoon.png"), auto;
}

main {
  flex-direction: row;
  overflow: hidden;
  scroll-behavior: smooth;
}

button {
  margin: 10px;
  padding: 10px 20px 10px 20px;
  background-color: var(--button-color);
  border-radius: 8px;
  border: none;
  font-family: "Dongle", sans-serif;
  font-size: 25px;
}

button:hover {
  transform: scale(0.9);
}

main,
.wrapper--information,
.game--information {
  align-items: center;
}

div p,
h1 {
  width: 240px;
  text-align: center;
}

main,
.gameboard,
.wrapper--information,
.game--information {
  display: flex;
}

main,
.gameboard {
  justify-content: center;
}

.wrapper--information,
.game--information {
  flex-direction: column;
}

.gameboard,
.wrapper--information {
  background-color: var(--white-color);
}

.wrapper--information {
  width: 430px;
  height: 550px;
  border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%;
  border: 1px solid var(--darkgray-color);
  padding-top: 60px;
  border: 1px solid var(--blue-color);
  padding-top: 50px;
}

.wrapper--information img:hover {
  animation: shake var(--animation-time) cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.gameboard {
  flex-wrap: wrap;
  width: 550px;
  padding: 50px;
  border: 5px solid var(--blue-color);
}

input[type="checkbox"] {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  appearance: none;
  cursor: url("img/spoon.png"), auto;
  animation: blink-animation var(--animation-time) steps(2, start) infinite;
}

.gameboard__checkbox--eggimage1 {
  background-image: url(img/easteregg1.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage2 {
  background-image: url(img/easteregg2.png);
  --animation-time: 2s;
}

.gameboard__checkbox--eggimage3 {
  background-image: url(img/easteregg3.png);
  --animation-time: 4s;
}

.gameboard__checkbox--eggimage4 {
  background-image: url(img/easteregg4.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage5 {
  background-image: url(img/easteregg5.png);
  --animation-time: 3s;
}

.gameboard__checkbox--eggimage6 {
  background-image: url(img/easteregg6.png);
  --animation-time: 3s;
}

.gameboard__checkbox--eggimage7 {
  background-image: url(img/easteregg7.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage8 {
  background-image: url(img/easteregg8.png);
  --animation-time: 2s;
}

.gameboard__checkbox--eggimage9 {
  background-image: url(img/easteregg9.png);
  --animation-time: 4s;
}

.gameboard__checkbox--eggimage10 {
  background-image: url(img/easteregg10.png);
  --animation-time: 2s;
}

.gameboard__checkbox--eggimage11 {
  background-image: url(img/easteregg11.png);
  --animation-time: 2s;
}

.gameboard__checkbox--eggimage12 {
  background-image: url(img/easteregg12.png);
  --animation-time: 3s;
}

.gameboard__checkbox--eggimage13 {
  background-image: url(img/easteregg13.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage14 {
  background-image: url(img/easteregg14.png);
  --animation-time: 2s;
}

.gameboard__checkbox--eggimage15 {
  background-image: url(img/easteregg15.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage16 {
  background-image: url(img/easteregg16.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage17 {
  background-image: url(img/easteregg17.png);
  --animation-time: 4s;
}

.gameboard__checkbox--eggimage18 {
  background-image: url(img/easteregg18.png);
  --animation-time: 2s;
}

.gameboard__checkbox--eggimage19 {
  background-image: url(img/easteregg19.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage20 {
  background-image: url(img/easteregg20.png);
  --animation-time: 3s;
}

.gameboard__checkbox--eggimage21 {
  background-image: url(img/easteregg21.png);
  --animation-time: 4s;
}

.gameboard__checkbox--eggimage22 {
  background-image: url(img/easteregg22.png);
  --animation-time: 2s;
}

.gameboard__checkbox--eggimage23 {
  background-image: url(img/easteregg23.png);
  --animation-time: 1s;
}

.gameboard__checkbox--eggimage24 {
  background-image: url(img/easteregg24.png);
  --animation-time: 3s;
}

.gameboard__checkbox--eggimage25 {
  background-image: url(img/easteregg25.png);
  --animation-time: 4s;
}

input[type="checkbox"]:checked {
  animation: none;
  pointer-events: none;
}

.gameboard__checkbox--eggimage1:checked {
  background-image: url(img/egg1.png);
}

.gameboard__checkbox--eggimage2:checked {
  background-image: url(img/egg2.png);
}

.gameboard__checkbox--eggimage3:checked {
  background-image: url(img/egg3.png);
}

.gameboard__checkbox--eggimage4:checked {
  background-image: url(img/egg4.png);
}

.gameboard__checkbox--eggimage5:checked {
  background-image: url(img/egg5.png);
}

.gameboard__checkbox--eggimage6:checked {
  background-image: url(img/egg6.png);
}

.gameboard__checkbox--eggimage7:checked {
  background-image: url(img/egg7.png);
}

.gameboard__checkbox--eggimage8:checked {
  background-image: url(img/egg8.png);
}

.gameboard__checkbox--eggimage9:checked {
  background-image: url(img/egg9.png);
}

.gameboard__checkbox--eggimage10:checked {
  background-image: url(img/egg10.png);
}

.gameboard__checkbox--eggimage11:checked {
  background-image: url(img/egg11.png);
}

.gameboard__checkbox--eggimage12:checked {
  background-image: url(img/egg12.png);
}

.gameboard__checkbox--eggimage13:checked {
  background-image: url(img/egg13.png);
}

.gameboard__checkbox--eggimage14:checked {
  background-image: url(img/egg14.png);
}

.gameboard__checkbox--eggimage15:checked {
  background-image: url(img/egg15.png);
}

.gameboard__checkbox--eggimage16:checked {
  background-image: url(img/egg16.png);
}

.gameboard__checkbox--eggimage17:checked {
  background-image: url(img/egg17.png);
}

.gameboard__checkbox--eggimage18:checked {
  background-image: url(img/egg18.png);
}

.gameboard__checkbox--eggimage19:checked {
  background-image: url(img/egg19.png);
}

.gameboard__checkbox--eggimage20:checked {
  background-image: url(img/egg20.png);
}

.gameboard__checkbox--eggimage21:checked {
  background-image: url(img/egg21.png);
}

.gameboard__checkbox--eggimage22:checked {
  background-image: url(img/egg22.png);
}

.gameboard__checkbox--eggimage23:checked {
  background-image: url(img/egg23.png);
}

.gameboard__checkbox--eggimage24:checked {
  background-image: url(img/egg24.png);
}

.gameboard__checkbox--eggimage25:checked {
  background-image: url(img/egg25.png);
}