@charset "UTF-8";

#content-wrapper {
	min-height: 90vh;
}

article {
	width: 90%;
	max-width: 600px;
	box-sizing: border-box;
	padding: 10px 20px 50px 20px;
	margin: 0 auto 80px auto;
	border: 1px solid #782f40;
	border-radius: 12px;
}

article h1 {
	font-family: 'merriweather';
}

h3 {
	margin: 45px 0 8px 0;
}

h4 {
	margin: 30px 0 8px 0;
}

ul {
	margin-top: 0;
}

img {
	margin: 0 auto 0 auto;
	max-width: 100%;
}

.talk {
	margin: 20px;
}

@media only screen and (min-width: 1260px) {
	#content-wrapper {
		width: 800px;
		margin: 120px auto 0 auto;
	}

	.frame-image {
		position: fixed;
		z-index: -1;
		top: 0;
		bottom: 0;
		width: calc((100% - 800px) / 2)
	}

	#frame-left {
		background-position: left top;
		background-image: url(../img/frame_left.jpg);
		left: 0;
		background-color: grey;
	}

	#frame-right {
		background-position: left top;
		background-image: url(../img/frame_right.jpg);
		right: 0;
		background-color: grey;
	}
}

@media only screen and (min-width: 800px) and (max-width: 1259px) {
	.frame-image {
		display: none !important;
	}

	#content-wrapper {
		margin: 220px auto 80px auto;
		width: 90%;
		max-width: 800px;
	}
}

@media only screen and (max-width: 799px) {
	.frame-image {
		display: none !important;
	}

	#content-wrapper {
		margin: 220px auto 80px auto;
		width: 90%;
		max-width: 800px;
	}
}