:root {
	--projects-button-width: 20%;
	--projects-button-height: calc(70vh - var(--header-height));
}

body {
	overflow: hidden;
}

#Buttons {
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;

	height: 100%;
	width: 100%;
}

#Buttons a {
	width: var(--projects-button-width);
	margin-right: 2vh;
}

#Buttons .project-block {
	overflow: hidden;
	display: block;
	height: var(--projects-button-height);
	width: 100%;

	border: 1px solid rgba(255,255,255, .1);
}

#Buttons .project-block .project-background {
	position:  absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-position: center center;
	background-size: cover;

	transition: width .15s ease-out,
				height .15s ease-out,
				top .15s ease-out,
				left .15s ease-out,
				filter .15s ease-out;

	filter: brightness(0.3) blur(.6vh);
}

#Buttons .project-block:hover .project-background {
	top: -10%;
	left: -10%;
	width: 120%;
	height: 120%;
	filter: brightness(1);
}

#Buttons .project-block .project-background.sunset {
	background-image: url('/contents/projects/index/images/projects_bg_sunset.png');
}
#Buttons .project-block .project-background.tmt {
	background-image: url('/contents/projects/index/images/projects_bg_tmt.png');
}

#Buttons .project-block .project-title {
	display: block;
	position: absolute;
	bottom: 0;
	left: 7vh;

	font-weight: bold;
	font-size: 7vh;
	line-height: 7vh;
	padding: 0 2vh;

	transform-origin: bottom left;
	transform: rotate(-90deg);

	transition: left .15s ease-out,
				top .15s ease-out;
}

#Buttons .project-block:hover .project-title {
	left: -7vh;
}

#Buttons .project-block .project-subtitle {
	display: block;
	position: absolute;
	font-size: 50%;
	padding-left: var(--scale);
	color: rgba(255,255,255, .3);
}








@media screen and (max-aspect-ratio: 1/1) {
	:root {
		--projects-button-width: calc(100vw - var(--scale)*4);
		--projects-button-height: calc(var(--scale) * 16);
	}

	#Buttons {
		display: flex;
		flex-direction: column;
		position: absolute;
		justify-content: center;
		align-items: center;
	}

	#Buttons a {
		margin-right: 0;
		margin-bottom: calc(var(--scale)*2);
	}

	#Buttons .project-block .project-title {
		left: 0;
		top: 0;
		width: auto;
		transform: none;

		font-family: inherit;
		font-size: calc(var(--scale) * 6);
		line-height: calc(var(--scale) * 12);
		padding: 0 calc(var(--scale) * 3);
	}

	#Buttons .project-block .project-subtitle {
		top: calc(var(--scale) * 5);
		padding-left: 0;
	}

	#Buttons .project-block:hover .project-title {
		left: 0;
		top: calc(0px - var(--projects-button-height));
	}

	#Buttons .project-block .project-background {
		height: 300%;
		top: -100%;
	}
	#Buttons .project-block:hover .project-background {
		height: 300%;
		top: -100%;
	}
}