@import url("look.css");

html {
	background-image: unset;
	background-color: black;
}

h1,
h2,
h3,
h4 {
	margin-block: 1rem;
}

#links-home {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: min(90%, 65ch);
	margin-inline: auto;

	.latest {
		width: 100%;
		margin-top: 10dvh;

		.cover {
			background-image: url(/m/images/covers/cover-have-i-ever-done-anything.webp);
			background-size: cover;
			content: " ";
			aspect-ratio: 1/1;
			width: 100%;
			height: auto;
			border-radius: 0.5rem;
			position: relative;
			padding: 0;
			margin-bottom: 2rem;

			h2 {
				width: 90%;
				margin-inline: auto;
				padding: 1rem;
				background: rgba(0, 0, 0, 0.33);
				position: absolute;
				bottom: 1rem;
				left: 0;
				right: 0;
				text-shadow: 0 2px 1px rgba(0, 0, 0, 0.66);
				border-radius: 0.5rem;
			}
		}
	}

	.past {
		width: 100%;
		margin-block: 2rem 10dvh;
		border-top: 2px solid var(--link-main);
		padding-top: 4rem;

		.cover {
			background-image: url(/m/images/covers/soporose.webp);
			background-size: cover;
			content: " ";
			aspect-ratio: 1/1;
			width: 100%;
			height: auto;
			border-radius: 0.5rem;
			position: relative;
			padding: 0;
			margin-bottom: 2rem;

			h2 {
				width: 90%;
				margin-inline: auto;
				padding: 1rem;
				background: rgba(0, 0, 0, 0.33);
				position: absolute;
				bottom: 1rem;
				left: 0;
				right: 0;
				text-shadow: 0 2px 1px rgba(0, 0, 0, 0.66);
				border-radius: 0.5rem;
			}
		}
	}

	.coming-soon {
		width: 100%;
		margin-block: 2rem;
		border-top: 2px solid var(--link-main);
		padding-top: 4rem;

		.cover {
			background-image: url(/m/images/covers/cover-the-softest.webp);
			background-size: cover;
			content: " ";
			aspect-ratio: 1/1;
			width: 100%;
			height: auto;
			border-radius: 0.5rem;
			position: relative;
			padding: 0;
			margin-bottom: 2rem;

			h2 {
				width: 90%;
				margin-inline: auto;
				padding: 1rem;
				background: rgba(0, 0, 0, 0.33);
				position: absolute;
				bottom: 1rem;
				left: 0;
				right: 0;
				text-shadow: 0 2px 1px rgba(0, 0, 0, 0.66);
				border-radius: 0.5rem;
			}
		}

		p {
			font-size: clamp(3rem, 10dvw, 6rem);
			text-shadow: 0 2px 1px rgba(0, 0, 0, 0.66);
		}
	}

	h2 {
		font-size: clamp(0.5rem, 5dvw, 2rem);
		width: 100%;

		span {
			color: white;
			display: block;
		}
	}

	.logo {
		max-width: 75px;
		margin-inline: auto;
	}

	.streaming-box {
		width: 100%;
		border-radius: 0.5rem;
	}

	.flex-column {
		align-items: center;
		justify-content: center;
	}

	.flex-row {
		width: 100%;
		gap: 0;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;

		& .logo-area {
			align-self: center;
			min-width: 33%;
			flex-grow: 1;
		}

		& .button-container {
			min-width: 66%;
			flex-grow: 2;
		}

		& .button {
			display: block;
			outline: 1px solid var(--link-main);
			border-radius: 0.5rem;
			padding: 1rem 1.5rem;
			width: 80%;
			text-align: center;
			margin-inline: auto;
			color: var(--link-main);
			text-decoration: none;
			box-shadow: 0 5px 0 var(--link-main);

			&:hover {
				background: var(--link-main);
				color: black;
				box-shadow: 0 0 0 10px var(--link-main);
				transition:
					250ms ease-in background,
					250ms ease-in color,
					250ms ease-in-out box-shadow;
			}
		}

	}
}

footer {
	margin-bottom: 10dvh;
	a[href] {
		text-decoration: none;
		color: white;
		&:hover {
			color: var(--link-main)
		}
	}
}