#frame,
main {
	background: var(--l-yellow);
	max-width: 700px;
	margin: auto;
	padding: 5px 10px 10px 10px;
	border: 4px dashed var(--l-brown);
	border-top: none;
	border-bottom: none;
}

h1 {
	text-align: center;
}

h2,
h3,
h4,
h5,
h6 {
	text-align: right;
}

h2 {
	text-align: left;
}

footer {
	padding: 10px;
	background: var(--soft-brown);
	color: var(--yellow);
	text-align: center;
	max-width: 700px;
	margin: auto;
	margin-bottom: 20px;
	border: 2px solid var(--yellow);
}

@media only screen and (max-width: 510px) {
	body {
		background: var(--l-yellow);
	}

	#frame, main {
		border: none;
		margin: auto;
	}
}

@media only screen and (max-width: 710px) {
	body {
		background: var(--l-yellow);
	}

	#frame, main {
		border: none;
		margin: auto;
	}

	footer {
		border: 0px;
		margin: auto;
		max-width: 100%;
	}

	@media only screen and (max-width: 600px) {

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-family: daydream, gaegu-b, var(--fonts);
			font-size: small;
			word-spacing: 10px;
			letter-spacing: 3px;
			line-height: normal;
			background: rgb(254, 234, 199);
			background: linear-gradient(61deg, rgba(254, 234, 199, 1) 0%, rgba(251, 181, 205, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke-width: 1px;
			-webkit-text-stroke-color: var(--l-brown);
		}
	}
}