html{height:100%;color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;} button { background: none; border: none; margin: 0; padding: 0; width: auto; overflow: visible; line-height:inherit;}button::-moz-focus-inner{padding:0;border:0;}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  font:5vh/1em liberation_sansregular,helvetica,sans-serif;
  background:pink;
}

header h1, .nav{
  position:fixed;
  z-index:3;
  top:0;
  width:20%;
  height:10vh;
}
header h1{
  left:0;
  padding-top:2.4vh;
  width:20%;
  padding-right:10px;
  text-align:center;
  background:white;
}
header h1 span{
  margin-right:-2px;
}
header{
  text-align:center;
}
.nav{
  font-size:inherit;
  width:80%;
  right:0;
  padding-left:10px;
  background:pink;
  border:0;
}
.nav option{
  height:10vh;
  padding:2.2vh 0 0 10px;
  color:black;
}
.nav option span{
  display:inline-block;
  width:30px;
}
.nav:hover{
  color:white;
}
.nav option:hover{
  background:white;
}
.charlist{
  padding-top:10vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.charlist span{
  cursor:crosshair;
  border:1px solid pink;
  background:white;
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  padding:1vw;
  font-size:5vh;
  position:relative;
}

/* Ugly fixe for php glob last character issue */
.charlist span:last-child{
  display:none;
}
.charlist span:hover{
  background:pink;
}
.charlist span:active{
  background:rgb(111, 208, 99);
}
.charlist span.success:after{
  animation-duration: .7s;
  animation-name: up;
  content:"✔";
  z-index:5;
  font-size:1.5em;
  text-shadow:0px 0px 5px white;
  color:rgb(111, 208, 99);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  text-align:center;
}

footer{
  text-align:center;
  padding:60px 0;
  color:black;
}
a{color:inherit;}


@-moz-keyframes up {
  0% {
    margin-top:0;
    opacity:0;
  }
  60% {
    margin-top:-50px;
    opacity:1;
  }
  80% {
    margin-top:-50px;
    opacity:1;
  }
  100% {
    margin-top:-50px;
    opacity:0;
  }
}
@-webkit-keyframes up {
  0% {
    margin-top:0;
    opacity:0;
  }
  60% {
    margin-top:-50px;
    opacity:1;
  }
  80% {
    margin-top:-50px;
    opacity:1;
  }
  100% {
    margin-top:-50px;
    opacity:0;
  }
}
@keyframes up {
  0% {
    margin-top:0;
    opacity:0;
  }
  60% {
    margin-top:-50px;
    opacity:1;
  }
  80% {
    margin-top:-50px;
    opacity:1;
  }
  100% {
    margin-top:-50px;
    opacity:0;
  }
}

@media only screen and (max-width: 500px) {
  header h1{
    width:40%;
  }
  .nav{
    width:60%;
  }
}

::selection {background:black;color:white;}
::-moz-selection {background:black;color:white;}