/* Initiate fonts */

@font-face{
	font-family: Bearpaw;
	src: url(fonts/bearpaw.ttf);
}

@font-face{
	font-family: Digital;
	src: url(fonts/alarm-clock.ttf);
}

body{
	background-color:#fff;
	margin:0;
	padding:0;
}

article{
	position:relative;
}

.inline-svg{
	height:1em;
}

/* HEADER */

header{
	background-color:#000;
	font-family:Arial;
	text-align:center;
	color:#fff;
	
	padding:2em 0;
}

header p{
	margin:0;
}

header h1{
	margin:0;
}

header > h1 > img{
	max-width:100%;
}

#view-counter{
	margin:0;
	padding:.5em 0 0;
	
	background-color:black;
	color:red;
	font-size:2em;
	font-family:Digital;
	text-align:center;
	text-shadow:red 0 0 .5em;
}

nav{
	margin-top:1em;
}

nav a{
	color:#fff;
	font-size:2em;
	padding:.125em;
}

/* EMAIL */

#wake-up{
	width:100%;
	max-width:100%;
	margin:auto;
	padding:1em 0 2em;
	
	background-image:url('images/dresser.jpg');
	background-size:cover;
}

#phone{
	width:20em;
	max-width:100%;
	margin:auto;
	padding:3em 1em .5em;
	box-sizing:border-box;
	position:relative;
	
	background-color:#000;
	border-radius:2em;
	box-shadow:3px 3px 1em black;
	
	font-family:Arial;
}

#phone > div{
	background-color:#fff;
}

#phone-screen{
	width:100%;
	height:100%;
	position:relative;
}

div#phone-alert{
	position:absolute;
	height:100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgba(0,0,0,.4);
	
	opacity:0;
	pointer-events:none;
	transition:opacity .25s;
	
	z-index:1;
}

div#phone-alert.active{
	opacity:1;
	pointer-events:auto;
}

#phone-alert > div{
	width:80%;
	padding:1em;
	box-sizing:border-box;
	
	background-color:#fff;
	border-radius:1em;
}

#phone-alert button{
	display:block;
	padding:.5em;
	float:right;
	
	background:#cacaca;
	text-align:center;
	border:none;
	cursor:pointer;
}

div#phone-dead-alert{
	position:absolute;
	height:100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#151515;
	
	opacity:0;
	pointer-events:none;
	
	z-index:1;
	
	user-select:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
}

div#phone-dead-alert.active{
	opacity:1;
	pointer-events:auto;
}

#phone-dead-alert > div{
	width:80%;
	padding:1em;
	box-sizing:border-box;
	
	color:#fff;
	border-radius:1em;
	text-align:center;
}

#phone-header{
	width:100%;
	height:2em;
	padding:.25em;
	box-sizing:border-box;
	
	color:gray;
	font-size:1em;
	
	user-select:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
}

#phone-notifications{
	float:left;
}

#phone-info{
	float:right;
}

#phone-battery{
	width:1em;
	height:1em;
	display:inline-flex;
	justify-content:center;
	align-items:flex-end;
	
	/* I hate that I'm doing this, but it's not lining up correctly and seems more worth moving forward then trying to figure out exactly what's going on. */
	position:relative;
	top:.1em;
	
	background-image:url(images/battery.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:50% 100%;
}

#phone-charge{
	background-color:#808080;
	width:50%;
	height:70%;
	bottom:13%;
}

#email{
	clear:both;
}

#email p, #email h2{
	margin:0;
	box-sizing:border-box;
}

#email h2{
	padding:.25em;
}

#objprint-properties{
	height:20em;
	max-height:80vh;
	margin:auto;
	overflow:auto;
	padding:.5em;
	box-sizing:border-box;
	
	background-color:#fff;
	
	word-break:break-word;
}

#objprint-explanation{
	min-height:4em;
	background-color:#3f3f84;
	color:#fff;
}

/* Kind of like ET, except this is a button and this is also a confusing comment */
#phone-home{
	display:block;
	height:2rem;
	width:2rem;
	margin:1em auto;
	
	border-radius:50%;
	background-color:#000;
	
	cursor:pointer;
}

/* TABLE */
#table{
	width:100%;
	max-width:100%;
	margin:auto;
	padding:1em 0 2em;
	background-image:url('images/wood.jpg');
	/* box-shadow:5px 5px 3em black; */
}

#table h2{
	font-family: "Bearpaw";
	mix-blend-mode:soft-light;
	font-size:4em;
	text-align:center;
	color:#000;
	margin:.25em 0;
}

#plate{
	width:32em;
	height:32em;
	max-width:100vw;
	max-height:100vw;
	margin:auto;
	background-image:url('images/plate.svg');
	background-size:cover;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	box-shadow:black .25em .25em 3rem;
}

.ferret-crate{
	overflow:visible;
}

.ferret-search{
	display:none;
}

.ferret-item{
	width:7rem;
	height:7rem;
}

.ferret-pea{
	width:3rem;
	height:3rem;
	background-image:url("ferret-images/pea.svg");
}

#ferret{
	width:65%;
	height:65%;
	border-radius:50%;
	margin:auto;
	position:relative;
}

/* THEATER */

#theater{
	width:100%;
	/* height:40em; */
	padding:0 0 40em;
	box-sizing:border-box;
	
	background-image:url("images/theater.jpg");
	background-color:#000;
	background-size:80em;
	background-repeat:no-repeat;
	background-position:50% 0%;
}

#showpony{
	width:44em;
	max-width:100%;
	height:20.5em;
	margin:auto;
	position:relative;
	top:3.75em;
}

small{
	bottom:0;
	width:100%;
	position:absolute;
    padding:1em;
    box-sizing:border-box;
	
	background-color:#0000007a;
	color:#fff;
	text-align:center;
	font-family:Arial;
}