/*.scry > h3, img, .scrybox > ul.colors, ul.eyes*/

.scry {padding: 1rem 0;  text-align: center; margin: 0 auto;} .scry ul {list-style-type: none; margin-left: 0 !important;}
.scry h3 {font-size: 1.5rem; margin: 1rem 0;}

.scrybox {max-width: 350px; margin: 0 auto;}
.scry li {display: inline-block;}
.colors li {width: 33%;} .eyes li {width: 50%;}

@media only screen and (min-width: 550px) {
  .scrybox {width: 100%; overflow: auto;}
  .scry img, .scrybox {display: block; width: 50%; float: left;}
  .colors li {width: 100%;}
}

.abyss {background: #0d1e24; color: #fff;}
.cerulean {background: #00b4d6;}
.orca {background: #e0dfff}