@font-face {
  font-family: 'Determination';
  src: url('assets/determination.ttf');
}

body {
  margin: 0;
  overflow: hidden;
}

#gms {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#gms>* {
  box-sizing: border-box;
  width: 30vw;
  padding: 4px;
  border: 2px solid gray;
  background: white;
  font-family: 'Determination';
  font-size: 20px;
  outline: none;
}

#gms>button {
  cursor: pointer;
}

#rainbow {
  border: none;
  font-size: 80px;
  margin-bottom: 30px;
  user-select: none;
  cursor: default;
  color: hsl(0, 100%, 50%);
  animation: rainbow 10s linear infinite;
  -webkit-text-stroke: 2px black;
}

@keyframes rainbow {
  0%   { color: hsl(0, 100%, 50%); }
  10%  { color: hsl(36, 100%, 50%); }
  20%  { color: hsl(72, 100%, 50%); }
  30%  { color: hsl(108, 100%, 50%); }
  40%  { color: hsl(144, 100%, 50%); }
  50%  { color: hsl(180, 100%, 50%); }
  60%  { color: hsl(216, 100%, 50%); }
  70%  { color: hsl(252, 100%, 50%); }
  80%  { color: hsl(288, 100%, 50%); }
  90%  { color: hsl(324, 100%, 50%); }
  100% { color: hsl(360, 100%, 50%); } 
}