@import url(https://fonts.googleapis.com/css?family=Oxanium|Righteous|Red+Hat+Display&display=swap);
.brand{font-family:"Righteous";color:#fff;position:fixed;left:20px;top:25px;font-size:1rem;transition:transform .5s;z-index:10;cursor:default}.brand a{animation-iteration-count:1;text-decoration:none;display:flex}.brand a:hover{color:#fff;text-decoration:none}.brand a:hover .ark{animation:showArk 1s forwards ease-in}.brand a:hover .alstead{animation:showAlstead 1s forwards ease-in;padding-right:2px}.brand a:visited{color:#fff}.brand a:-webkit-any-link{color:#fff}.ark,.alstead{overflow-x:hidden;overflow-y:hidden;width:0%;display:inline-block;font-size:inherit}@keyframes showArk{from{width:0%}to{width:2.7ch;overflow-x:clip}}@keyframes showAlstead{from{width:0%}to{width:5.6ch;overflow-x:clip}}.made-with{font-family:Righteous;font-size:1em;position:absolute;bottom:10px;left:20px;color:#fff}.made-with ul{list-style:none;display:flex;flex-direction:row;padding:2px;font-size:1.5em}.made-with ul li{padding:2px}body{background:#2f4f4f;background:linear-gradient(225deg, rgb(0, 20, 36) 0%, rgb(64, 61, 61) 0%, rgb(45, 48, 48) 9%, rgb(16, 16, 17) 100%);position:relative;margin:0}header{width:100%;height:auto;color:#fff;font-size:2.2em;padding:25px;width:17vw;min-width:150px;margin:40px auto;text-align:center;line-height:1.5em;font-family:"Righteous"}.brand{font-size:1rem}#markdown{display:flex;flex-flow:space-between;flex-direction:row;justify-content:center}.section{display:flex;flex-direction:column;font-family:Righteous}.section span{color:#fff;font-size:1.8em;align-self:center;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#preview{font-size:1.1em;font-family:Oxanium;width:35vw;min-height:70vh;background:#fafaf0;box-shadow:inset 0px -0.5px 2px #000,0px 10px 50px -5px #000;color:#000;margin:0px 0px 50px 20px;padding:15px;z-index:5;overflow:scroll-y;position:relative}#editor{position:relative;box-sizing:content-box;width:40vw;min-height:70vh;background:#000;box-shadow:inset 0px -1px 2px rgba(200,255,100,.5),0px 10px 50px -5px #000;resize:vertical;color:#90ee90;padding:15px 15px;margin:0px 0px 50px 0px;overflow:scroll-y}#editor:hover{outline:3px solid #add8e6}#editor::before{content:""}#preview:hover{outline:3px solid #add8e6}#editor:focus{outline:5px solid #add8e6}@media(max-width: 700px){#markdown{flex-direction:column;align-items:center;justify-content:space-between}#preview{margin:20px 0px 70px 0px}#editor{resize:vertical;width:90vw}#preview{width:90vw}}