/* /tutorials/JavaScript Projects/rainbow/styles.css */
body {
  background-color:black;
}
img {
  height: 100%;
}
#game {
  margin: 1.5vmin auto;
  width: 90vmin;
  height: 67.5vmin;
  display: grid;
  grid-template-rows: repeat(10,10%);
  grid-template-columns: repeat(10,10%);
  overflow: hidden;
}
#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(75vmin);
  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:1.5vmin;
  font-size:2.25vmin;
}
#panel {
  grid-row: 2 / span 1;
  grid-column: 2 / span 5;
  display:flex;
  justify-content: space-evenly;
  align-items: center;
  opacity:.6;
}
.cell {
  width:3.75vmin;
  height:3.75vmin;
  border:2px groove;
}
