/* Fonts */

@font-face {
	font-family: "Roboto";
	font-weight: 100;
	src: url("../fonts/roboto-thin-webfont.woff2") format("woff2"), url("../fonts/roboto-thin-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 300;
	src: url("../fonts/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto-light-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 400;
	src: url("../fonts/roboto-regular-webfont.woff2") format("woff2"), url("../fonts/roboto-regular-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 500;
	src: url("../fonts/roboto-medium-webfont.woff2") format("woff2"), url("../fonts/roboto-medium-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 700;
	src: url("../fonts/roboto-bold-webfont.woff2") format("woff2"), url("../fonts/roboto-bold-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 900;
	src: url("../fonts/roboto-black-webfont.woff2") format("woff2"), url("../fonts/roboto-black-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 100;
	font-style: italic;
	src: url("../fonts/roboto-thinitalic-webfont.woff2") format("woff2"), url("../fonts/roboto-thinitalic-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 300;
	font-style: italic;
	src: url("../fonts/roboto-lightitalic-webfont.woff2") format("woff2"), url("../fonts/roboto-lightitalic-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 400;
	font-style: italic;
	src: url("../fonts/roboto-regularitalic-webfont.woff2") format("woff2"), url("../fonts/roboto-regularitalic-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 500;
	font-style: italic;
	src: url("../fonts/roboto-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/roboto-mediumitalic-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 700;
	font-style: italic;
	src: url("../fonts/roboto-bolditalic-webfont.woff2") format("woff2"), url("../fonts/roboto-bolditalic-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	font-weight: 900;
	font-style: italic;
	src: url("../fonts/roboto-blackitalic-webfont.woff2") format("woff2"), url("../fonts/roboto-blackitalic-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-variablefont_wght-webfont.woff2") format("woff2"), url("../fonts/figtree-variablefont_wght-webfont.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Figtree";
	font-style: italic;
	src: url("../fonts/figtree-italic-variablefont_wght-webfont.woff2") format("woff2"), url("../fonts/figtree-italic-variablefont_wght-webfont.woff") format("woff");
	font-display: swap;
}


/* Reset */

* {
	box-sizing: border-box;
}


/* Variables */

:root {
	--background-gradient: linear-gradient(to top right, hsla(180, 12%, 9%) 0%, hsla(180, 12%, 20%) 80%);
	--color-text-light: #fff;
	--color-text-dark: #111;
	--color-primary: green;
	--color-accent: rgb(255,139,0);

	--border-radius-xs: .3125rem;
	--border-radius-s: .625rem;

	--margin-section: 5vw;

	--spacing-xxs: .25rem;
	--spacing-xs: .5rem;
	--spacing-s: 1rem;
	--spacing-m: 2rem;
	--spacing-l: 4rem;
}

/* Main styles */

body {
	background: #111;
	font-family: Roboto, system-ui, sans-serif;
	min-height: 100svh;
	margin: 0;
	color: var(--color-text-light);
	display: grid;
	grid-template-rows: min-content 1fr min-content;
}

.aspect-16-9 {
	aspect-ratio: 16/9;
}

.aspect-dci-scope {
	aspect-ratio: 2.39/1;
}



/* Main text styles */

p {
    line-height: 1.6;
    margin: var(--spacing-s) 0;
    max-width: 640px;
}

h1 {
    color: var(--light-color);
    font-family: Figtree, Roboto, system-ui, sans-serif;
    font-style: oblique;
    font-weight: 300;
}

h2 {
    font-family: Figtree, Roboto, system-ui, sans-serif;
    font-weight: 400;
    font-size: 2rem;
}

h3 {
    font-family: Figtree, Roboto, system-ui, sans-serif;
    font-weight: 400;
    margin-top: var(--spacing-xs);
}


/* Buttons */

.button {
	--color: var(--color-text-light);
	display: inline-flex;
	align-items: center;
	color: var(--color);
	text-decoration: none;
	border-radius: var(--border-radius-s);
	padding-inline: .75rem;
	padding-block: .375rem;
	font-weight: 500;

	&.solid {
		color: #111;
		background-color: color-mix(in srgb, var(--color), transparent 10%);

		&:hover {
			background-color: color-mix(in srgb, var(--color), transparent 0%);
		}
	}

	&.outline {
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color), transparent 50%);

		&:hover {
			box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color), transparent 0%);
			background-color: transparent;
		}
	}

	&.glow {
		box-shadow: 0 0 3px color-mix(in srgb, var(--color), transparent 0%), 0 0 8px color-mix(in srgb, var(--color), transparent 40%), 0 0 16px color-mix(in srgb, var(--color), transparent 95%);
	}

	&.gradient {
		background: linear-gradient(135deg, var(--color-accent), rgb(150,43,0));
		box-shadow: 2px 2px 5px #0003;

		&:hover {
			box-shadow: 2px 2px 5px #0007;
		}

		& span, .icon {
			text-shadow: 1px 1px 3px #0005;
		}
	}

	&:hover {
		background-color: color-mix(in srgb, var(--color), transparent 95%);
	}

	& span {
		padding: var(--spacing-xs);
		pointer-events: none;
	}

	& .icon {
		pointer-events: none;
		padding: 0;
		font-size: 1.5em;
		width: 1.25rem;
		fill: currentColor;
		margin-inline: var(--spacing-xxs);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.button {
		transition: .2s;
	}
}


/* Navigation */

nav {
	padding-block: var(--spacing-s);
	padding-inline: var(--margin-section);
	height: 6rem;
	display: flex;
	justify-content: end;
	background-color: hsla(180, 12%, 15%);
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 9;
}

.logo {
	font-family: Figtree, Roboto, system-ui, sans-serif;
	margin-right: auto;
	color: #fff;
	text-decoration: none;

	& h1 {
		font-size: 1.75rem;
		font-style: oblique;
		margin: 0;
	}

	& span {

	}
}


/* Project Section with cards */

section.projects {
	margin-inline: var(--margin-section);
	margin-block: max(var(--margin-section), 3em);
}

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20em, 100%), 1fr));
	gap: var(--spacing-s);
	margin-block: 2em;
}

.project-card {
	--transition-duration: 350ms;
    --transition-delay: 0ms;
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: var(--spacing-s);
    align-items: start;
    transition: var(--transition-duration);
    overflow: hidden;
    border-radius: var(--border-radius-s);
    background-color: #333;
    color: var(--color-text-light);
    text-decoration: none;
}

.project-card h3 {
	position: absolute;
	z-index: -1;
}

.project-card img {
	width: calc(100% + var(--spacing-s) * 2);
    transition: var(--transition-duration) var(--transition-delay);
    margin: calc(var(--spacing-s) * -1);
    aspect-ratio: 16/9;
    display: block;
}

.project-card:hover img,
.project-card:focus-within img,
.project-card:active img {
    filter: brightness(1.3);
}

.project-card-content {
    display: flex;
    gap: var(--spacing-s);
    flex-direction: column;
    transition: var(--transition-duration);
}

/* Desktop cards animation (only with hover and no prefers-reduced-motion) */

@media (min-width: 500px) and (min-height: 500px) and (hover: hover) and (prefers-reduced-motion: no-preference) {

	.card-container {
		width: 100%;
		aspect-ratio: 16 / 9;
		display: grid;
		align-items: center;
	}

	.article-grid {
		align-items: center;
	}

    .project-card {
    	position: relative;
        overflow: hidden;
        height: fit-content;
    }

    .project-card:hover,
    .project-card:focus-within,
    .project-card:active {
        box-shadow: 1px 1px 3px #0009, 1px 1px 8px #0005;
        transform: scale(1.1);
        z-index: 3;
        transition: var(--transition-duration) var(--transition-delay);
    }

    .project-card-content {
        max-height: 0em;
    }

    .project-card:hover .project-card-content,
    .project-card:focus-within .project-card-content,
    .project-card:active .project-card-content {
        max-height: 10em;
        transition: var(--transition-duration) var(--transition-delay)
    }

}


/* Tags */

.tags {
    text-transform: uppercase;
    display: flex;
    gap: var(--spacing-m);
    margin-block-start: var(--spacing-m);
}

.tag {
    display: inline-flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.tag svg {
	font-size: 1.2rem;
    height: 1em;
    fill: currentColor;
}


/* Footer */

footer {
	padding-block: var(--spacing-s);
	background-color: #222;
	padding-inline: max(5vw, var(--spacing-s));
}

footer h2 {
	font-size: 1.5em;
}

.social-links {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.social-links a {
	color: #ffffff;
	text-decoration: none;
	display: grid;
	place-items: center;
	border-radius: var(--border-radius-s);
	width: 2.5em;
	aspect-ratio: 1/1;
}

.social-links a:hover {
	background-color: #fff5;
}

.social-links svg {
	fill: #ffffff;
	width: 1.25em;
}