:not(:defined) {
    display: none;
}
* {
    box-sizing: border-box;
    scrollbar-gutter: stable both-sides;
}

:root {
    font-family: monospace;
}

body {
    margin: 0;
    background: linear-gradient(to left, #222, #333);
    background-attachment: fixed;
    @media (hover) {
	&:has(header:hover) main {
	    filter: grayscale(0.5) blur(4px);
	}
    }
}

ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    list-style-type: "";
}

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100vw;
    height: 10rem;
    margin: 0;
    background: #ffffff0f;
    backdrop-filter: blur(2px) grayscale(0.8);
    position: fixed;
    top: 0;
    z-index: 2;
    transition: all 400ms 200ms;

    @media (hover) {
	&:hover {
	    height: 16rem;
	}
    }
    h1 {
	display: block;
	color: white;
	padding: 1rem 2rem;
    }
    ul {
	container-type: size;
	container-name: headerView;
	flex-grow: 1;
	flex-wrap: nowrap;
	gap: 20px;
	height: 100%;
	overflow-y: hidden;
	overflow-x: auto;

	scrollbar-width: thin;
	scroll-snap-type: y mandatory;
	scroll-snap-type: y mandatory;
	padding: 2rem 1rem;
	margin-right: 2rem;
    }
    gradient-card {
	scroll-snap-align: start;
    }
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: filter 400ms;
    padding-bottom: 8rem;

    ul {
	counter-reset: cards;
	container-name: mainView;
	margin: 14rem 2rem 8rem 2rem;
	padding: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 50px;
	row-gap: 100px;
	justify-content: center;

	gradient-card, color-card {
	    counter-increment: cards;
	    &::before {
		position: absolute;
		right: 2rem;
		top: -2rem;
		font-size: 1.4rem;
		@media (width < 60rem) {
		    font-size: 1rem;
		}
		font-weight: bolder;
		color: white;
		z-index: 0;
		transition: all 400ms;
		content: counter(cards) " ⬎";
	    }
	    @media (hover) {
		&:hover::before {
		    font-size: 2rem;
		    text-shadow: 0px 0px 8px papayawhip;
		    top: -2.8rem;
		}
	    }
	}
	@media (hover) {
	    &:has(:where(gradient-card:hover, color-card:hover)) :is(gradient-card, color-card):not(:hover) {
		filter: grayscale(0.5) blur(4px);
	    }
	}
    }
}

a:has(> img) {
    cursor: zoom-in;
}