body {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin: 0;

	 > header {
		background: #0c0c0c;
		color: #cccccc;
		height: 60px;
		text-align: center;
		width: 100vw;
	}

	> main {
		box-shadow: inset 0px 5px 30px 5px rgba(0, 0, 0, 0.4);
		height: Calc(100svh - 90px);
		width: 100vw;

		> section.album {
            height: 100%;
			overflow: hidden;
			width: 100vw;

			> .pages {
				height: 100%;
				width: 3000vw;

				> .page {
					aspect-ratio: 1 / 1;
					box-shadow: 1px 3px 12px 0px rgba(0, 0, 0, 0.4);
					height: Calc(100svh - 290px);
					float: left;
					margin: 100px 0;

					figure {
						height: 100%;
						margin: 0;
						overflow: hidden;

						img {
							object-fit: cover;
							width: 100%;
						}
					}
					div.detail {
						color: #cccccc;
						padding: 16px;
						> h2 {
							margin: 0;
						}
						> p {
							font-size: 14px;
							line-height: 250%;
							margin: 14px;
						}
						> video {
							aspect-ratio: 16 / 9;
							margin-top: 30px;
							width: 100%;
						}
						> audio {
							margin-top: 30px;
							max-width: 100%;
						}
					}
				}
				> .page:nth-child(odd){
					background: #0c0c0c;
				}
				> .page:nth-child(even){
					background: #0d0d0d;
				}

				> button.prev,
				> button.next {
					border: 0;
					background: transparent;
					cursor: pointer;
					float: left;
					font-size: 40px;
					font-weight: 900;
					height: Calc(100svh - 90px);
					text-align: center;
					width: Calc(50vw - Calc(50svh + 145px));
				}
				> button.prev { padding-left: 150px;}
				> button.next { padding-right: 150px;}
				> button.sub_btn {
					display: none;
					width:0;
				}
			}
		}
	}
	> footer {
		background: #0c0c0c;
		color: #cccccc;
		font-size: 11px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		width: 100vw;
	}
}
@media (900px <= width < 1601px){
	.pages{
		> .page {
			height: Calc(50vw - 100px) !important;
			margin: Calc(50svh - Calc(25vw - 55px) - 45px) 0 !important;
			width: Calc(50vw - 100px) !important;
		}
		> button.prev, > button.next {
			padding: 0 !important;
			width: 100px !important;
		}
	}
}
@media (600px <= width < 900px){
	.pages {
		height: 100svh !important;

		> .index {
			display: none !important;
		}
		> .page {
			height: auto !important;
			margin: Calc(50svh - Calc(50vw - 60px)) 0 !important;
			width: Calc(100vw - 200px) !important;
		}
		> button.prev, > button.next {
			padding: 0 !important;
			width: 100px !important;
		}
		> button.sub_btn:not(.index) {
			display: block !important;
			width: 100px !important;
		}
	}
}
@media (1px <= width < 600px){
	.pages {
		height: 100svh !important;

		> .index {
			display: none !important;
		}
		> .page {
			height: auto !important;
			margin: Calc(50svh - Calc(50vw - 10px)) 0 !important;
			width: Calc(100vw - 100px) !important;
			.detail {
				> h2 {
					font-size: 18px !important;
				}
				> p {
					font-size: 12px !important;
					margin: 6px !important;
				}
			}
		}
		> button.prev, > button.next {
			font-size: 30px !important;
			padding: 0 !important;
			width: 50px !important;
		}
		> button.sub_btn:not(.index) {
			display: block !important;
			width: 50px !important;
		}
	}
}