:root {
  --blue: #1e90ff;
}
body {
  background-color: grey;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#kit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#kit p{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;
    transform: translate(0, 55px );
}
.pad {
  display: flex;
  height: 100px;
  width: 100px;
  margin-bottom: 15px;
  border-radius: 50%;
  background-color: rgb(225, 255, 0);
  margin-left: auto;
  margin-right: auto;
}
h1 {
  text-align: center;
  padding: 0;
  margin: 0;
  color: white;
}
#pad1 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad1:hover {
  background-color: orange;
}
#pad2 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad2:hover {
  background-color: orange;
}
#pad3 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad3:hover {
  background-color: orange;
}
#pad4 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad4:hover {
  background-color: orange;
}
#pad5 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad5:hover {
  background-color: orange;
}
#pad6 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad6:hover {
    background-color: orange;
  }
#pad7 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad7:hover {
    background-color: orange;
  }
#pad8 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad8:hover {
    background-color: orange;
  }
#pad9 {
  display: flex;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--blue);
}
#pad9:hover {
    background-color: orange;
  }
@keyframes lightUp {
  0%,
  100% {
    background-color: var(--blue);
    transform: translate(-3px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px);
  }
  20% {
    transform: translate(-3px, 0px);
  }
  30% {
    transform: translate(3px, 2px);
  }
  40% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 2px);
    background-color: orange;
  }
  60% {
    transform: translate(-3px, 1px);
  }
  70% {
    transform: translate(3px, 1px);
  }
  80% {
    transform: translate(-1px, -1px);
  }
  90% {
    transform: translate(1px, 2px);
  }
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
  }