@import url('variables.css');
@import url('typography.css');
@import url('hero.css');
@import url('navigation.css');
@import url('currently.css');
@import url('cv.css');
@import url('cursor.css');

html {
	background-color: var(--primary-background);
	color: var(--primary-text);
}

html, body {
	margin: 0;
	padding: 0;
}

a, a:link, a:visited {
	color: var(--secondary-light);
	text-decoration: none;
}

a:hover::after {
	bottom: -2px;
    left: 4px;
    position: relative;
	display: inline-block;
	animation: appear-from-left 0.3s ease-in-out;
	content: " ↗";
}

@keyframes appear-from-left {
	from {
		opacity: 0;
		transform: translateX(-100%);
	}
	50% {
		opacity: 0.2;
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.util-grid-2-m1 {
	padding-left: 32px;
	padding-right: 32px;
	padding-top: 64px;
	padding-bottom: 64px;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 650px) {
	.util-grid-2-m1 {
		grid-template-columns: 1fr;
	}
}

.util-lr-cp {
	padding-left: 32px;
	padding-right: 32px;
}

figure {
	margin: 0;
	display: grid;
    grid-template-rows: 1fr 100px;
    gap: 18px;
}

.util-gap-l {
	gap: 64px;
}

@media screen and (max-width: 800px) {
	.util-gap-l {
		gap: 32px;
	}
}

.util-mt-l {
	padding-top: 22px;
}

body {
	padding-bottom: 64px;
}

summary {
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

summary::after {
	font-weight: 900;
	content: " ↓";
}

details[open] summary::after {
	font-weight: 900;
	content: " ↑";
}

details[open] > *:not(summary) {
	border-left: 2px dashed var(--secondary-light);
	padding-left: 16px;
	cursor: auto;
}

details[open] > ul {
	padding-left: 24px;
}

@media screen and (max-width: 800px) {
	summary {
		text-decoration: underline;
		text-decoration-color: var(--secondary-light);
		text-decoration-style: dashed;
		text-decoration-thickness: 2px;
	}
}

img {
	max-width: 100%;
}

pre {
	white-space: pre-wrap;
}