html {background-color:#222;color:#fff;font-size:62.5%;height:100%;}
body {box-sizing:border-box;font-family:'merienda',serif;font-size:2rem;min-height:100%;margin:0;overflow-y:scroll;padding-bottom:10rem;text-align:center;}

header {padding:5rem 0 0;}
header h1, header #author {color:#555;font-size:1.625rem;}
header #info {font-weight:bold;margin-bottom:2rem;padding:0 10vw;text-align:center;}

label, #newstory {color:#08f !important;cursor:pointer;display:inline-block;font-size:1.625rem;margin-bottom:0.25rem;padding:0 0.25rem;text-decoration:none;vertical-align:bottom;}
#load {display:none;}

main {line-height:1.5em;margin:0 auto;max-width:60rem;padding:4rem;}
main a {color:#08f;text-decoration:none;}
main hr {border:none;text-align:center;}
main hr:before {content:'~';font-size:2rem;}

ul.choices {height:12rem;margin:0;padding:0;position:relative;}
ul.choices li {background-color:#fff;border-radius:100%;display:block;font-weight:bold;width:2rem;height:2rem;position:absolute;}
ul.choices li:after,
ul.choices li div {position:absolute;left:1rem;width:20rem;margin-left:-10rem;}
ul.choices li:after {color:#fff;content:attr(text);line-height:2rem;}
ul.choices li div {border:2px solid #333;border-radius:1rem;display:flex;gap:0.5rem;padding:0.5rem;}

ul.choices li[data-input="2"] {top:7rem;left:calc(50% - 1rem);}
ul.choices li[data-input="2"]:after,
ul.choices li[data-input="2"] div {text-align:center;top:2.8rem;}
ul.choices li[data-input="4"] {top:5rem;left:calc(50% - 3rem);}
ul.choices li[data-input="4"]:after,
ul.choices li[data-input="4"] div {text-align:right;left:-11rem;}
ul.choices li[data-input="6"] {top:5rem;left:calc(50% + 1rem);}
ul.choices li[data-input="6"]:after,
ul.choices li[data-input="6"] div {text-align:left;left:13rem;}
ul.choices li[data-input="8"] {top:3rem;left:calc(50% - 1rem);}
ul.choices li[data-input="8"]:after,
ul.choices li[data-input="8"] div {text-align:center;top:-2.8rem;}

#eoc {color:#888;text-align:center;}


article {margin-bottom:7.5rem;}
article input, article textarea, article select {appearance:none;background-color:#333;border:none;border-radius:0.5rem;box-sizing:border-box;color:#fff;display:block;font-family:sans-serif;font-size:1.4rem;padding:0.5rem;text-align:center;width:100%;}
article input[readonly] {background-color:transparent;pointer-events:none;}
article a {display:block;}
article textarea {margin:0.5rem auto;min-height:12.5rem;resize:vertical;width:60rem;}
article ul.choices {height:19rem;}
article ul.choices li {background-color:transparent;}
ul.choices li div > * {width:10rem;}
ul.choices li[data-input="0"] {background-color:transparent;top:14.75rem;left:calc(50% - 1rem);}
ul.choices li[data-input="0"] div {text-align:left;left:1rem;}

article#global > input, article#global .columns input, article a input {margin:0 auto 0.5rem;max-width:60rem;}
article#global .choices {height:14rem;}
article#global .choices input {width:100%;}

.columns {display:flex;gap:0.5rem;margin:0 auto;max-width:60rem;}
.columns > div {flex:1;}

#newmessage, #save {background-color:#333;border-radius:0.5rem;color:#fff;display:inline-block;font-family:sans-serif;font-size:1.4rem;padding:1rem 0;text-decoration:none;width:15rem;}


body[mode="load"] main,
body[mode="edit"] main,
body:not([mode="edit"]) aside,
body > article,
body:not([mode="init"]) #file,
body:not([mode="edit"]) #editfunctions,
body[mode="init"] #info {display:none;}

footer ul.choices,
#eoc {opacity:0;transition:0.5s opacity;visibility:hidden;}

body[mode="input"] footer ul.choices,
body[mode="end"] #eoc {opacity:1;visibility:visible;}