@charset "UTF-8";

#topImg{
	background-image: url("./comics.jpg");
}

#head{
	margin: auto;
}

@media screen and (min-width: 769px) {

	#head img{
		width: 35vw;
		min-width: 500px;
	
	}
	
	#body{
		text-align: center;
		margin-top: 5vh;
	}
	
	#content-panel{
	    display: grid;
		grid-template-columns: repeat(auto-fit, 600px);
		grid-template-rows: 1fr 1fr;
		justify-content: center;
		grid-gap: 50px;
	}
	
	#content-panel div{
		width: 30vw;
		min-width: 600px;
	}
	
	#content-1{
		grid-row: 1 / 3;
		margin: auto;
		text-align: center;
		vertical-align: center;
	}
	
	#body #content-1 img{
		width: 70%;
	}
	
	
	#content-2{
		margin: auto;
		vertical-align: middle;
	}
	
	
	#content-panel div .read-button{
		width: 30%;
	}
	
	#body img{
		width: 100%;	
	}
}

@media screen and (max-width: 768px) {
	#head img{
		width: 80vw;
	}
	
	#body{
		text-align: center;
		margin-top: 5vh;
		padding-bottom: 15vh;		
	}
		
	#body #content-1 img{
		width: 70%;
	}
		
	#content-panel div .read-button{
		width: 30%;
	}
	
	#body img{
		width: 100%;	
	}
}