*{
  margin:0;
  padding:0;
  border:0;
  outline:none;
  font-weight:inherit;
  text-decoration:none;
  font-family:inherit;
  font-style:normal;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  background-color:transparent;
}
a, label, button, input[type=submit]{
  cursor:pointer;
}
html{
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size:14px;
  background-color:#fff;
  color:#999;
}
body{
  text-align:center;
  overflow-x:hidden;
}

#mainBox{
  width:100%;
  min-height:100vh;
  padding:0px 10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-sizing:border-box;
}

#mainBox>*{
  margin-bottom:10px;
}
#promptOutput{  order:1; flex-grow:1; }
#shareLinks{    order:2; flex-grow:1; }
h1{             order:3; }
#wordTypes{     order:4; }
#links{         order:5; }

#promptOutput{
  font-size:48px;
  line-height:58px;
  padding-top:1em;
  margin:10px;
  color:#000;
  opacity:1;
  text-shadow:0px 3px 10px #ccc;
}
#promptOutput:before{
  content:"\201c";
}
#promptOutput:after{
  content:"\201d";
}


.links,
#wordTypes{
  font-size:0;
}
.links li,
#wordTypes li{
  font-size:1rem;
  margin:2px;
  display:inline-block;
}
.links a{
  text-decoration:underline;
}
#wordTypes input,
#navToggler{
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0.01;
}
label,
.links a{
  display:block;
  line-height:1em;
  padding:10px 15px;
  border-radius:5px;
  background-color:rgba(0,0,0,0);
  transition:background-color 0.2s;
  -webkit-transition:background-color 0.2s;
}
.links a:hover,
input:checked+label{
  background-color:rgba(0,0,0,0.07);
}
input+label:hover{
  text-decoration:underline;
}

nav{
  color:#444;
  background-color:#fff;
  text-align:center;
}
nav ul{
  list-style:none;
}
nav h3{
  line-height:36px;
}
nav label,
nav input,
nav textarea{
  display:block;
  border-radius:5px;
  width:100%;
  overflow:hidden;
  box-sizing:border-box;
  color:#aaa;
  transition:color 0.2s, height 0.2s, background-color 0.2s;
  -webkit-transition:color 0.2s, height 0.2s, background-color 0.2s;
}
nav input,
nav textarea{
  margin-bottom:10px;
  padding:5px;
}
nav input,
nav textarea:focus{
  background-color:#eee;
}
nav label{
  cursor:text;
  border:none;
  margin:0;
  padding:0;
  line-height:20px;
}
nav textarea{
  padding-top:0;
  resize:none;
  height:22px;
}
nav input,
nav textarea:focus{
  color:#000;
}
nav textarea:focus{
  overflow-y:scroll;
  height:100px;
  resize:vertical;
}
nav input[type=submit]{
  color:#444;
}
nav input[type=submit]:hover{
  background-color:#ddd;
}


.button{
  display:inline-block;
  width:auto;
  align-self:center;
  cursor:pointer;
  border-radius:24px;
  line-height:24px;
  padding-left:20px;
  padding-right:20px;
  padding-top:12px;
  height:48px;
  box-shadow:inset 0px -2px 3px 2px #b00, 0px 1px 3px 0px #333;
  background-color:#f00;
  color:#fdd;
  text-shadow:0px -1px 0 #baa;
  box-sizing:border-box;
  transition:background-color 0.2s, box-shadow 0.1s, padding-top 0.1s;
  -webkit-transition:background-color 0.2s, box-shadow 0.1s, padding-top 0.1s;
}
.button a{
  position:relative;
  z-index:2;
}
.button:hover{
  background-color:#f44;
  text-shadow:0px -1px 0 #cbb;
  box-shadow:inset 0px -2px 3px 2px #b33, 0px 1px 3px 0px #333;
}
.button:active{
  box-shadow:inset 0px 5px 3px 2px #b33, 0px 0px 3px 0px #333;
  padding-top:16px;
}

#navTrigger{
  width:40px;
  height:100%;
  position:fixed;
  top:0px;
  right:0px;
  border:0;
  border-radius:0;
  margin:0;
  padding:0;
  z-index:2000;
  background-color:#f00;
  opacity:1;
}
#navTrigger span{
  display:block;
  position:absolute;
  font-size:24px;
  line-height:40px;
  color:#fff;
  transform:rotateZ(90deg);
  top:7em;
  right:-2px;
  transform-origin:100% 0%;
  letter-spacing:2px;
  font-weight:bold;
  white-space:nowrap;
}

html,body{
  position:relative;
  height:auto;
}
#mainBox{
  border-style:solid;
  border-color:transparent;
  border-right-width:40px;
  min-width:320px;
  transition:border-right-width 0.2s;
  -webkit-transition:border-right-width 0.2s;
}
nav{
  min-height:100%;
  width:300px;
  padding:10px;
  padding-right:50px;
  box-sizing:border-box;
  position:absolute;
  top:0px;
  right:-300px;
  z-index:1000;
  box-sizing:border-box;
  right:-300px;
  transition:right 0.2s;
  -webkit-transition:right 0.2s;
}
#navToggler:checked+#navTrigger+#mainBox{
  border-right-width:300px;
}
#navToggler:checked+#navTrigger+#mainBox+nav{
  right:0px;
}

@media (max-height: 540px){
  h1{             order:2; }
  #wordTypes{     order:3; }
  #shareLinks{    order:4; }
}
@media (max-width: 640px){
  #promptOutput{ flex-grow: 0; }
  #shareLinks  { flex-grow: 0; }
  #promptOutput{
    margin-left:0;
    margin-right:0;
    font-size:32px;
    line-height:36px;
  }
  .button,
  .button:hover,
  .button:active{
    text-shadow:none;
    font-weight:bold;
  }
  nav{
    padding:10px;
    width:280px;
  }
  #navTrigger{
    z-index:500;
  }
  #navToggler:checked+#navTrigger{
    width:100%;
    opacity:0;
  }
  #navToggler:checked+#navTrigger+#mainBox{
    border-right-width:40px;
  }
  #navToggler:checked+#navTrigger+#mainBox+nav{
    box-shadow:0px 0px 50px 1px #000;
  }
}

a.tiles{
  display:inline-block;
  padding:0;
  font-size:0px;
}
.tiles>span{
  display:inline-block;
  color:#222;
  background-color:#f3f3f3;
  border:1px solid #ddd;
  line-height:34px;
  font-family: "Andale Mono", monospace;
  font-size:12px;
  padding:0 1px;
}
.tiles>span:not(:first-child){
  border-left-color:#fff;
}
.tiles .t{
  color:#808;
}