@import url(/css/common/style.css);

:root {
	--color-sptf: #1ED761;
	--color-ytm:  #FF0000;
	--color-scld: #000000;
	--color-aplm: #FFFFFF;
}

/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/


/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

html,
body {
	width: 100%;
	height: 100%;
}

.container {
	display: flex;
	gap: 20px;

	height: 100%;

	padding: 20px;

	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#background,
#cover {
	background: linear-gradient(135deg, #feda75, #fa7e1e, #d62976, #962fbf);
	background-size: cover;
	background-position: center;
	transition: background 0.4s ease;
}

#background {
	z-index: -1;
	position: fixed;
	top: -40px;
	left: -40px;

	width: calc(100% + 80px);
	height: calc(100% + 80px);

	filter: blur(20px) brightness(0.6);
}

#cover {
	width: auto;
	height: 80vw;
	aspect-ratio: 1;

	max-width: 350px;
	max-height: 350px;

	border-radius: 15px;
	box-shadow: 0 0 20px #282828C8;
}

.info {
	width: 350px;
}

.info > * {
	width: 100%;
	margin-bottom: 4px;
}

#title,
#artist {
	height: 24px;

	color: #FFFFFF;
	font-weight: bold;
	font-size: 1rem;
}

#date {
	font-size: 0.85rem;
	color: #FFFFFF40;
}

/*--------------------------------------------------*/
/*	SERVICES
/*--------------------------------------------------*/

#services {
	display: flex;
	gap: 15px;
}

.btn {
	display: flex;

	width: 64px;
	height: 64px;

	border-radius: 50%;

	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;

	color: white;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

#services .btn {
	pointer-events: auto;
}

.btn#sptf {
	background-color: var(--color-sptf);
	background-image: url("/services/spotify.png");
	background-size: 95%;
}

.btn#ytm {
	background-color: var(--color-ytm);
	background-image: url("/services/yt-music.png");
	background-size: 100%;
}

.btn#scld {
	background-color: var(--color-scld);
	background-image: url("/services/soundcloud.png");
	background-size: 95%;
}

.btn#aplm {
	background-color: var(--color-aplm);
	background-image: url("/services/apple-music.png");
	background-size: 50%;
	background-position: 47.5% 45%;
}

/*--------------------------------------------------*/
/*	REDIRECT
/*--------------------------------------------------*/

#redirect {
	display: flex;
	align-items: center;
	gap: 12px;

	width: 310px;

	padding: 10px;
	border-radius: 5px;

	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(10px);

	transition: transform 0.2s ease, background 0.2s ease;
}

#redirect::after {
	z-index: 1;
	content: " ";
	position: absolute;
	top: 34px;
	right: 34px;

	width: 16px;
	height: 16px;

	filter: invert(1);
	background-image: url("/services/link.png");
	background-size: cover;
	background-position: center;
}

#redirect:hover {
	background: rgba(0,0,0,0.45);
}

#redirect .cover {
	position: relative;
	width: 64px;
	height: 64px;

	overflow: hidden;
	border-radius: 3px;
}

#redirect .cover img {
	width: 100%;
	object-fit: cover;
}

#redirect.other .cover img {
	position: absolute;
	width: 30px;
	border-radius: 3px;
}

#redirect.other .cover img:nth-child(1) {
	top: 0;
	left: 0;
}

#redirect.other .cover img:nth-child(2) {
	top: 0;
	right: 0;
}

#redirect.other .cover img:nth-child(3) {
	bottom: 0;
	left: 0;
}

#redirect.other .cover img:nth-child(4) {
	bottom: 0;
	right: 0;
}

#redirect .text {
	display: flex;

	flex-direction: column;
	justify-content: center;

	color: #FFFFFF;
	line-height: 18px;
	text-align: left;
}

#redirect .title {
	width: 200px;

	font-weight: 600;
	font-size: 0.95rem;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#redirect .subtitle {
	font-size: 0.75rem;
	opacity: 0.75;
}

/*--------------------------------------------------*/
/*	SHARE
/*--------------------------------------------------*/

#share {
	z-index: 1;
	position: absolute;
	top: 10px;
	right: 10px;

	width: 48px;
	height: 48px;

	border-radius: 24px;

	filter: invert(1);
	background-image: url("/services/share.png");
	background-size: 40%;
	background-position: 45% 50%;
}

#share:hover {
	background-color: rgba(255,255,255,0.35);
}

#share:focus {
	background-color: rgba(255,255,255,0.45);
}

/*--------------------------------------------------*/
/*	RESPONSIVE
/*--------------------------------------------------*/

@media screen and (orientation: portrait) and (min-width: 680px) {
	body {
		padding: 0 calc(50% - 175px);
	}
}

@media screen
  and (orientation: landscape)
  and (min-width: 740px)
  and (min-height: 390px)
  and (max-height: 740px) {

	body {
		padding: 0 calc(50% - 350px);
	}

	.container {
		padding-left: 350px !important;
	}

	.cover_container {
		position: absolute;
		top: 0;
		right: 50%;

		height: 100%;

		padding: 0 calc(50% - 350px);
	}

	.cover_container {
		margin-top: calc(50vh - 175px) !important;
	}
}

@media screen and (orientation: portrait) and (max-height: 680px),
       screen and (orientation: portrait) and (max-width: 400px),
       screen and (orientation: landscape) and (max-width: 740px),
       screen and (orientation: landscape) and (max-height: 390px) {
	.container {
		padding: 0 !important;

	}

	.cover_container {
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		padding: 20px;
		margin-top: 0 !important;
	}

	#cover {
		max-width: calc(100vw - 40px);
		max-height: calc(100vh - 40px);
	}

	.cover_container {
		display: none;
	}
}

@media screen and (orientation: portrait) and (max-width: 370px),
       screen and (orientation: landscape) and (max-height: 370px) {
	.cover_container {
		display: none;
	}
}

@media screen and (orientation: portrait) and (max-width: 300px),
	   screen and (orientation: landscape) and (max-height: 300px) {
	.container {
		scale: calc(min(100svh, 100svw) / 300px * .9);
	}
}