:root {
			--dark: hsl(0, 0%, 0%, 100%);
			--light: hsl(42, 31%, 94%, 100%);
			--red: hsl(0, 70%, 51%, 100%);
			--red-dark: hsl(0, 67%, 38%, 100%);
			--gray: hsl(0, 0%, 75%, 100%);
			--gray-dark: hsl(0, 0%, 50%, 100%);

			--ink-soft: hsl(0, 0%, 18%);
			--paper: hsl(42, 31%, 97%);
			--line: hsl(0, 0%, 0%, 14%);
			--shadow: 0 18px 45px hsl(0, 0%, 0%, 10%);

			--space-s: 0.4rem;
			--space-m: 0.6rem;
			--space-l: 0.8rem;
			--space-xl: 2rem;
			--space-xxl: 4rem;
			--font-header: clamp(1.4rem, 2vw, 2rem);
			--font-title: clamp(1rem, 4vw, 1.4rem);

			--radius: 8px;
			--radius-inside: 4px;
		}

		html,
		body,
		div,
		span,
		applet,
		object,
		iframe,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		blockquote,
		pre,
		a,
		abbr,
		acronym,
		address,
		big,
		cite,
		code,
		del,
		dfn,
		em,
		img,
		ins,
		kbd,
		q,
		s,
		samp,
		small,
		strike,
		strong,
		sub,
		sup,
		tt,
		var,
		b,
		u,
		i,
		dl,
		dt,
		dd,
		ol,
		ul,
		li,
		fieldset,
		form,
		label,
		legend,
		table,
		caption,
		tbody,
		tfoot,
		thead,
		tr,
		th,
		td,
		article,
		aside,
		canvas,
		details,
		embed,
		figure,
		figcaption,
		footer,
		header,
		hgroup,
		menu,
		nav,
		output,
		ruby,
		section,
		summary,
		time,
		mark,
		audio,
		video,
		button,
		hr,
		input,
		textarea {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}

		*,
		*:after,
		*:before {
			position: relative;
			box-sizing: border-box;
		}

		html {
			position: relative;
			overflow-x: hidden;
			scrollbar-width: thin;
			scroll-behavior: smooth;
		}

		html,
		body,
		header {
			font-family: Oswald, sans-serif;
		}

		body {
			background-color: var(--paper);
			background-image: linear-gradient(135deg, hsl(42, 31%, 97%) 0%, hsl(42, 31%, 93%) 100%);
			color: var(--dark);
            text-align: center;
		}

		body:before {
			content: "";
			position: fixed;
			width: 100%;
			height: 50rem;
			background-color: var(--red);
			border-radius: 100rem;
			bottom: -90vh;
			left: 0;
			right: 0;
			margin: auto;
			filter: blur(40px);
			-webkit-filter: blur(40px);
			opacity: 0.1;
		}

		#app {
            display: flex;
            flex-direction: column;
            align-items: center;
			margin: 10vh 0;
        }

		#app:before {
			position: fixed;
			content: "";
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 100%;
			max-width: 1024px;
			height: 100%;
			border-left: 1px solid var(--line);
    		border-right: 1px solid var(--line);
			pointer-events: none;
		}

		#app:after {
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			border-top: 1px solid var(--line);
			border-bottom: 1px solid var(--line);
			pointer-events: none;
		}

		header,
        footer,
        section {
			max-width: 32rem;
			padding: var(--space-l) 0
		}

		header {
			top: 0;
			z-index: 2;
			display: flex;
            flex-direction: column-reverse;
			align-items: center;
            gap: var(--space-l);
			width: 100%;
			padding: var(--space-xl) 0;
			animation: slide-down .8s cubic-bezier(.2, .8, .2, 1) both;
		}

		header h1 {
			letter-spacing: .02em;
		}

		header h2,
		header .h2 {
			font-size: var(--font-header);
		}

		header h2 {
			color: var(--light);
		}
		header h2:before {
			content: "";
			position: absolute;
			height: 100%;
			width: 104%;
			background: linear-gradient(180deg, var(--red), var(--red-dark));
			bottom: 0;
			left: -2%;
			z-index: -1;
			rotate: -0.2deg;
		}

		header svg {
			width: 3rem;
			height: 3rem;
		}

		footer {
			font-family: 'Rethink Sans', sans-serif;
			text-align: end;
			padding-bottom: 1rem;
			color: var(--ink-soft);
			animation: reveal-up .8s .3s both;
		}

		main {
			margin: 1em 0;
            display: flex;
            flex-direction: column;
            align-items: center;
			animation: reveal-up .9s .12s cubic-bezier(.2, .8, .2, 1) both;
		}

		h1 {
			font-size: 14px;
			text-wrap: balance;
			font-family: 'Rethink Sans', sans-serif;
			font-weight: 300;
			letter-spacing: .2em;
		}

		h2,
		.h2,
		h3 {
			font-size: var(--font-title);
			text-wrap: balance;
		}

		h2,
		.h2,
		h3,
		h4,
		h5,
		h6 {
			text-transform: uppercase;
			font-weight: 600;
		}

		strong {
			font-weight: 700;
			color: var(--red-dark);
		}

		img,
		svg {
			vertical-align: bottom;
			height: auto;
		}

		picture,
		figure {
			display: block;
		}

        picture {
			border-radius: var(--radius);
		}

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

		picture.cover {
			overflow: hidden;
			isolation: isolate;
			filter: grayscale(1);
			-webkit-filter: grayscale(1);
		}

		picture.cover img {
			object-fit: cover;
		}

		/* layout */
		.container {
			margin: auto;
			width: 75%;
			max-width: 1280px;
		}

		.row {
			display: flex;
			flex-flow: row wrap;
			align-items: start;
			justify-content: start;
			gap: var(--space-m);
		}

		.column {
			display: flex;
			flex-flow: column;
			gap: var(--space-m);
		}

		.grid-elements {
			--grid-gap: var(--space-l);
			--grid-col: 3;
			display: flex;
			align-items: stretch;
			flex-wrap: wrap;
			gap: var(--grid-gap);

			&>* {
				width: calc((100% - (var(--grid-gap) * (var(--grid-col) - 1))) / var(--grid-col));
			}
		}

		/* button */
		button {
			--background-button: linear-gradient(180deg, var(--red), var(--red-dark));
			--color-button: var(--light);
			--space-button: var(--space-s) var(--space-m);
			cursor: pointer;
			text-decoration: none;
			font-weight: 300;
			background: var(--background-button);
			color: var(--color-button);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			border-radius: var(--radius-inside);
			width: fit-content;
			max-width: 100%;
			transition: .4s;
			font-family: 'Rethink Sans', sans-serif;
			font-size: 14px;
			gap: var(--space-s);
			padding: 1em;
            box-shadow: 0 8px 18px hsl(0, 70%, 46%, 16%);
			transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
		}

		button:focus,
		button:hover {
			box-shadow: 0 12px 24px hsl(0, 70%, 46%, 26%);
			transform: translateY(-2px);
		}

		button:active {
			transform: translateY(0);
		}

		button:disabled {
			--background-button: var(--gray) !important;
			--color-button: var(--gray-dark) !important;
			border: none !important;
			cursor: default;
		}

		button.fixed {
			position: fixed;
			bottom: var(--space-xl);
			right: var(--space-xl);
			z-index: 2;

		}
		button svg {
			--size-svg: 20px;
			fill: var(--light);
			width: var(--size-svg);
			height: var(--size-svg);
		}

		button span {
			width: 100%;
			overflow-wrap: break-word;
		}

		/* body */
		svg.bird {
			position: fixed;
			width: 100%;
			height: auto;
			opacity: 0.04;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		svg.noise {
			height: 100vh;
			left: 0;
			mix-blend-mode: normal;
			opacity: .08;
			pointer-events: none;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 20;
		}

		section:has(.about) {
			display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            gap: var(--space-xl);
		}

		.about .text {
			font-family: 'Rethink Sans', sans-serif;
			font-weight: 300;
			font-size: 1.6rem;
			text-wrap: balance;
		}

		.card {
			gap: var(--space-s);
			padding: 1em;
			border: 1px solid var(--dark);
			border-radius: var(--radius);
			border-color: var(--line);
			background: hsl(42, 31%, 98%, 72%);
			box-shadow: 0 0 0 transparent;
			transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease;
		}

		.card .row {
			padding: var(--space-l);
		}

		.card.anim:hover {
			border-color: var(--red);
			box-shadow: var(--shadow);
			transform: translateY(-5px);
		}

		.skill .card {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1rem;
			justify-content: center;
		}

		.skill .card .row {
			gap: var(--space-xl);
			padding: var(--space-m) var(--space-l);
		}

		.skill .card picture {
			width: 4vw;
			height: 4vw;
			min-width: 42px;
			min-height: 42px;
		}

		.skill .card p {
			font-family: 'Rethink Sans', sans-serif;
			text-align: center;
			font-size: 8px;
			text-transform: uppercase;
			margin-top: var(--space-s);
		}

		.skill button {
			border: none;
			width: 100%;
		}

		.skill button span {
			width: 100%;
			overflow-wrap: break-word;
		}

		.skill .grid-elements>* {
			animation: tile-in .65s cubic-bezier(.2, .8, .2, 1) both;
		}

		.skill .grid-elements>*:nth-child(1) {
			animation-delay: .12s;
		}

		.skill .grid-elements>*:nth-child(2) {
			animation-delay: .16s;
		}

		.skill .grid-elements>*:nth-child(3) {
			animation-delay: .20s;
		}

		.skill .grid-elements>*:nth-child(4) {
			animation-delay: .24s;
		}

		.skill .grid-elements>*:nth-child(5) {
			animation-delay: .28s;
		}

		.skill .grid-elements>*:nth-child(6) {
			animation-delay: .32s;
		}

		.skill .grid-elements>*:nth-child(7) {
			animation-delay: .36s;
		}

		.skill .grid-elements>*:nth-child(8) {
			animation-delay: .40s;
		}

		.skill .grid-elements>*:nth-child(9) {
			animation-delay: .44s;
		}

		.skill .grid-elements>*:nth-child(10) {
			animation-delay: .48s;
		}

		.skill .grid-elements>*:nth-child(11) {
			animation-delay: .52s;
		}

		.skill .grid-elements>*:nth-child(12) {
			animation-delay: .56s;
		}

		.skill .grid-elements>*:nth-child(13) {
			animation-delay: .60s;
		}

		.skill .grid-elements>button {
			animation-delay: .64s;
		}

		.skill .card picture img {
			transition: transform .35s ease;
		}

		.skill .card:hover picture img {
			transform: scale(1.12) rotate(-4deg);
		}

		@keyframes slide-down {
			from {
				opacity: 0;
				transform: translateY(-18px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes reveal-up {
			from {
				opacity: 0;
				transform: translateY(22px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes tile-in {
			from {
				opacity: 0;
				transform: translateY(16px) scale(.96);
			}

			to {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}

		@media (prefers-reduced-motion: reduce) {

			*,
			*::before,
			*::after {
				animation-duration: .01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: .01ms !important;
				scroll-behavior: auto !important;
			}
		}

		@media screen and (max-width: 900px) {

			#app {
				margin: 0 1rem;
				padding-bottom: 6vh;
			}

			#app:after {
				display: none;
			}

			button.fixed {
				width: calc(100% - 8px);
				bottom: 4px;
				left: 4px;
			}

			.container {
				width: 90%;
			}

			section:has(.about) {
				flex-direction: column;
			}

			.about {
				width: 100%;
			}

			.skill {
				width: 100%;
			}
		}