@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap');

:root {
	--radius-size: 16px;

	--color-background: #444444;
	--color-asagi:      #80aba9;
	--color-youtube:    #ff6666;
	--color-niconico:   #aaaaaa;
	--color-soundcloud: #ffaa66;
}

html {
	width:  100%;
	height: 100%;
	scroll-behavior: smooth;
	overflow: hidden;
}

body {
	margin:  0;
	padding: 0;
	width:  100%;
	height: 100%;
	background-color: var( --color-asagi );

	transition: background 1.5s ease-in-out;

	font-family: 'Kiwi Maru', serif;
}

div {
	border: none;
}

#wrapper {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	justify-content: unset;
	align-items: center;
	box-sizing: border-box;

	overflow-x: auto;
/*	scroll-snap-type: x mandatory;*/

	padding-left:  2%;
	padding-right: 2%;

	width:  100%;
	height: 100%;
}

#player {
	position: absolute;
	box-sizing: border-box;
	width:  80%;
	height: 10%;
	z-index: 97;

	transform: translateZ( 0 );

	bottom: 2%;
	left:   50%;
	transform: translateX( -50% );

	border-radius: var( --radius-size );
	overflow: hidden;

	transition: all 0.1s ease-in;
}

#inducer {
	position: absolute;

	top:  0;
	left: 0;

	width: 100%;
	height: 100%;
	text-align: center;

	z-index: 98;

	color: rgba( 187, 187, 187, 1 );
	background-color: rgba( , , , 0.5 );
	-webkit-backdrop-filter:  blur( 4px );
	backdrop-filter:  blur( 4px );

	transition: color 0.1s ease-in, background-color 0.1s ease-in-out;
}

#inducer span {
	position: absolute;
	top:  50%;
	left: 50%;
	transform: translate( -50%, -50% );

	font-family: sans-serif;
	font-size: 1em;
	font-weight: 900;
}

@keyframes dispToNone {
	0% {
		visibility: visible;
	}
	100% {
		visibility: hidden;
	}
}

#player:hover #inducer {
	animation: dispToNone 0.2s ease-in forwards;
	background-color: rgba( , , , 0 );
	color: rgba( 187, 187, 187, 0 );
}

#player:hover {
	height: 30%;
	filter: drop-shadow( 8px 8px 8px rgba( 0, 0, 0, 0.4 ) );
}


.music_tile {
	position: relative;
	/*position: sticky;*/
	/*left: 2%;*/
	box-sizing: border-box;

	margin-left:  2%;
	margin-right: 2%;

	width:  90%;
	height: 70%;

	min-width: 90%;

	overflow: hidden;
	scroll-snap-align: center;

	/*background-color: var( --color-background );*/
	border-radius: var( --radius-size );

	filter: drop-shadow( 8px 8px 8px rgba( 0, 0, 0, 0.4 ) );
	transform: translateZ( 0 );
}

.music_tile img {
	object-fit: cover;

	width: 100%;
	height: 100%;
}

.music_title {
	position: absolute;
	top:  1em;
	left: 1em;

	font-size: 1.2em;
	color: white;
}

.share_button {
	position: absolute;
	width: 2em;
	top: 1em;
	right: 1em;

	filter: drop-shadow( 2px 2px 2px rgba( 0, 0, 0, 0.2 ) );
	transition: filter 0.3s ease-in-out;
}

.share_button:hover {
	filter: drop-shadow( 2px 2px 2px rgba( 0, 0, 4, 0.5 ) );
	transform: rotate( -8deg );
}

.share_button a {
	width:  100%;
	height: 100%;
}

.button_container {
	position: absolute;
	display: grid;

	width: 100%;
	height: 20%;

	top: 80%;

	/*background-color: var( --color-background );*/

	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: y n s;
}

.button {
	display: flex;
	justify-content: center;
	align-items: center;

	/*opacity: 0.5;*/
	/*backdrop-filter: blur( 24px );*/
}

.button a {
	display: flex;
	justify-content: center;
	align-items: center;

	width:  100%;
	height: 100%;

	color: white;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
}

.button img {
	width:  2em;
	height: auto;
}

.youtube {
	grid-area: "y";
	background-color: var( --color-youtube );
}
.niconico {
	grid-area: "n";
	background-color: var( --color-niconico );
}
.soundcloud {
	grid-area: "s";
	background-color: var( --color-soundcloud );
}