body{
    margin:0;
}
header{
    width:100vw;
    height:10vh;
    font-size:3rem;
    box-shadow:0 0 1rem 0 rgba(0,0,0,0.2), 0 0 1rem 0 rgba(0,0,0,0.2);
    font-family: 'Quando', serif;
    margin:0 auto;
    text-align:center;
    animation-name:move;
    animation-duration:1s;
    position:relative;
    color:#9BA687;
    background-color:#296258;
}
@keyframes move{
    from{font-size:1rem}
    to{font-size:3rem}
}
main{
    width:100vw;
    height:90vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#F6F7F8;
    background-color:#296258;
}
[type='submit']{
    font-size:1.5rem;
    font-family: 'Source Sans Pro', sans-serif;
    margin:8px 16px;
    padding:12px;
    border:none;
    cursor:pointer;
    background-color:#9BA687;
    color:#296258;
    text-align:center;
    border-radius:1rem;
}
[type='submit']:focus{
    outline:0;
    animation-name:shrink;
    animation-duration:.5s;
}
@keyframes shrink{
    0%{padding:6px;
    }
    100%{
        padding:12px;
    }
}
span{
    font-size:3rem;
    color:#9BA687;
    font-family: 'Source Sans Pro', sans-serif;
}
div{
    height:20vh;
    width:100vw;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    font-size:40px;
    font-family: 'Source Sans Pro', sans-serif;
}
#input{
    height:2em;
    width:6em;
    padding:0 8px;
    margin-left:2rem;
    margin-right:1rem;
    border-radius:1rem;
    border:2px solid #9BA687;
    color:#296258;
    font-size:1.5rem;
    background-color:#9BA687;
}
#input:focus{
    outline:0;
}

#output{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:4rem;
    display:none;
    position:absolute;
    bottom:1em;
    color:#A2B9BE;
}