@import url(https://fonts.googleapis.com/css?family=Mouse+Memoirs);
@import url(https://fonts.googleapis.com/css?family=Ranchers);
* {margin:0; padding:0; animation-duration:2s;}
#win {display:none;border:10px solid red;top:80px;position:absolute;background-color:white;left:30%;text-align:center;padding:10px;font:200% "Ranchers";border-radius:1em}
a {text-decoration:None}
h1 {font-family: "Ranchers"; text-align:center;}
#grid {margin:0 auto;max-width:500px;}
.row {display: table-row;}
.row:nth-child(even){background-color:rgba(255,240,240,0.5);}
.content{display: inline-block; min-height: 3em;text-align: center; vertical-align: middle; padding:2px;
overflow:hidden;font-family:"Mouse Memoirs";}
.cell {display: table-cell; text-align:center;width:20%;box-shadow: inset 3px 2px 11px 1px #ccc;}
.cell:nth-child(even){background-color:rgba(240,255,240,0.5);}
.heardIt {opacity: 0;color:red; background-color:transparent;animation-name:fade,slideout;}
.fade {animation-name:fade;opacity:0;}
.freeSpace {color:green}
@keyframes fade { from {opacity:1} to {opacity:0} }
@keyframes slideout {
    from{font-size:100%}
    to{font-size:0;}
}
@media screen and (orientation:landscape) {
#grid {max-width:100%; max-height:100%;}
}

@media screen and (orientation:portrait) {
#grid {max-width:500px; max-height: auto;}
.content {size: 100%;}
h1 {padding-bottom: 0}
}

@media screen and (orientation:landscape) and (min-width:768px) {
h1 {padding-bottom: 2em;}
.content {font-size: 150%; }
}
#footer a.logo {color:transparent;text-decoration:none;width:100px;height:60px;background:transparent url("https://evilonastick.com/i/EoaS.png") no-repeat top center;display:block;margin:0 auto;}