#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}button{cursor:pointer;transition:all .3s ease-in-out;text-decoration:none;padding:.6rem;border:none;box-shadow:#000a 4px 4px}.btn-primary{background-color:#6100a2;color:#fff;font-size:.8rem}.btn-primary:hover{box-shadow:0 0 7px #6100a2}.wrapper{display:flex;grid-gap:1rem;flex-direction:row;justify-content:center;width:100%;height:85vh;position:relative;margin-bottom:-1.3rem}.editor-area{text-align:left;flex:1}.title-area{display:flex}.title{flex:1}.editor{resize:none;width:-webkit-fill-available;height:90%}.preview{max-width:50vw;flex:1;border:1px solid #969696;max-height:96.8%;overflow-y:auto}.preview-title{margin-top:0;border-bottom:solid 1px}.preview>*{max-width:50vw;line-break:normal}.preview>* p{padding:.2rem}.footer-buttons{text-align:center}#file-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}#file-input+label{display:inline-block;cursor:pointer;transition:all .3s ease-in-out;text-decoration:none;padding:.55rem;border:none;box-shadow:#000a 4px 4px;color:#fff;background-color:#6100a2;position:absolute;font-size:.8rem;margin-top:.3rem;width:20.7rem;text-align:center;margin-left:-11.2rem}#file-input:focus+label,#file-input+label:hover{box-shadow:0 0 7px #6100a2;color:#fff}label{margin-bottom:0!important}@media only screen and (hover: none){.wrapper{flex-direction:column;margin-bottom:unset!important}.preview{max-width:100vw;margin-top:1rem}}