:root {
	/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--size--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
	--size-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
	--size-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
	--size-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
	--size-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
	--size-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
	--size-5: clamp(2.5rem, 2.4rem + 1.8vw, 3.83rem);

	/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,22,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4,3xs-s&g=s,l,xl,12 */
	--space-3xs: clamp(0.3125rem, 0.2908rem + 0.1087vw, 0.375rem);
	--space-2xs: clamp(0.5625rem, 0.519rem + 0.2174vw, 0.6875rem);
	--space-xs: clamp(0.875rem, 0.8098rem + 0.3261vw, 1.0625rem);
	--space-s: clamp(1.125rem, 1.038rem + 0.4348vw, 1.375rem);
	--space-m: clamp(1.6875rem, 1.5571rem + 0.6522vw, 2.0625rem);
	--space-l: clamp(2.25rem, 2.0761rem + 0.8696vw, 2.75rem);
	--space-xl: clamp(3.375rem, 3.1141rem + 1.3043vw, 4.125rem);
	--space-2xl: clamp(4.5rem, 4.1522rem + 1.7391vw, 5.5rem);

    --article-bg: rgba(255, 255, 255, 0.5);
    --article-bg-blur: rgba(150, 150, 150, 0.5);
    --article-bg-blur-active: rgba(150, 150, 150, 0.85);
}

@font-face {
	font-family: Jost;
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 100%;
	src: url('/2025/risorse/jost-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
	font-display: auto;
}

@font-face {
	font-family: Jost;
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	src: url('/2025/risorse/jost.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
	font-display: auto;
}

body {
	--primary: #355EFC;
	--color: black;
	--bg: white;
	color: var(--color);
	background: url('/2025/risorse/sfondo.svg'), var(--bg);
	background-repeat: no-repeat; /* Prevents the background from repeating */
	background-position: top left; /* Aligns the background image to the top */
	background-size: auto; /* Adjusts the size of the background image */
	font: var(--size-0) Jost, system-ui, sans-serif;
	margin: 0;
	min-height: 100vh;
	line-height: 1.5; 
}

@media (prefers-color-scheme: dark) {
	body {
		--primary: #DEE2FB;
		--color: white;
		--bg: #000B1C;
	}

	:root {
		--article-bg: rgba(0, 0, 0, 0.5);
		--article-bg-blur: rgba(100, 100, 100, 0.5);
		--article-bg-blur-active: rgba(100, 100, 100, 0.9);
	}
}

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

* {
	box-sizing: border-box;
}

::selection {
	background: #355EFC;
	color: white;
}

header {
	width: 100%;
}

header a {
	text-decoration: none;
}
header a:hover {
	text-decoration: underline;
}

aside {
	display: flex;
	flex-direction: column;
	position: fixed;
	bottom: 0;
	left: 0;
	font-weight: 800;
	font-size: var(--size-1);
	z-index: 3;
	text-align: center;
	padding: var(--space-s);

	a,
	label {
		text-decoration: none;
		color: var(--color);

		&:hover,
		&:focus {
			color: var(--primary);
		}
	}
}

#navToggle,
#navToggleBtn {
	display: none;
}

#mainNav {
	display: flex;
	flex-direction: column;
	text-align: left;
}

#navToggle:checked {
	&~#mainNav {
		right: var(--space-s);
		padding: var(--space-s);
	}
}

@media (max-width: 950px) {
	aside {
		left: unset;
		right: 0;
		gap: var(--space-s);
		flex-direction: row;
		font-size: var(--size-3);
	}

	#navToggleBtn {
		display: block;
	}

	#navToggleBtn {
		background: var(--bg);
		line-height: var(--space-xl);
		outline: 3px solid var(--color);
		padding: 0 var(--space-xs);

		span {
			visibility: hidden;
		}
	}

	#mainNav {
		position: fixed;
		inset: unset;
		flex-direction: column;
		bottom: calc(2 * var(--space-s) + var(--space-xl));
		right: -30rem;
		gap: var(--space-3xs);
		outline: 3px solid var(--color);
		text-align: right;
		background: var(--primary);

		a {
			color: var(--bg);
		}
	}
}

main:not(.wide),
.wide>p {
	&>* {
		margin: 1em auto;

		&:not(.wide) {
			width: clamp(15rem, calc(100vw - 2 * var(--space-2xs)), 50rem);
		}
	}
}

a {
	color: var(--primary);
}

small {
	font-size: 75%;
}

figure {
	margin: var(--space-s) auto;

	img {
		width: 100%;
		height: auto;
	}

}

h1,
h2,
h3,
h4,
h5 {
	line-height: 1;
}

h1 {
	text-align: center;
	font-size: var(--size-5);
	margin-bottom: 0;
}

h2 {
	font-size: var(--size-4);
}

h3 {
	font-size: var(--size-3);
}

h4 {
	font-size: var(--size-2);
}

code {
	line-break: anywhere;
}

video {
	width: 100%;
	border: none;
}

footer {
	margin-top: var(--space-xl);
	border-top: solid 2px var(--color);
	background: var(--bg);
	font-size: var(--size--1);
	padding: var(--space-s) 0;

	.footer-block {
		width: clamp(15rem, calc(100vw - 2 * var(--space-2xs)), 50rem);
		margin: 0 auto 1em;

		&:first-child {
			padding-top: var(--space-m);
		}
	}
}

.flow {
	width: clamp(15rem, 94vw, 50rem);
	margin: 1em auto;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,
			minmax(clamp(16rem, 33vw, 26rem), 1fr));
	gap: var(--space-m);
	margin: var(--space-m) var(--space-s) !important;

	article {
		background: var(--bg);
	}

	dl {
		padding: 0 var(--space-2xs) var(--space-2xs);
	}

	dt,
	dd {
		display: inline;
		margin: 0;
	}

	dt {
		font-weight: 800;

		&::after {
			content: ': ';
		}
	}
}

.flex {
	display: flex;
	justify-content: center;
	gap: var(--space-s);
	flex-wrap: wrap;
}

.center {
	text-align: center;
}

.box,
.module {
	padding: var(--space-s);
	border: 3px solid var(--color);

	h2,
	h3 {
		text-align: center;
		margin: 0 0 var(--space-xs);
	}
}

.button,
button {
	text-decoration: none;
	text-align: center;
	font-weight: 800;
	font-size: var(--size-1);
	background: var(--primary);
	color: var(--bg);
	border: none;
	padding: var(--space-3xs) var(--space-s);
	box-shadow: var(--space-3xs) var(--space-3xs) 0 var(--color);

	&:hover {
		box-shadow: none;
	}
}

#logo {
	width: 10em;
	height: auto;
}

.responsive-img {
	width: 100%;
	height: auto;
}

article {
    background-color: var(--article-bg);
    padding: 1em;
    border-radius: 15px;
    transition: background-color 0.3 ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 50px var(--article-bg-blur);
}

/* Hover effect, only if you have a mouse */
article:hover {
	box-shadow: 0 4px 50px var(--article-bg-blur-active);
}

article + article {
	margin-bottom: 1em;
}

blockquote {
	border-left: 5px solid black;
    transition: border-left 0.3s ease;
}

blockquote:hover {
    border-left: 5px solid rgba(200, 200, 200, 0.2);
}


@media (max-width: 400px) {
	h2 {
		font-size: var(--size-1);
	}
}