@keyframes float {
  0%   {top:-1%;}
  50%  {top:1%;}
  100% {top:-1%;}
}

@keyframes jittery {
    0% {
        transform: translate(-.2%, -.1%) scale(1.01, 1.01);
    }
    25% {
        transform: translate(.2%, .1%);
    }
    50% {
        transform: translate(-.2%, .1%) scale(1.0, 1.0);
    }
    75% {
        transform: translate(.2%, -.1%) scale(1, 1);
    }
}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5%, 5%) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5%, 5%) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

html, body{
    background:#ffffff;
    font-family:sans-serif;
    font-size:0;
    height:100%;
    /*image-rendering:pixelated;*/
    margin:0;
    padding:0;
    width:100%;
    /*-webkit-image-rendering:pixelated;*/
}

#comic{
    aspect-ratio:4953/7792;
    display:inline-block;
    height:100%;
    left:0;
    overflow:hidden;
    position:relative;
    top:0;
    white-space: nowrap;
}

.comic-page{
    aspect-ratio:4953/7792;
    background:white;
    display:inline-block;
    height:100%;
    left:0;
    overflow:hidden;
    position:relative;
    top:0;
    transition:left 1s ease;
}

.comic-panel{
    bottom:0;
    display:inline-block;
    height:100%;
    left:0;
    position:absolute;
    right:0;
    top:0;
}

#container{
    height:100%;
    width:100%;
}

#content{
    height:100%;
    width:100%;
    text-align:center;
}

#crayon-filter{
    background-image:url('/resources/images/Crayon.gif');
    background-repeat:repeat;
    background-size:10%;
    filter:brightness(0.6) contrast(10);
    height:100%;
    left:0;
    mix-blend-mode:lighten;
    opacity:0.35;
    position:absolute;
    pointer-events:none;
    top:0;
    width:100%;
    z-index:10;
}

.endash::before{
    content:'-';
    font-size:24px;
    font-weight:800;
}

.greaterthan::before{
    content:'>';
    font-size:24px;
    font-weight:800;
}

#image-preloader{
    display:none;
}

.lessthan::before{
    content:'<';
    font-size:24px;
    font-weight:800;
}

.letter-e::before{
    content:'e';
    font-size:24px;
    font-weight:800;
}

.letter-o::before{
    content:'o';
    font-size:24px;
    font-weight:800;
}

.letter-v::before{
    content:'v';
    font-size:24px;
    font-weight:800;
}

.panel-images-container{
    height:100%;
}

.panel-image{
    height:100%;
}

.panel-input-parent{
    background:#000000;
    border:#ffffff;
    color:#ffffff;
    display:block !important;
    left:0;
    margin-top:20px;
    opacity:0.2;
    overflow:hidden;
    position:relative;
    top:0;
    transition:opacity 0.5s ease, font-size 0.5s ease, width 0.5s ease, height 0.5s ease, margin-top 0.5s ease;
    width:100%;
    aspect-ratio:1;
}
.panel-input-parent.current-input{
    opacity:1;
}

.panel-input-parent.finished-input{
    font-size:0;
    height:0;
    width:0;
    margin-top:0;
}

.panel-input{
    display:block !important;
    font-size:24px;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
}

.panel-input.space{
    font-size:0;
}

#panel-inputs{
    display:inline-flex;
    flex-direction:column;
    justify-content:flex-end;
    margin-left:20px;
    margin-bottom:20px;
    vertical-align:bottom;
    max-height: 100%;
    aspect-ratio: 1 / 16;
    height: calc(100vh - 20px);
}

.period::before{
    content:'•';
    font-size:24px;
    font-weight:800;
}

.semicolon::before{
    content:";";
    font-size:24px;
    font-weight:800;
}

.slash::before{
    content:"/";
    font-size:24px;
    font-weight:800;
}

.space::before{
    content:'SPACEBAR';
    font-size:8px;
    font-weight:800;
}