* {
	box-sizing: border-box;
}

:root {
	--fonts: star, gaegu-r, arial;
}

html {
	margin: 0px;
	padding: 0px;
	scrollbar-color: #dfada8 #e9deac;
}

body {
	background: url("assets/bg/2.png");
	background-size: cover;
	font-family: var(--fonts);
	margin: 0px;
	font-size: 17px;
	word-break: keep-all;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: gaegu-b;
	color: #9d8b7a;
}

b {
	text-shadow: 1px 1px 1px #dfada8;
	font-family: gaegu-b, var(--fonts);
}

i {
	text-shadow: 1px 1px 1px #c9d3cb;
}

mark {
	background: #f7efbd;
	color: rosybrown;
}

a {
	color: #765823;
	text-shadow: 1px 1px 1px white;
	text-decoration: wavy underline;
}

a:hover {
	text-decoration: underline;
}

#wrapper {
	display: grid;
	grid-template-areas:
		"filler-1 logo logo filler-2"
		"filler-1 notebook notebook filler-2";
	grid-template-rows: 100px 650px;
	grid-template-columns: 14% 36% 36% 14%;
	max-width: 1460px;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 50px;
}

#logo {
	grid-area: logo;
	text-align: center;
	overflow: visible;
	z-index: 10;
}

#logo img {
	position: relative;
	max-width: 600px;
	top: -100px;
	pointer-events: none;
}

#filler-1 {
	grid-area: filler-1;
	box-shadow: -5px 5px 3px #b19d97;
}

#filler-2 {
	grid-area: filler-2;
	box-shadow: 5px 5px 3px #b19d97;
}

#filler-1,
#filler-2 {
	position: relative;
	border-radius: 10px;
	background-image: url("assets/bg/notepad-paper.png");
	margin: 40px 15px;
	top: 40px;
	text-align: center;
	padding: 5px;
	padding-top: 50px;
}

.filler-inner {
	overflow: auto;
	height: 100%;
}

#filler-1::before,
#filler-2::before {
	content: url("assets/bg/spiral.png");
	position: absolute;
	top: -3%;
	left: 6%;
}

/*notebook*/

#notebook {
	grid-area: notebook;
	background: url("assets/pages/notebook-cover.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	display: flex;
	padding: 30px;
}

#tab1 {
	flex: 2%;
}

#tab2 {
	flex: 2%;
}

#notebook-pages {
	flex: 90%;
	display: grid;
}

.wrapper {
	display: flex;
}

.page {
	display: inline-flex;
	width: 49.5%;
	vertical-align: top;
	height: 600px;
	margin-right: 63px;
	overflow: hidden;
}

.page.right {
	margin: 0px;
}

.inner {
	margin: 10px;
	padding: 5px;
	width: 100%;
	height: 97%;
	overflow: auto;
}

#tab1 button,
#tab2 button {
	display: block;
	font-family: var(--fonts);
	font-size: 15px;
	border: none;
	text-orientation: mixed;
	margin: 23px 0px;
	height: 100px;
	width: 30px;
	transition-duration: 0.5s;
}

#tab1 button:hover,
#tab2 button:hover {
	width: 40px;
}

#tab1 button:focus,
#tab2 button:focus {
	width: 40px;
	outline: none;
	filter: saturate(3);
}

#tab1 button {
	padding-right: -5px;
	background: url(assets/tab/2.png);
	background-size: 105px;
	writing-mode: vertical-lr;
	writing-mode: sideways-lr;
	float: right;
	border-right: none;
}

#tab2 button {
	background: url(assets/tab/2-reverse.png);
	background-size: 105px;
	background-position: right;
	writing-mode: vertical-lr;
	float: left;
	border-left: none;
}

#mobile {
	display: none;
	text-align: center;
}

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

	#tab1 button:hover,
	#tab2 button:hover {
		width: 33px;
	}

	#tab1 button:focus,
	#tab2 button:focus {
		width: 33px;
	}

	#tab1 button,
	#tab2 button {
		margin: 15px 0px;
	}
}

@media only screen and (max-width: 1250px) {
	#notebook {
		background-size: 840px;
	}

	#tab1,
	#tab2 {
		margin-top: 40px;
	}
}

@media only screen and (max-width: 1130px) {
	#notebook {
		background-size: 760px;
	}

	.page,
	.page.right {
		height: 490px;
		margin-top: 50px;
	}

	#tab1 button,
	#tab2 button {
		margin: 10px 0px;
	}

	#tab1,
	#tab2 {
		margin-top: 50px;
	}

	#logo img {
		position: relative;
		max-width: 600px;
		top: -80px;
		pointer-events: none;
	}
}

@media only screen and (max-width: 1080px) {
	#wrapper {
		display: block;
		max-width: 1460px;
		margin: auto;
		margin-top: 0px;
		margin-bottom: 50px;
	}

	.page,
	.page.right {
		height: 570px;
		margin-top: 0px;
	}

	#notebook {
		background-size: contain;
		background-position: top;
		height: 100%;
	}

	#tab1,
	#tab2 {
		margin-top: 0px;
	}

	#tab1 button,
	#tab2 button {
		margin: 23px 0px;
	}

	#tab1 button:hover,
	#tab2 button:hover {
		width: 37px;
	}

	#tab1 button:focus,
	#tab2 button:focus {
		width: 37px;
	}

	#logo {
		margin-top: -30px;
		height: 210px;
	}

	#logo img {
		width: 100%;
		top: 0px;
	}

	#filler-1,
	#filler-2 {
		display: inline-block;
		width: 39%;
		vertical-align: top;
		margin: 15px 50px;
	}

	#filler-1::before,
	#filler-2::before {
		top: -0.8%;
		left: 30%;
	}

}

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

	#filler-1,
	#filler-2 {
		margin: 15px 40px;
	}

	#filler-1::before,
	#filler-2::before {
		top: -0.6%;
		left: 28%;
	}
}

@media only screen and (max-width: 915px) {
	#notebook {
		background-size: 900px;
	}
}

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

	#filler-1,
	#filler-2 {
		margin: 15px 30px;
	}

	#filler-1::before,
	#filler-2::before {
		top: -0.6%;
		left: 25%;
	}
}

@media only screen and (max-width: 450px) {
	#mobile {
		display: block;
	}

	#filler-1,
	#filler-2 {
		display: block;
		margin: auto;
		margin-top: 25px;
		width: 80%;
		padding: 20px;
	}

	#filler-1::before,
	#filler-2::before {
		content: none;
	}

}