@charset "UTF-8";

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.light {
    width: 60px;
    height: 60px;
	background-color: gray;
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 60px);
}

.on {
    background-color: yellow;
}

#reset {
    display: none;
}

.back-button {
    display: inline-block;
    padding: 3px 6px;
	margin-bottom: 10px;
    border: 1px solid black;
    text-decoration: none;
}

.alla{
	animation: changecolor 0.5s linear infinite;
}

@keyframes changecolor {
  0%   { background-color: red; }
  14%  { background-color: orange; }
  28%  { background-color: yellow; }
  42%  { background-color: green; }
  56%  { background-color: aqua; }
  70%  { background-color: blue; }
  84%  { background-color: purple; }
  100% { background-color: red; }
}