body{
	margin: 0;
	padding: 0;
	background: #262626;
}
nav{
	margin-left:10%;
	padding:5px;
	position: fixed;
	display: flex;
	font-size: 1em;
	top:0;
	background: #111111;
	text-align: center;
	box-sizing: border-box;
	box-shadow:0 5px 10px rgba(34,34,34,0.8);

	z-index:1;
}
nav a{
	position: relative;
	color:#fff;
	text-decoration: none;
	/* padding:10px 20px; */
}

a{text-decoration: none;}
a:link,
a:visited{
	color:orange;
}
a:hover,
a:active{
	color:blue;
}
section{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 60%;
	width: 80vw;
	background: #000;
	box-shadow:0 25px 30px rgba(0, 0, 0, .5);
	display:flex;
}
.content{
	width: calc(50% - 50px);
	height: 100%;
	background: #000;
	box-sizing: border-box;
}
.content p{
position: absolute;
top:0;
left:0;
width:40%;
padding:0 0 0 20px;
font-size:15px;
color:white;
}
.content h2{
	position: absolute;
	top:70%;
	left:50%;
	width:100%;
	transform:translate(-70%,-50%);	
	font-size:2.5vw;
	/* text-transform: uppercase; */
	text-align: center;
	color:#fff;
	padding:auto;
	z-index:20;
	/* transform:rotate(-10deg); */

}
.links ul{
	position: absolute;
	width:40%;
	top:35%;
	font-size:15px;
	text-decoration: none;
}


.imageBox{
	width: calc(50% + 50px);
	height: 100%;
	background: #000;
	box-sizing: border-box;
	-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
	background-image:url(img/novels.jpg);
	background-size:cover;
}
@media (max-width: 400px){
	.imageBox{
		width:50%;
		-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 15% 100%);
		clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
		background-position:-120px 0;
	}
	.content{
		width: 50%;
	}	
	.content p{
		font-size:10px;
		}
	.content h2{
		font-size:5.5vw;
	}
		
	.links ul{
		position: absolute;
		padding-left:20px;
		width:40%;
		top:35%;
		font-size:15px;
		text-decoration: none;
	}
	
}