@font-face{
	font-family: Roboto;
	src: url('/fonts/roboto-regular.woff2');
	font-display: swap;
}

div#container{
	background-color: #E5D3B7;
	background-image: url('/img/ashwood.jpg');
	background-repeat: repeat;
	max-height: calc(100% - 83px);
	@media only screen and (max-width: 768px){
		max-height: calc(100% - 96px);
	}
}

/* The screen (or content) of the device */
div#container > div#story > div#storytext {
	font-family: Roboto;
	padding: 16px;
	width: 736px;
	max-width: calc(100% - 32px);
	min-height: calc(100vh - 128px);
	background: white;
	background: none;
	color: #ffffff;
	font-weight: 700;
	background: linear-gradient(225deg, rgba(88,88,88,1) 0%, rgba(37,37,37,1) 100%);
	overflow: auto;
	h1{
		font-size: 24px;
		margin: -16px -16px 0 -16px;
		padding: 16px;
		background-color: #333;
		font-weight: 500;
		text-align: center;
	}
	hr{
		border: 0;
		height: 0;
		width: 0;
	}
}

@media only screen and (min-width: 769px){
	/* The device with borders */
	div#container > div#story {
		position: relative;
		width: 768px;
		max-width: 100%;
		max-height: calc(100% - 96px);
		margin: auto;
		border: 16px black solid;
		border-top-width: 60px;
		border-bottom-width: 60px;
		border-radius: 36px;
		background: rgb(88,88,88);
		background: linear-gradient(225deg, rgba(88,88,88,1) 0%, rgba(37,37,37,1) 100%);
	}

	/* The horizontal line on the top of the device */
	div#container > div#story:before {
		content: '';
		display: block;
		width: 60px;
		height: 5px;
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #333;
		border-radius: 10px;
	}

	/* The circle on the bottom of the device */
	div#container > div#story:after {
		content: '';
		display: block;
		width: 35px;
		height: 35px;
		position: absolute;
		left: 50%;
		bottom: -65px;
		transform: translate(-50%, -50%);
		background: #333;
		border-radius: 50%;
		background: #ffffff;
	}

	/* The screen (or content) of the device */
	div#container > div#story > div#storytext {
		padding: 16px;
		width: 736px;
		max-width: calc(100% - 32px);
		height: auto;
		background: white;
		background: none;
		color: #ffffff;
		font-weight: 700;
		h1{
			font-size: 24px;
			margin: -16px -16px 0 -16px;
			padding: 16px;
			background-color: #333;
			font-weight: 500;
			text-align: center;
		}
		hr{
			border: 0;
			height: 0;
			width: 0;
		}
	}
}