@import "/assets/stylesheets/pretty.css";

.art-a {
	text-decoration: none;
}
art- {
	display: flex;
	flex-direction: column;
	border-radius: 0 1.75rem;
	box-shadow: 0 0 3px 1px var(--drop-clr);
	overflow: clip;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--plt-background) 70%, var(--plt-accent)),
		color-mix(in srgb, var(--plt-background) 52%, var(--plt-accent))
	);

	--half-clr: color-mix(in srgb, var(--plt-accent) 80%, var(--plt-background));
	border: solid 0.15rem var(--half-clr);

	& artinf- {
		padding: 1rem;

		& img {
			margin: auto;
			max-width: 25rem;
			margin-bottom: 1rem;
			border: solid 1px var(--drop-clr);
		}

		& artmeta- {
			display: block;
			color: color-mix(in srgb, var(--plt-ink) 70%, var(--plt-background));
			margin-bottom: 0.3rem;
		}

		& artsynopsis- {
			color: var(--plt-ink);
		}
	}

	& arttitle- {
		font-size: var(--text-xl);
		font-weight: 600;
		text-shadow: 0 0 3px rgba(20, 20, 20, 0.6);
		background: var(--half-clr);
		color: var(--clr-bone);
		padding: 0.1rem 1.5rem 0.3rem 0.9rem;
	}
}
@media screen and (max-width: 32rem) {
	art- {
		border-radius: 0 1.25rem;

		& arttitle- {
			font-size: var(--text-lg);
			padding: 0.1rem 1.1rem 0.3rem 0.4rem;
		}

		& artinf- {
			padding: 0.75rem;

			& artmeta- {
				font-size: var(--text-sm);
			}

			& img {
				max-width: unset;
				width: 100%;
			}
		}
	}
}

main > sectmain- {
	overflow: auto;
	gap: 1rem;
	display: flex;
	flex-direction: column
}