@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Garlic Shrimp Demo';
    src: url('GarlicShrimpDemoRegular.eot');
    src: url('GarlicShrimpDemoRegular.eot?#iefix') format('embedded-opentype'),
        url('GarlicShrimpDemoRegular.woff2') format('woff2'),
        url('GarlicShrimpDemoRegular.woff') format('woff'),
        url('GarlicShrimpDemoRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Subtitle Font */

@font-face {
    font-family: 'Gange DEMO';
    src: url('GangeDEMO-Regular.eot');
    src: url('GangeDEMO-Regular.eot?#iefix') format('embedded-opentype'),
        url('GangeDEMO-Regular.woff2') format('woff2'),
        url('GangeDEMO-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Body Font */

@font-face {
    font-family: 'Soda Land';
    src: url('SodaLand.eot');
    src: url('SodaLand.eot?#iefix') format('embedded-opentype'),
        url('SodaLand.woff2') format('woff2'),
        url('SodaLand.woff') format('woff'),
        url('SodaLand.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Font for Quotes */

/* Font Bank */


html {
	background-size: 100% 100vh;
}

body {
	background-image: url("../images/background_image_06.png");
	background-size: 100% 100vh;
	background-position: fixed;
	background-repeat: no-repeat;
	background-color: beige;
}

header img {
	width: 20%;
	height: auto;
	display: flex;
	margin: 45px auto;
	padding-top: .5em;
	object-fit: contain;
	float: center;
	padding-right: 5em;
}
/* Notice logo */


/* Return to Sender:START */
.back-button-01 {
	position: absolute;
	/* background-color: red; */
	min-height: 50.5px;
	width: 280px;
	right: 3.5em;
	top: 5em;
}
	.box-01 {
		/* background-color: blue; */
		min-height: 50.5px;
		width: 280px;
	}
	.back-home-button-01 {
		background-image: url("../images/return_to_sender_01.svg");
		background-size: cover;
		position: center;
	}
		a:hover .back-home-button-01 {
			/* box-shadow: 0px 0px 20px 5px black; */
			border-radius: 10.5px;
			transform: scale(1.1);
			transform: rotate(5deg);
			mix-blend-mode: multiply;
		}
		a:active .back-home-button-01 {
			transform: rotate(5deg);
			mix-blend-mode: color-burn;
		}
/* Return to Sender Button:END */


/* LEFT Cover Image:START */
.container-01 {
	min-height: 600px;
	width: 400px;
	/* background-color: blue; */
	position: absolute;
	top: 8em;
	left: 4em;
}
.container-box-01 {
	min-height: 600px;
	width: 400px;
	/* background-color: red; */
}
.cover-image-left-01 {
	background-image: url("../images/comics_cover_image_01.png");
	background-size: cover;
	background-position: center;
}
/* LEFT Cover Image:END */

/* RIGHT Cover Image 01:START */
.container-02 {
	min-height: 370px;
	width: 315px;
	/* background-color: blue; */
	position: absolute;
	top: 11em;
	right: 9em;
}
.container-box-02 {
	min-height: 370px;
	width: 315px;
	/* background-color: red; */
}
.cover-image-right-01 {
	background-image: url("../images/comics_cover_image_02.png");
	background-size: cover;
	background-position: center;
}
/* RIGHT Cover Image 01:END */

/* RIGHT Cover Image 02:START */
.container-03 {
	min-height: 320px;
	width: 260px;
	/* background-color: blue; */
	position: absolute;
	top: 24em;
	right: 5em;
}
.container-box-03 {
	min-height: 320px;
	width: 260px;
	/* background-color: red; */
}
.cover-image-right-02 {
	background-image: url("../images/comics_cover_image_03.png");
	background-size: cover;
	background-position: center;
}
/* RIGHT Cover Image 02:END */

.paragraph-01 {
	margin-top: -3em;
}

.paragraph-01 h1 {
	font-family: 'Garlic Shrimp Demo';
	color: #16AFB9;
	letter-spacing: 1px;
	text-align: center;
	font-size: 30px;
	margin-bottom: 0em;
}

.date-reference-01 {
	font-family: 'Gange DEMO';
	color: #0F82A8;
	font-size: 20px;
	text-align: center;
	margin-bottom: 0em;
	margin-top: 0em;
}

.paragraph-01 p {
	font-family: 'Gange DEMO';
	font-size: 1.15rem;
	position: absolute;
	z-index: 1000;
	min-height: 100px;
	width: 400px;
	left: 28em;
	text-align: center;
	display: block;
	padding-top: 1em;
}

.webtoons-link {
	font-family: 'Soda Land';
	font-size: 25px;
	text-align: center;
	color: #F07168;
	margin-top: 13.5em;
	letter-spacing: 1px;
}
.arrow-01 {
	font-size: 25px;
	padding-right: 2px;
}
	.webtoons-link a {
		text-decoration: none;
		color: inherit;
	}
		.webtoons-link a:hover {
			color: #16AFB9;
		}
		.webtoons-link a:active {
			color: #0F82A8;
		}