:root{--main-colour:#ffa000;--main-colour-light:#ffd149;--main-colour-dark:#c67100;--grid-gap:5px;--ruler-color:#c67100;--header-height:3rem;--footer-height:3rem}@media screen and (max-width:768px){:root{--grid-gap:10px}}@font-face{font-family:Lucida Handwriting;src:url(/storymaker/static/media/lHandW.66d9c133258c996e9d11.woff) format("woff")}body{background-color:#ffa000;background-color:var(--main-colour);font-family:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace}h1,h2,h3,p{line-height:1.5}h1{font-family:Lucida Handwriting,Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;font-size:2rem;margin:0 0 2rem}h2{font-size:1.7rem;margin:0 0 1rem}h3{font-size:1.5rem;margin:0}p{font-size:1rem;margin:0 0 1rem;padding:0}h2#title,h3#title,p>span#title{font-family:Lucida Handwriting,Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace}main{background-image:linear-gradient(270deg,#ffd149,#ffa000);background-image:linear-gradient(to left,var(--main-colour-light),var(--main-colour));min-height:calc(100vh - 10rem);min-height:calc(100vh - var(--header-height) - var(--footer-height) - 4rem);padding:4rem 1rem;padding:calc(var(--header-height) + 1rem) 1rem calc(var(--footer-height) + 1rem) 1rem;z-index:2}footer,main{display:grid}footer{background-color:#ffa000;background-color:var(--main-colour);border-top:1px solid #c67100;border-top:1px solid var(--ruler-color);bottom:0;grid-template-columns:1fr 1fr 1fr;height:3rem;height:var(--footer-height);padding-top:1rem;position:fixed;width:calc(100% - 1rem);z-index:1}footer #powered{display:grid;padding-left:1rem;place-items:start start}footer #copyright{display:grid;place-items:start center}footer #github{display:grid;padding-right:1rem;place-items:start end}.footer-icon{height:2rem}header{background-color:#ffa000;background-color:var(--main-colour);border-bottom:1px solid #c67100;border-bottom:1px solid var(--ruler-color);display:grid;grid-template-columns:1fr 1fr 1fr;height:3rem;height:var(--header-height);position:fixed;top:0;width:calc(100% - 1rem);z-index:1}header>#title{display:grid;place-items:end center}header>#page-title{padding-left:1rem;place-items:center start}header>#page-title,header>nav{display:grid;height:3rem;height:var(--header-height)}header>nav{grid-template-columns:1fr 1fr 1fr;padding-right:1rem;place-items:center end}#centered{display:grid;place-items:center center}#landing{align-items:center;height:90vh}#landing,h1.landing,h2.landing{display:grid;justify-items:center;text-align:center}#app-button,#disabled-app-button,#freestyle-button,#text-button{background-color:#c67100;background-color:var(--main-colour-dark);border:none;border-radius:2px;box-shadow:inset 1px 1px 1px hsla(0,0%,100%,.6),inset -1px -1px 2px rgba(0,0,0,.6);margin-bottom:3px;outline:none}#app-button,#disabled-app-button{padding:5px 40px}#text-button{padding:5px 10px}#freestyle-button{margin-top:1rem;padding:5px 10px}#app-button:hover,#freestyle-button:hover,#text-button:hover{background-color:#ffa000;background-color:var(--main-colour)}#app-button:active,#freestyle-button:active,#text-button:active{box-shadow:inset 1px 1px 1px hsla(0,0%,100%,.6),inset -1px -1px 2px rgba(0,0,0,.6)}a:hover,a:link{text-decoration:none}a:hover{color:#c67100;color:var(--main-colour-dark)}#seperator{border-top:1px solid var(--ruler-colour);margin-top:1rem}#freestyle-form{display:grid;grid-template-columns:1fr 10fr;margin:0;padding:0}#freestyle-form label{display:grid;place-items:center start}#freestyle-form input{overflow:hidden;padding:10px;resize:none;white-space:nowrap}#freestyle-form textarea{line-height:.5;margin:.5rem;overflow:hidden;padding:1rem;white-space:nowrap}#image-grid{grid-gap:5px;grid-gap:var(--grid-gap);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:5px}.image-button,.image-button-active,.image-button-image{border-radius:2px}.image-button,.image-button-active{background:none;border:none;margin:2px;outline:none;padding:5px;text-decoration:none}.image-button{box-shadow:inset 1px 1px 1px hsla(0,0%,100%,.6),inset -1px -1px 2px rgba(0,0,0,.6)}.image-button:hover{background-color:#ffa000;background-color:var(--main-colour)}.image-button-active{box-shadow:inset 1px 1px 1px rgba(206,9,9,.6),inset -1px -1px 2px rgba(0,0,0,.6)}@media screen and (max-width:768px){body{margin:1rem}footer{grid-gap:5px;grid-gap:var(--grid-gap);grid-template-columns:2fr 1fr;padding-top:.5rem;width:calc(100% - 2rem)}footer #copyright{display:grid;padding-left:2rem;place-items:start start}footer #github{display:grid;padding-right:1rem;place-items:start end}header{display:grid;grid-template-columns:2fr 1fr;width:calc(100% - 2rem)}header>#title{display:grid;place-items:end start}header>nav{grid-gap:5px;grid-gap:var(--grid-gap);display:grid;grid-template-columns:1fr 1fr 1fr;place-items:end end}h1{font-size:1.5rem;margin:0}}#spinner{display:grid;margin:5px;place-items:start center}.spinner-2{-webkit-animation:s2 1s linear infinite;animation:s2 1s linear infinite;border:8px solid #c67100;border-color:var(--main-colour-dark);border-radius:50%;border-right:8px solid var(--main-colour-light);height:50px;width:50px}@-webkit-keyframes s2{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes s2{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}#heading-fadeIn{-webkit-animation:headingFadeIn 2s linear;animation:headingFadeIn 2s linear}@-webkit-keyframes headingFadeIn{0%{opacity:0}50%{opacity:.5}to{opacity:1}}@keyframes headingFadeIn{0%{opacity:0}50%{opacity:.5}to{opacity:1}}#catchprhase-fadeIn{-webkit-animation:catchprhaseFadeIn 4s linear;animation:catchprhaseFadeIn 4s linear}@-webkit-keyframes catchprhaseFadeIn{0%{opacity:0}33%{opacity:.5}50%{opacity:.75}75%{opacity:1}to{opacity:1}}@keyframes catchprhaseFadeIn{0%{opacity:0}33%{opacity:.5}50%{opacity:.75}75%{opacity:1}to{opacity:1}}#powered-fadeIn{-webkit-animation:poweredFadeIn 8s ease-in;animation:poweredFadeIn 8s ease-in}@-webkit-keyframes poweredFadeIn{0%{opacity:0}33%{opacity:.25}66%{opacity:.5}83%{opacity:1}to{opacity:1}}@keyframes poweredFadeIn{0%{opacity:0}33%{opacity:.25}66%{opacity:.5}83%{opacity:1}to{opacity:1}}#landing-button-fadeIn{-webkit-animation:landingFadeIn 8s linear;animation:landingFadeIn 8s linear}@-webkit-keyframes landingFadeIn{0%{opacity:0}75%{opacity:0}to{opacity:1}}@keyframes landingFadeIn{0%{opacity:0}75%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation:fadeIn 2s linear;animation:fadeIn 2s linear}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}