/* preload images */
body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url('img/Tromp.png') url('img/Tromp_idle.png') url('img/Tromprage.png') url('img/Smug.png') url('img/Trompromat.png');
}
/* get rid of glowy outline */

textarea, input, button { outline: none; }

body {
  background:#eee url('img/wall.png');
  font-family:"Cabin";
  width:100%;
  height:100%;
  background-attachment:fixed;
  margin:0;
  padding:0;
}
h2 {
  font-size:50px;
  width:800px;
  margin:30px auto;
  text-align:center;
}
h2 a {
  color:#eef;
  text-shadow:0 0 20px #00f;
  text-align:center;
  text-decoration:none;
}
.trumpatar {
  width:320px;
  height:320px;
  animation:idle infinite 4s steps(1,end);
  background-image:url('img/Tromp_idle.png');
  background-size:640px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  border:solid 8px #f00;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.4);
  float:left;
}
.trumpatar.talking {
  background-image:url('img/Tromp.png');
  animation:talking infinite 0.3s steps(1,end);
}
.trumpatar.talking.kompromat {
  background-image:url('img/Trompromat.png');
}
.trumpatar.talking.smug {
  background-image:url('img/Smug.png');
}
.trumpatar.talking.angry {
  background-image:url('img/Tromprage.png');
}
@keyframes idle {
  0% { background-position:0px 0px;}
  90% { background-position:-320px 0px;}
  92% { background-position:0px -320px;}
  94% { background-position:-320px 0px;}
  96% { background-position:0px 0px;}
}
@keyframes talking {
  0% { background-position:0px 0px;}
  25% { background-position:-320px 0px;}
  50% { background-position:0px -320px;}
  75% { background-position:-320px 0px;}
}
.talkBox div.visible {
  transition:opacity 1s;
  opacity:1;
}

.talkBox .answer.visible {
  transition-delay:0.5s;
}

article {
  width:800px;
  margin:30px auto;
  padding:20px;
  background:#fff;
  overflow:hidden;
  border:solid 8px #00a;
  box-shadow:0 0 30px rgba(0,0,0,0.5);
}
section {
  float:right;
  width:450px;
}
.talkBox {
  width:420px;
  float:right;
  padding:15px;
  height:320px;
  overflow:auto;
  font-size:18px;
}
textarea {
  margin:10px -10px;
  width:700px;
  float:left;
  clear:both;
  padding:20px;
  border:solid 4px #333;
  font-size:16px; /* to prevent zoom in mobile */
  resize:none;
}

textarea:focus {
  border:solid 4px #003;
  font-size:16px;
}

.visible {
  opacity:1;
}

.talkBox div {
  opacity:0;
  padding:10px;
  margin:0 0 10px 0;
  animation:fadein 1s;
}
.question {
  background:#A00;
  color:#fff;
  position:relative;
}
.question::before {
  position:absolute;
  right:-10px;
  top:0px;
  content:'';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #A00;
}
.answer {
  background:#00A;
  color:#fff;
  position:relative;
}
.answer::before {
  position:absolute;
  left:-10px;
  bottom:0px;
  content:'';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #00A;
}

.talkBox::-webkit-scrollbar {
width: 1em;
}

.talkBox::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.talkBox::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
button.ask {
  float:right;
  vertical-align:middle;
  background:#eee;
  color:#333;
  border:solid 1px #333;
  padding:10px;
  font-size:16px;
  text-transform:uppercase;
  margin:26px 0 0 0;
}
::-webkit-input-placeholder {
  font-size:16px;
}

:-moz-placeholder { /* Firefox 18- */
  font-size:16px;
}

::-moz-placeholder {  /* Firefox 19+ */
  font-size:16px;
}

:-ms-input-placeholder {
  font-size:16px;
}

footer a {
  color:#fff;
  text-decoration:none;
  text-shadow:0 0 10px #000;
}

footer a:hover {
  color:#aaf;
}

footer ul, footer li {
  list-style:none;
}

footer ul {
  text-align:center;
}

footer li {
  display:inline-block;
  margin:0 30px;
}