/* - - - Element - - - */

body {
  color:#0e1b3a;
  font-family:'Lucida Console', Monaco, monospace;
  font-size:24px;
  letter-spacing:0; line-height:32px;
  text-align:left;
    background:#ddd;
    width:100%; height:100%;
      margin:0; padding:0;
      overflow-x:hidden; overflow-y:scroll;
}

div {
  width:210px; height:210px;
  background-color:#fff;
    border:5px solid #0e1b3a;
    border-radius:20px;
    box-shadow:0 8px 0 0 #0e1b3a;
    cursor:hand; cursor:pointer;
    margin-top:-8px;
    position:absolute;
    top:45%; left:50%;
      transform:translate(-50%, -50%);
}

p {
  margin:0; padding:0;
  position:absolute;
  top:50%; left:50%;
    transform:translate(-50%, -50%);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

/* - - - Interactive - - - */

div:active {
  box-shadow:0 0px 0 0 #0e1b3a;
  margin:0;
}

/* - - - Animation - - - */

div {
  transition:background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out, margin-top 0.05s ease-in-out;
  -o-transition:background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out, margin-top 0.05s ease-in-out;
  -ms-transition:background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out, margin-top 0.05s ease-in-out;
  -moz-transition:background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out, margin-top 0.05s ease-in-out;
  -webkit-transition:background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out, margin-top 0.05s ease-in-out;
}