body, html {
  width:100%;
  min-height:100%;
  height:100%;
  margin:0;
  padding:0;
}

h1 {
  font-size:30px;
  font-family:sans-serif;
  text-align:center;
}

p {
  font-szie:14px;
  font-family:sans-serif;
  text-align:center;
}

.content {
  width:500px;
  height:500px;
  margin:auto;
  margin-top:30px;
}

.square {
  width:10%;
  height:10%;
  float:left;
  background-color:tomato;
  transition:all .2s;
  -webkit-appearance:none;
  margin:0;
  outline:none;
  &:hover {
    background-color:darken(floralwhite, 20%);
    transition:all .2s;
  }
  &:checked {
    outline:none;
    background-color:lighten(tomato, 20%) !important;
    transition:all .2s;
    &:hover {
      background-color:darken(floralwhite, 20%) !important;
      transition:all .2s !important;
    }
    & + .square:nth-of-type(2n+0) {
      background-color:black;
      &:hover {
      background-color:darken(floralwhite, 20%) !important;
      transition:all .2s !important;
    }
    }
    & ~ .square:checked:nth-of-type(4n+7) {
      background-color:teal !important;
      &:hover {
      background-color:darken(floralwhite, 20%) !important;
      transition:all .2s !important;
    }
    }
  }
}