cell{
  background-color:white;
  margin:0;
  padding:0;
}
div > cell {
    flex: 1;
    -webkit-flex:1;
    transition:background-color 0.15s;
    -webkit-transition:background-color 0.15s;
}
li > cell {
    height:30px;
    width:30px;
}
cell:hover{
  cursor:pointer;
  opacity:0.8;
}
#t{
  display:flex;
  display:-webkit-flex;
  flex-direction:column;
  -webkit-flex-direction:column;
  width:400px;
  height:400px;
}
#t>div{
  display:flex;
  display:-webkit-flex;
  flex:1;
  -webkit-flex:1;
  flex-direction:row;
  -webkit-flex-direction:row;
}
#container{
  margin:auto;
  display:inline-block;
  box-shadow:0 0 3px gray;
  top:30vh;
}
body{
  font-family:Verdana;
  background-color:lightgray;
  text-align:center;
}
input, #edit{
  background-color:lightblue;
  box-shadow:0 0 2px gray;
  text-shadow: 0 0 1px gray;
  border:0;
  font-size:20px;
  color:black;
  padding:3px;
  font-family:Courier;
  border-radius:0;
}
input:hover, #edit:hover{
  cursor:pointer;
  opacity:0.8;
}
p{
  font-size:30px;
}
#by{
  font-size:10px;
}
a{
  text-decoration:none;
  color:gray;
}
a:visited{
  color:gray;
}
h1{
  background-color:rgba(200, 200, 200, 0.5);
  padding:8px;
}
#instructions{
  padding-left:5vw;
  padding-right:5vw;
}
#colorsDisplay{
  position:absolute;
  box-shadow:0 0 2px gray;
  top:20vh;
  width:100px;
  list-style-type:none;
  padding:0;
}
@media screen and (max-width:733px) {
    #colorsDisplay {
        display:none;
    }
}
#colorsDisplay>li{
    padding:10px;
}
.question {
    font-size:12px;
    width:90%
}
asker {
    position:absolute;
    width:400px;
    left:calc(50vw - 200px);
    top:20vh;
    background-color:whitesmoke;
    box-shadow:0 0 2px gray;
}