html { padding:0; margin:0; height:100%; width:100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { position: relative; display: flex; justify-content:center; padding:20px; margin:0; height:100%; width:100%; align-items:center; background-image:url(../images/body.jpg); background-repeat: repeat; background-size: contain; font-kerning: normal; letter-spacing:1rem; }
*, ::before, ::after { -webkit-box-sizing: inherit; box-sizing: inherit; }
body .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.45); backdrop-filter: blur(4px); z-index: 5; opacity:0; transition:all .2s ease-in-out; transition-delay:.1s; pointer-events:none; }
body.show .overlay { opacity:1; }
a { display:inline-block; color:inherit; text-decoration:none; }
body.show a { pointer-events:none; }

/* GENERAL */
.abs { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* LAYOUT */
.top { display:flex; justify-content:center; align-items:flex-end; width:100%; height:22%; }
.middle { display:flex; height:62%; }
.bottom { display:flex; justify-content:center; align-items:flex-start; padding-top:1%; width:100%; height:16%; }

.left { width:10%; height:100%; display:flex; }
.left > div { width:50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.center { flex:1;} 
.right { width:4%; height:100%; }

.main { width:100%; height:100%; display:grid; grid-template-columns:repeat(3, 33.3333%); grid-template-rows:repeat(2, 50%); }

/* IMAGE BUTTON */
.button-wrap { display:flex; justify-content:center; align-items:center; }
.button { display: flex; justify-content:center; align-items:center; padding:8%; position:relative; pointer-events:all; height: 100%; }
.button > div { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; z-index:100; }
.button .hover_wrap { line-height: 0; font-size: 0; }
.button .hover_wrap img { height:auto; }
.button > img { width:100%; height:auto; transform: scale(1.4); transition:transform .15s ease-in-out; }
.button.disabled { pointer-events:none; }

/* IMAGES */
body .overlay { background-color: rgba(0,0,0,.45); backdrop-filter: blur(4px); opacity:0; transition:all .2s ease-in-out; transition-delay:.1s; pointer-events:none; margin:5%; z-index: 10; }
#frame-wrap { position:relative; display:flex; flex-direction:column; width:100%; height:auto; max-width:1100px; aspect-ratio:4/3; }
#frame-top { background-image:url(../images/frame-x.png); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events:none; z-index:20; }
#frame-bottom { margin:8%; background-image:url(../images/texture.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; pointer-events:none; z-index:-1; }
#frame-picture { flex:1; margin:11% 12%; display: flex; flex-direction: column; }

/* TEXTS */
h1 { font-family: "Sorts Mill Goudy", serif; font-size: 312%; font-weight:300; color:#d30071; text-align: center; letter-spacing:1.12em; margin:0; margin-right: -1.12em; line-height:190%; text-shadow: 0 1px 0 rgb(153 98 127); transform:scale(1); transition:transform .2s ease-in-out; display: flex; margin-bottom: 1.5%; }
h1:hover { transform:scale(1.04); }
h1 span { display:block; font-size: 68%; letter-spacing:.94em; line-height:90%; margin-left: -.94%; }
.subtitle { font-family: "Sorts Mill Goudy"; font-size:180%; font-weight:300; color:#d30071; text-align: center; letter-spacing:1.2em; margin-right:-1.2em; line-height:200%; text-shadow: 0 1px 0 rgb(153 98 127); }
.performance { transform:rotateZ(90deg); font-family: "Audiowide", sans-serif; font-size: 180%; color: #888; font-weight: 400; letter-spacing:.6em; margin-top: 50%; margin-right: 25%; }
.presents { transform:rotateZ(-90deg); font-family: "Roboto", sans-serif; font-size: 145%; color: #666; font-weight: 400; font-style: italic; letter-spacing: 1.2em; margin-left: 20%; }
#copyright { font-family: "Roboto", sans-serif; position: absolute; z-index: 50; font-size: 14px; letter-spacing: normal; color: rgba(255,255,255,.6); bottom: -4px; right: 25px; left: 25px; text-align: end; }
#copyright > div { position: absolute; left: 0; right: 0; top: 0;  }
#copyright a:hover { color:#d00; }
#copyright span { white-space:pre; }

@media all and (max-width:1099px) {
	.button > img { transform: scale(1.2); }
}
@media all and (max-width:899px) {
	.button { padding:5%; }
	.button > img { max-width: 80%; max-height: 90%; }
	#copyright { font-size: 13px; }
}
@media all and (max-width:739px) {
	#copyright { left:15px; right:15px; }
	.button > img { transform: scale(1.4); }
	body { padding:40px 15px 60px 15px; }
	#frame-wrap { aspect-ratio:3/4; }
	#frame-top { background-image:url(../images/frame-y.png); }
	#frame-picture { margin:16% 14%; }
	.top { height:18%; }
	.middle { height:68%;}
	.bottom { height:14%; }
	.main { width:100%; height:100%; display:grid; grid-template-columns:repeat(2, 50%); grid-template-rows:repeat(3, 33.3333%); }
	h1 { margin-bottom: 4%; }
	body .overlay { margin:0; z-index: 80; position: fixed; }
}
@media all and (max-width:639px) {
	.bottom { padding-top:2.5%; }
	.button > img { transform: scale(1.2); }
	h1 { font-size: 480%; letter-spacing:.5em; margin-right: -.5em; line-height:190%; text-shadow: 0 1px 0 rgb(153 98 127); }
	h1 span { display:block; font-size:70%; letter-spacing:.4em; line-height:90%; margin-left: -.4%; }
	.subtitle { font-size: 340%; letter-spacing: .5em; margin-right: -.5em; }
	.presents { font-size: 210%; }
	.performance { font-size: 250%; }
}
@media all and (max-width:459px) {
	.button > img { transform: scale(1); }
}