@import url('https://fonts.googleapis.com/css?family=Merienda+One&display=swap');

html, body {
	height: 100vh;
	margin: 0;
}

body {
	color: #ddd;
	background-color: #303030;
	background: 
		linear-gradient(
			180deg, 
			rgba(53,53,53,1) 0%, 
			rgba(36,36,36,1) 30%, 
			rgba(16,16,16,1) 100%
	);
	background-attachment: fixed;

	text-align: center;
	font-family: 'Merienda One', cursive, sans-serif;
	font-size: 1.5em;
}

h1 {
	user-select: none;
	margin-top: 0;
	padding-top: .5em;
}

a {
	color: inherit;
	text-decoration: none;
}

div.title {
	margin-top: .5em;
	font-weight: bold;
}

div.artist {
	opacity: .8;
}

div.cover {
	width: 480px;
	height: 480px;
	display: inline-block;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: .5em;
}

div.cover div.play {
	width: 100%;
	height: 100%;
	background-image: url('https://peshigome.jp/music/play.png');
	background-size: auto 25%;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity .125s;
}

div.cover:hover div.play {
	opacity: 1;
	transition: opacity .25s;
}

div.iframe {
	width: 600px;
	height: 338px;
	display: none;
}

div.iframe div.close {
	width: 40px;
	height: 40px;
    margin-top: -20px;
    margin-bottom: -20px;
    margin-right: -20px;
	float: right;
	background-image: url('https://peshigome.jp/music/close.png');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
    float: right;
    position: sticky;
    transition: all .125s;
}

div.iframe div.close:hover {
	width: 50px;
	height: 50px;
    margin-top: -25px;
    margin-bottom: -25px;
    margin-right: -25px;
    transition: all .125s;
}

iframe {
	width: 100%;
	height: 100%;
}

a.footer {
	user-select: none;
	display: block;
	margin-top: 4.5em;
	font-size: .75em;
	opacity: .5;
	background-image: url('https://peshigome.jp/music/favicon.png');
	background-size: auto 2em;
	background-repeat: no-repeat;
	background-position: top center;
	padding-top: 2.5em;
}