/* /tutorials/JavaScript Projects/rainbow/styles.css */
body {
  background-color:black;
  display:flex;
  justify-content:center;
  font-family:sans-serif;
}
img {
  height: 100%;
}
#game {
  width: 127vh;
  height: 95vh;
  display: grid;
  grid-template-rows: repeat(10,1fr);
  grid-template-columns: repeat(10,1fr);
  overflow: hidden;
  margin-top:1vh;
}
#scene {
  grid-row: 1 / span 10;
  grid-column: 1 / span 10;
}
#red {
  grid-row: 6 / span 2;
  grid-column: 5 / span 2;
}
#orange {
  grid-row: 4 / span 3;
  grid-column: 2 / span 2;
}
#yellow {
  grid-row: 7 / span 4;
  grid-column: 8 / span 3;
}
#green {
  grid-row: 9 / span 2;
  grid-column: 4 / span 2;
}
#blue {
  grid-row: 7 / span 3;
  grid-column: 6 / span 2;
}
#indigo {
  grid-row: 9 / span 2;
  grid-column: 6 / span 2;
}
#violet {
  grid-row: 2 / span 2;
  grid-column: 3 / span 2;
}
#rock {
  grid-row: 5 / span 6;
  grid-column: 3 / span 8;
}
.move {
  transform:translateX(110vh);
  transition:transform 5s;
}
#door {
  grid-row: 5 / span 4;
  grid-column: 3 / span 3;
}
#up {
  grid-row: 9 / span 2;
  grid-column: 5 / span 1;
}
#right {
  grid-row: 9 / span 2;
  grid-column: 9 / span 2;
}
#down {
  grid-row: 9 / span 2;
  grid-column: 6 / span 1;
}
#left {
  grid-row: 9 / span 2;
  grid-column: 1 / span 2;
}
.rainbow {
  grid-row: 1 / span 5;
  grid-column: 1 / span 8;
  opacity: .4;
}
#message {
  grid-row: 2 / span 9;
  grid-column: 1 / span 10;
  background-color: lightblue;
  align-self:center;
  justify-self:center;
  padding:1vw;
  font-size:2vw;
  text-align:center;
}
#panel {
  grid-row: 2 / span 1;
  grid-column: 2 / span 5;
  display:flex;
  justify-content: space-evenly;
  align-items: center;
}
.cell {
  width:4.5vw;
  height:4.5vw;
  border:2px groove;
}