/*** main.css - Main style of the homepage ***/

@font-face {
    font-family:'Pokemon Emerald Small';
    src: url('../fonts/Pokemon Emerald Small.eot');
	src: url('../fonts/Pokemon Emerald Small.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Pokemon Emerald Small.woff2') format('woff2'),
		url('../fonts/Pokemon Emerald Small.woff') format('woff'),
		url('../fonts/Pokemon Emerald Small.svg#Pokemon Emerald Small') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FC;
}

*, input, textarea {
	box-sizing: border-box;
}

body {
	background: black;
	background: #0a0a0a none;
	color: white;
	font-size: 27px;
	letter-spacing: 0.033em;
	text-align: center;
}
body, input {
	/*font-family: "Pokemon DP", Arial, sans-serif;*/
	font-family: "Pokemon Emerald Small", Arial, sans-serif;
}
a, a:visited {
	color: white;
	text-decoration: none;
	transition: all .3s;
}
a:hover {box-shadow: .33em 0 rgba(0,0,0,0.33) inset;}


#date {
	margin-top: 2rem;
	font-size: 18px;
}

#time {
	margin-top: -.15em;
	font-size: 96px;
}
#time > span {
	font-size: .5em;
	letter-spacing: -.01em;
	vertical-align: .08em;
}

#duckduckform {
	margin: auto;
	margin-top: 30px;
}
#duckduckform input {
	background: transparent;
	border: 1px solid transparent;
	border-bottom-color: white;
	color: white;
	font-size: 27px;
	letter-spacing: 0.033em;
	padding: 7px 3px;
	width: 100%;

	transition: all .2s;
}
#duckduckform input:focus {
	box-shadow: 0 -.5em #fff;
	border-color: white;
	padding-left: 1em;
}


.todolist {
	margin: auto;
	margin-top: 1em;
}
.todolist input {
	background: transparent;
	border: 1px solid transparent;
	border-bottom-color: white;
	color: white;
	font-size: 27px;
	letter-spacing: 0.033em;
	padding: 7px 3px;
	width: 100%;

	transition: all .2s;
}
.todolist input:focus {
	box-shadow: 0 -.5em #fff;
	border-color: white;
	padding-left: 1em;
}

.todolist__item {
	border: 1px solid white;
	margin-top: .85em;
}

.todolist__item_header {
	position: relative;

	background: white;
	color: black;
	font-size: .5em;
	padding-right: .5em;
	text-align: right;
}
	.todolist__item_close {
		cursor: pointer;
		user-select: none;
	}

.todolist__item_body {
	text-align: left;
	padding: .25em 1em;
}

/***** FOOTER *****/
footer {
	position: fixed;
	top: auto; right: 0; bottom: 0; left: 0;

	background: #0a0a0a;
	box-shadow: 0 0 .67em #0a0a0a;
	padding: .5em 1em;
	text-align: right;
	font-size: 18px;
}
/***** FOOTER : END *****/



/* main area + variants */

.main_area {
	position: relative;

	margin: 50px auto 0;
	text-align: left;
}

.main_area ul {
	position: absolute;

	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.main_area ul li {
	display: inline-block;
	text-align: center;
}

.main_area ul li .overlay {
	position: absolute;
	top: 0; right: 100%; bottom: 0; left: 0;

	height: 100%;
	overflow: hidden;
	text-align: left;

	transition: all .3s;
}
.main_area ul li:hover .overlay {right: 0;}

.main_area ul li .overlay a {display: block; padding-left: 20px;}
.main_area ul li .overlay a span {vertical-align: -21px;}

	/* nakamura shop variant */
	/* sizes */
	.nakamura_shop .todolist,
	.nakamura_shop #duckduckform {width: 572px;}
	.nakamura_shop .main_area {
		background: url('../img/backgrounds/noa6mdd3yb1qze3hdo1.gif') center center no-repeat;
		background-size: cover;
		height: 288px;
		margin-left: calc(50% - 250px + 36px); /* 50% - half background size + half of the icons li element */
		width: 500px;
	}
	.nakamura_shop ul {left: -72px; width: calc(100% + 72px);}
	.nakamura_shop li {height: 72px; width: 72px;}
	.nakamura_shop img {margin-top: 20px;} /* (li height - img height) / 2 */
	.nakamura_shop .overlay {margin-left: 72px;}
	.nakamura_shop .overlay a {height: 72px;}

	/* colors */
	.nakamura_shop .four_chan, .nakamura_shop .four_chan .overlay {background: #31c1e9;}
	.nakamura_shop .music, .nakamura_shop .music .overlay {background: #0280d0;}
	.nakamura_shop .weebs, .nakamura_shop .weebs .overlay {background: #096da1;}
	.nakamura_shop .general, .nakamura_shop .general .overlay {background: #094f6f;}
	/* nakamura shop variant : end */

	/* winter train station */
	/* sizes */
	.winter_train_station .todolist,
	.winter_train_station #duckduckform {width: 572px;}
	.winter_train_station .main_area {
		background: url('../img/backgrounds/oh8awjk7lA1qze3hdo1_r1.gif') center center no-repeat;
		background-size: cover;
		height: 288px;
		margin-left: calc(50% - 250px + 36px); /* 50% - half background size + half of the icons li element */
		width: 500px;
	}
	.winter_train_station ul {left: -72px; width: calc(100% + 72px);}
	.winter_train_station li {height: 72px; width: 72px;}
	.winter_train_station img {margin-top: 20px;} /* (li height - img height) / 2 */
	.winter_train_station .overlay {margin-left: 72px;}
	.winter_train_station .overlay a {height: 72px;}

	/* colors */
	.winter_train_station .four_chan, .winter_train_station .four_chan .overlay {background: #692429;}
	.winter_train_station .music, .winter_train_station .music .overlay {background: #ce7076;}
	.winter_train_station .weebs, .winter_train_station .weebs .overlay {background: #95c1b6;}
	.winter_train_station .general, .winter_train_station .general .overlay {background: #222e40;}
	/* winter train station : end */

	/* schoolgirls at the train station */
	/* sizes */
	.schoolgirls_at_the_train_station .todolist,
	.schoolgirls_at_the_train_station #duckduckform {width: 572px;}
	.schoolgirls_at_the_train_station .main_area {
		background: url('../img/backgrounds/osiqiwJB9b1qze3hdo1_r2.gif') center center no-repeat;
		background-size: cover;
		height: 288px;
		margin-left: calc(50% - 250px + 36px); /* 50% - half background size + half of the icons li element */
		width: 500px;
	}
	.schoolgirls_at_the_train_station ul {left: -72px; width: calc(100% + 72px);}
	.schoolgirls_at_the_train_station li {height: 72px; width: 72px;}
	.schoolgirls_at_the_train_station img {margin-top: 20px;} /* (li height - img height) / 2 */
	.schoolgirls_at_the_train_station .overlay {margin-left: 72px;}
	.schoolgirls_at_the_train_station .overlay a {height: 72px;}

	/* colors */
	.schoolgirls_at_the_train_station .four_chan, .schoolgirls_at_the_train_station .four_chan .overlay {background: #9cc1bc;}
	.schoolgirls_at_the_train_station .music, .schoolgirls_at_the_train_station .music .overlay {background: #374a64;}
	.schoolgirls_at_the_train_station .weebs, .schoolgirls_at_the_train_station .weebs .overlay {background: #2d626e;}
	.schoolgirls_at_the_train_station .general, .schoolgirls_at_the_train_station .general .overlay {background: #001c33;}
	/* schoolgirls at the train station : end */

	/* salarymen at the ramen store */
	/* sizes */
	.salarymen_at_the_ramen_store .todolist,
	.salarymen_at_the_ramen_store #duckduckform {width: 572px;}
	.salarymen_at_the_ramen_store .main_area {
		background: url('../img/backgrounds/nyt5immDdT1qze3hdo1.gif') center center no-repeat;
		background-size: cover;
		height: 288px;
		margin-left: calc(50% - 250px + 36px); /* 50% - half background size + half of the icons li element */
		width: 500px;
	}
	.salarymen_at_the_ramen_store ul {left: -72px; width: calc(100% + 72px);}
	.salarymen_at_the_ramen_store li {height: 72px; width: 72px;}
	.salarymen_at_the_ramen_store img {margin-top: 20px;} /* (li height - img height) / 2 */
	.salarymen_at_the_ramen_store .overlay {margin-left: 72px;}
	.salarymen_at_the_ramen_store .overlay a {height: 72px;}

	/* colors */
	.salarymen_at_the_ramen_store .four_chan, .salarymen_at_the_ramen_store .four_chan .overlay {background: #00419d;}
	.salarymen_at_the_ramen_store .music, .salarymen_at_the_ramen_store .music .overlay {background: #003953;}
	.salarymen_at_the_ramen_store .weebs, .salarymen_at_the_ramen_store .weebs .overlay {background: #5d1249;}
	.salarymen_at_the_ramen_store .general, .salarymen_at_the_ramen_store .general .overlay {background: #00233f;}
	/* salarymen at the ramen store : end */

	/* cat by the sakura */
	/* sizes */
	.cat_by_the_sakura .todolist,
	.cat_by_the_sakura #duckduckform {width: 572px;}
	.cat_by_the_sakura .main_area {
		background: url('../img/backgrounds/nm6j1ghB7C1qze3hdo1.gif') center center no-repeat;
		background-size: cover;
		height: 288px;
		margin-left: calc(50% - 250px + 36px); /* 50% - half background size + half of the icons li element */
		width: 500px;
	}
	.cat_by_the_sakura ul {left: -72px; width: calc(100% + 72px);}
	.cat_by_the_sakura li {height: 72px; width: 72px;}
	.cat_by_the_sakura img {margin-top: 20px;} /* (li height - img height) / 2 */
	.cat_by_the_sakura .overlay {margin-left: 72px;}
	.cat_by_the_sakura .overlay a {height: 72px;}

	/* colors */
	.cat_by_the_sakura .four_chan, .cat_by_the_sakura .four_chan .overlay {background: #f7ced9;}
	.cat_by_the_sakura .music, .cat_by_the_sakura .music .overlay {background: #caa8c7;}
	.cat_by_the_sakura .weebs, .cat_by_the_sakura .weebs .overlay {background: #256b8b;}
	.cat_by_the_sakura .general, .cat_by_the_sakura .general .overlay {background: #d4e5ca;}
	/* cat by the sakura : end */

	/* cats by the window, near the comfy kotatsu */
	/* sizes */
	.cats_by_the_window_near_the_comfy_kotatsu .todolist,
	.cats_by_the_window_near_the_comfy_kotatsu #duckduckform {width: 572px;}
	.cats_by_the_window_near_the_comfy_kotatsu .main_area {
		background: url('../img/backgrounds/otjfqziQrH1qze3hdo1.gif') center center no-repeat;
		background-size: cover;
		height: 288px;
		margin-left: calc(50% - 250px + 36px); /* 50% - half background size + half of the icons li element */
		width: 500px;
	}
	.cats_by_the_window_near_the_comfy_kotatsu ul {left: -72px; width: calc(100% + 72px);}
	.cats_by_the_window_near_the_comfy_kotatsu li {height: 72px; width: 72px;}
	.cats_by_the_window_near_the_comfy_kotatsu img {margin-top: 20px;} /* (li height - img height) / 2 */
	.cats_by_the_window_near_the_comfy_kotatsu .overlay {margin-left: 72px;}
	.cats_by_the_window_near_the_comfy_kotatsu .overlay a {height: 72px;}

	/* colors */
	.cats_by_the_window_near_the_comfy_kotatsu .four_chan, .cats_by_the_window_near_the_comfy_kotatsu .four_chan .overlay {background: #ac4557;}
	.cats_by_the_window_near_the_comfy_kotatsu .music, .cats_by_the_window_near_the_comfy_kotatsu .music .overlay {background: #21352e;}
	.cats_by_the_window_near_the_comfy_kotatsu .weebs, .cats_by_the_window_near_the_comfy_kotatsu .weebs .overlay {background: #0c1e3b;}
	.cats_by_the_window_near_the_comfy_kotatsu .general, .cats_by_the_window_near_the_comfy_kotatsu .general .overlay {background: #8395b6;}
	/* cats by the window, near the comfy kotatsu : end */