html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
@font-face {
    font-family:'Montserrat';
    src:url('Montserrat.woff2');
}
@font-face {
    font-family:'Indie Flower';
    src:url('Indie Flower.woff2');
}

html{
	height:100vh;
}
body{
	background:url(../images/bg1.jpg) center center no-repeat;
	background-size:cover;
	transition:1s ease background;
}
body, input{
	font-family: 'Montserrat';
}
h1, h2, p, #publish, #new-word{
	font-family:'Indie Flower';
}
h1{
	text-align:center;
}
h2{
	text-align:center;
	padding:10px 0;
}
p{
	line-height:48px;
}
input{
	box-sizing:border-box;
	width:100%;
	border:0;
	background:rgba(255, 255, 255, 0.7);
	padding:15px;
	font-size:19px;
}
input, .button{
	border-radius:4px;
}
.padding-x{
	padding-left:10px;
	padding-right:10px;
}
.margin-bottom{
	margin-bottom:20px;
}
.hide{
	transform:scale(0.5) translateY(-100px);
	opacity:0;
	z-index:-1;
}
.text-center{
	text-align:center;
}
.button{
	padding:13px 0;
	border:2px solid #fff;
	text-align:center;
	margin-bottom:15px;
}
#title{
	background:rgba(128,98,100,0.6);
	font-size:45px;
	margin-top:100px;
	padding:5px 0;
}
#intro-text{
	background:rgba(120,90,120,0.6);
	padding:15px;
	margin-top:5px;
	font-size:14px;
}
#intro, #room, #bottom-button{
	color:#fff;
}
#notice{
	background:rgba(0,0,0,0.7);
	color:#fff;
	position:absolute;
	top:0;
	left:0;
	width:calc(100% - 20px);
	padding:15px 10px;
	z-index:1;
	text-align:center;
	display:none;
}
#join-button{
	transition:0.5s ease background;
}
.step{
	transition:0.5s ease all;
	position:absolute;
	bottom:49px;
	width:calc(100% - 20px);
}
.back{
	position:absolute;
	top:10px;
	left:10px;
	font-size:30px;
	display:none;
}
#share-code{
	font-size:34px;
	padding:10px 0;
}
/*---- ROOM ----*/
#room{
	display:none;
	text-shadow:1px 1px 1px #000;
}
#room-inner{
	height:calc(100vh - 158px);
	overflow-y:auto;
}
#story-title, #story-in-progress{	
	font-size:23px;
}
#story-title{
	background:rgba(0,0,0,0.8);
	padding:15px 0;
}
#story-input-div{
	position:fixed;
	bottom:0;
	padding:10px 0;
	background:rgba(0,0,0,0.8);
	width:100%;
}
#whose-turn{
	color:red;
	transition:0.5s ease color;
	padding:3px 0 13px 0;
}
#new-word{
	display:none;
	position:fixed;
	top:100px;
	left:50%;
	transform:translateX(-50%);
	padding:20px;
	font-size:40px;
	border-radius:8px;
	background:#fff;
	color:#162437;
	border:3px solid #162437;
	z-index:1;
}
#words-remaining-div, #end-sentence{
	position:fixed;
	bottom:118px;
	font-size:14px;
}
#words-remaining-div{
	left:10px;
}
#end-sentence{
	right:10px;
	border:2px solid #fff;
	border-radius:3px;
	padding:4px 10px;
	transition:0.1s ease all;
}
#end-sentence:active{
	color:#82390d;
	border:2px solid #82390d;
}
/*---- BOTTOM BUTTONS ----*/
#bottom-button{
	position:fixed;
	bottom:0;
	width:100%;
	text-align:center;
}
.fa-home, .fa-book{
	background:rgba(0,0,0,0.7);
	padding:12px 0;
	width:50%;
	display:block;
	float:left;
	font-size:25px;
}
.bottom-button-selected{
	background:rgba(0,0,0,0.9);
}
/*---- STORIES ----*/
#publish{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100vh - 49px);
	overflow-y:auto;
	background:#eee;
	display:none;
}
.publish-title, .publish-authors{
	padding:10px;
}
.publish-title{
	text-align:center;
	font-size:34px;
	color:#fff;
	background:url(../images/bg1.jpg) center center no-repeat;
	background-size:cover;
}
.publish-authors, .publish-ts{
	color:#888;
	font-size:14px;
}
.publish-authors{
	padding-bottom:10px;
	text-align:center;
}
.publish-story{
	background:#fff;
	margin:10px;
}
.publish-content{
	display:inline;
	border-bottom:1px solid #eee;
	line-height:32px;
}
.publish-ts{
	text-align:right;
	padding:5px 0;
}