html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin-inline: auto;
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--clr-black);
	background-color: var(--clr-white);
	font-family: 'neue-haas-grotesk-display', sans-serif;
	font-weight: 200;
}

::selection {
	background-color: var(--clr-purple-50);
}

.container1 {
	width: 100%;
	max-width: 895px;
	margin-inline: auto;
}

.container {
	margin-inline-start: auto;
	margin-inline-end: auto;
	max-width: 43.5rem;
}

img {
	display: block;
	width: 100%;
}

header {
	background-image: linear-gradient(
		to bottom,
		var(--clr-purple) 85%,
		#f3eeff00
	);
	animation: linear fade-out-bg both;
	animation-timeline: scroll();
	animation-range: entry 0 entry 40rem;
}

nav {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 20;
	background-image: linear-gradient(
		to bottom,
		var(--clr-purple) 85%,
		#f3eeff00
	);
}

nav > .container1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	font-weight: 600;
}

nav ul {
	display: flex;
	gap: 1.125rem;
}

nav li::marker {
	content: '';
}

nav a {
	color: var(--clr-black);
	text-decoration: none;
	font-weight: 200;
}

nav a:hover {
	text-decoration: underline;
}

.hero-title {
	animation: linear fade-out both;
	animation-timeline: scroll();
	animation-range: entry 0 entry 8rem;
	margin-top: 50px;
	transform: translateY(0);
}

.hero-title .mesh-title {
	position: relative;
	display: grid;
	place-items: center;
	padding-block: 6rem;
	translate: 0 -35px;
}

h1 {
	position: absolute;
	top: 37.5%;
	font-size: clamp(1rem, 1rem + 1.1vw, 3rem);
	text-transform: uppercase;
	color: #ffffff;
	padding: 0.8rem 2em;
	border-radius: var(--br-big);
	background-color: hsla(0, 0%, 100%, 0.2);
	backdrop-filter: blur(10px);
	text-shadow: 0.3px 0.5px 0.8px hsl(258deg 30% 55% / 0.28),
		1px 2.1px 3.1px hsl(258deg 30% 55% / 0.38),
		2.3px 4.6px 6.8px hsl(258deg 30% 55% / 0.48),
		5.1px 10.2px 15.1px hsl(258deg 30% 55% / 0.58);
	box-shadow: 0.3px 0.5px 0.8px hsl(258deg 30% 55% / 0.18),
		1px 2.1px 3.1px -0.4px hsl(258deg 30% 55% / 0.28),
		2.3px 4.6px 6.8px -0.8px hsl(258deg 30% 55% / 0.38),
		5.1px 10.2px 15.1px -1.2px hsl(258deg 30% 55% / 0.47);
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}

.flexbox-title {
	width: 100%;
}

address[rel='author'] {
	position: absolute;
	translate: 0 90px;
	color: var(--clr-white);
	background-color: var(--clr-black);
	padding-inline: 6px;
	font-style: normal;
}

.table-of-content {
	position: fixed;
	padding-inline-start: 1rem;

	& li::marker {
		content: '';
	}

	& a {
		color: var(--clr-black);
		font-size: 0.9rem;
		font-weight: 200;
		text-decoration: none;
	}
	& a:hover {
		text-decoration: underline;
	}
}

ul ul {
	padding: 0 0 0.5rem 1rem;
}

main {
	margin-top: 0px;
	animation: linear move-in both;
	animation-timeline: scroll();
	animation-range: entry 10rem entry 15rem;
}

@keyframes move-in {
	to {
		margin-top: -100px;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes fade-out-bg {
	to {
		background-image: linear-gradient(to bottom, #f3eeff33 85%, #f3eeff00);
	}
}

h2 {
	font-size: 1.75rem;
	color: var(--clr-white);
	font-weight: 600;
	background-color: var(--clr-black);
	padding-inline: 6px;
	margin-block: 3rem 0.5rem;
	width: fit-content;
}

h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-block: 1rem 0.5rem;
	width: fit-content;
	border-bottom: 2px solid var(--clr-black);
}

footer {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;

	min-height: 32rem;
	background-image: linear-gradient(to top, var(--clr-purple) 85%, #f3eeff00);
	margin: 5rem 0 0 0;
	padding-block-end: 3rem;
	color: var(--clr-white);
}

footer .container1 {
	position: absolute;
	top: 50%;
	translate: 0 -50%;

	& address {
		width: fit-content;
		left: 50%;
		translate: -50% 0;
	}

	& .social-media {
		position: absolute;
		left: 50%;
		translate: -50% 55px;
		display: flex;
		gap: 1rem;
	}

	& a {
		display: grid;
		background: var(--clr-black);
		padding: 0.6rem;
		border-radius: 3px;
	}
}

a:has(#github-icon-svg),
a:has(#instagram-icon-svg) {
	transition: all 300ms cubic-bezier(0.89, 2.44, 0.98, 0.74);
}

#github-icon-svg path {
	stroke: var(--clr-white);
}

a:has(#github-icon-svg):hover path {
	stroke: url(#radial-1);
}

a:has(#github-icon-svg):hover,
a:has(#instagram-icon-svg):hover {
	scale: 1.1;
}

#instagram-icon-svg path {
	fill: var(--clr-white);
}

a:has(#instagram-icon-svg):hover path {
	fill: url(#radial-1);
}

li::marker {
	content: '➜  ';
	color: var(--clr-black);
}

.iframe-container {
	display: grid;
	place-items: center;
	margin-block: 0.5rem 3rem;
}

iframe {
	width: 100%;
	border-radius: var(--br-big);
}

p {
	padding-block-end: 1rem;
}

em {
	font-weight: 100;
	letter-spacing: 0.5px;
}

strong,
a {
	color: var(--clr-black);
	font-weight: 600;
}

:is(p, li) > code {
	background-color: hsla(0, 0%, 0%, 0.05);
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	font-size: 1rem;
}

div:has(.container-animation) {
	margin-block-end: 2rem;
}

.scene {
	position: relative;
}

.container-animation {
	min-height: 350px;
	display: grid;
	place-items: center;
	position: relative;
	max-width: 600px;
	background: var(--clr-purple);
	overflow: hidden;
	border-radius: var(--br-big);
	margin-inline: auto;
}

.axis-title {
	position: absolute;
	z-index: 15;
	top: 39%;
	left: 38%;
	color: var(--clr-white);
	font-weight: 700;
	text-shadow: var(--clr-purple-90) 1px 0 10px;
	transition: transform 300ms cubic-bezier(0.79, -0.1, 0.29, 1.11);
}

.container-animation *:not(:empty) {
	transform-style: preserve-3d;
}

.flex-element-animation {
	position: absolute;
	width: 132px;
	background: var(--clr-purple-50);
	backdrop-filter: blur(3px);
	border-radius: var(--br-med);
	left: -80px;
	transition: transform 300ms cubic-bezier(0.79, -0.1, 0.29, 1.11);
}

.container-animation:hover {
	perspective: 800px;
}

.primary-axis-rotation {
	& .primary-axis-animation {
		position: absolute;
		inset: -3px -300px;
		background: var(--clr-black);
		z-index: 10;
	}

	& .flex-element-animation {
		aspect-ratio: 1 / 2;
		top: -130px;
	}

	& .container-animation:hover .flex-element-animation {
		transform: rotateY(-50deg);
	}

	& #two {
		transform: translateX(-140px);
	}

	& #three {
		transform: translateX(140px);
	}

	& .container-animation:hover #two {
		transform: translateX(-120px) rotateY(-50deg);
	}

	& .container-animation:hover #three {
		transform: translateX(120px) rotateY(-50deg);
	}

	& .container-animation:hover .primary-axis-title {
		transform: translateY(-1rem);
	}
}

.secondary-axis-rotation {
	.secondary-axis-title {
		translate: 0 -90px;
	}
	#title-one {
		translate: -20px -120px;
	}
	#title-two {
		transform: translateX(-170px);
	}

	#title-three {
		transform: translateX(112px);
	}

	.secondary-axis-animation {
		position: absolute;
		inset: -350px -3px;
		background: var(--clr-black);
		z-index: 10;
	}

	#secondary-one {
		transform: translateX(-12px);
	}

	#secondary-two {
		transform: translateX(-153px);
	}

	#secondary-three {
		transform: translateX(127px);
	}

	.flex-element-animation {
		aspect-ratio: 1 / 1.4;
		top: -86px;
	}

	.container-animation:hover .flex-element-animation {
		transform: rotateX(20deg);
	}

	#two {
		transform: translateX(-140px);
	}

	#three {
		transform: translateX(140px);
	}

	.container-animation:hover #two {
		transform: translateX(-140px) rotateX(20deg);
	}

	.container-animation:hover #three {
		transform: translateX(140px) rotateX(20deg);
	}
}

pre {
	display: flex;
	align-items: center;
	background-color: var(--clr-purple);
	padding: 2rem;
	border-radius: var(--br-big);
	color: var(--clr-black);

	& code {
		display: flex;
		flex-direction: column;
	}
	.code-line {
		display: flex;
		min-height: 1rem;
		&:has(.selector) {
			padding-block-start: 0.7rem;
		}
	}

	.selector {
		color: var(--clr-white);
		background-color: var(--clr-black);
	}

	.property {
		font-weight: 600;
	}

	.tab {
		width: 3ch;
	}
}

.result-side {
	max-width: 18rem;
}
.result-side .flex-wrapper {
	display: flex;
}

.result-side .item {
	margin-block-end: 1rem;
	width: 500px;
	height: 40px;
	color: var(--clr-white);
	background-color: var(--clr-black);
	border-radius: var(--br-med);
	display: flex;
	align-items: center;
}

.hypotetical-size-code-test {
	display: flex;
	gap: 2rem;
	margin-block: 1.5rem 2.5rem;
}
.img-container {
	overflow: hidden;
}
.gif {
	width: 100%;
	padding: 1.5rem;
}

.img-container:has(.gif) {
	background-color: #efe8fc;
	position: relative;
	overflow: hidden;
}

.img-container:has(.gif)::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 50px;
	bottom: 0;
	background-color: #efe8fc;
}

.graph {
	width: 100%;
	aspect-ratio: 1.8;
	margin-inline: auto;
	position: relative;
	background-color: var(--clr-purple);
	text-align: center;
	border-radius: var(--br-big);
	text-shadow: 0.3px 0.5px 0.8px var(--clr-purple-dark),
		0px 10px 10px var(--clr-purple-dark);

	& ul {
		margin: 0;
		padding: 0;
		line-height: 1;
	}
	& code {
		background-color: transparent;
		font-size: clamp(0.75rem, 0.1rem + 2vw, 1.25rem);
	}

	& li::marker {
		content: '';
	}

	.circle {
		background-color: var(--clr-purple-50);
		width: 40%;
		aspect-ratio: 1;
		border-radius: 50%;
		position: absolute;
		display: grid;
		place-content: center;
		opacity: 0.7;
		top: 50%;
		outline: 2px solid transparent;
		outline-offset: -18px;
		transition: all 350ms ease;

		.graph-title {
			position: absolute;
			top: 0;
			left: 50%;
			position: absolute;
			width: max-content;

			& code {
				font-size: clamp(1rem, 0.1rem + 2.5vw, 1.4rem);
			}
		}

		&:hover {
			scale: 1.1;
			opacity: 0.9;
			outline-color: var(--clr-black);
			outline-offset: 8px;

			.graph-title {
				color: var(--clr-black);
			}
		}
	}
	.left-circle {
		right: 50%;
		translate: 15% -50%;
		& ul {
			translate: -40px 0;
		}
	}
	.right-circle {
		left: 50%;
		translate: -15% -50%;
		& ul {
			translate: 40px 0;
		}
	}
	.joint {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -40% -50%;
	}
}

.left-circle .graph-title,
.right-circle .graph-title {
	translate: -50% 70%;
	font-weight: 600;
}

pre,
.graph,
.container-animation,
.iframe-container,
.img-container {
	border-radius: var(--br-big);
	box-shadow: 0.4px 0.3px 0.6px #a495c642, 2px 1.6px 2.9px -0.4px #a495c642,
		3.6px 2.9px 5.2px -0.7px #a495c642, 5.8px 4.7px 8.4px -1.1px #a495c642,
		9.2px 7.4px 13.3px -1.4px #a495c642, 14.3px 11.6px 20.7px -1.8px #a495c642,
		21.7px 17.6px 31.4px -2.1px #a495c642, 32px 25.9px 46.3px -2.5px #a495c642;
}

pre + p,
.img-container + p {
	margin-top: 2.5rem;
}

#scroll-to-top {
	--_shadow-color: 258deg 30% 71%;
	--_shadow-elevation-high: 0.4px 0.3px 0.6px hsl(var(--_shadow-color) / 0.23),
		1.8px 1.5px 2.6px -0.4px hsl(var(--_shadow-color) / 0.23),
		3.3px 2.7px 4.8px -0.7px hsl(var(--_shadow-color) / 0.23),
		5.4px 4.3px 7.8px -1.1px hsl(var(--_shadow-color) / 0.23),
		8.5px 6.8px 12.2px -1.4px hsl(var(--_shadow-color) / 0.23),
		13.2px 10.6px 19px -1.8px hsl(var(--_shadow-color) / 0.23),
		20px 16.1px 28.9px -2.1px hsl(var(--_shadow-color) / 0.23),
		29.4px 23.6px 42.4px -2.5px hsl(var(--_shadow-color) / 0.23);
	position: fixed;
	bottom: 1.5rem;
	right: 2rem;
	z-index: 10;
	width: 50px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: none;
	background-color: black;
	transform: scale(1);
	transform-origin: bottom right;
	box-shadow: var(--_shadow-elevation-high);
	transition: transform 200ms cubic-bezier(0.89, 2.44, 0.98, 0.74);
}

#scroll-to-top svg {
	width: 40px;
	aspect-ratio: 1;
}

@keyframes bounce {
	50% {
		transform: translateY(-10px);
	}
}

#scroll-to-top:hover {
	transform: scale(1.2);
	animation: none;
}

#scroll-to-top.fade-in {
	opacity: 0;
	animation: bounce 2s ease-in infinite, fade-in 300ms ease-in forwards;
}
#scroll-to-top.fade-out {
	opacity: 1;
	animation: fade-out 300ms ease-in forwards;
}

@keyframes fade-in {
	to {
		opacity: 1;
	}
}
@keyframes fade-out {
	to {
		opacity: 0;
	}
}

.warning {
	background-color: #ffc1c8ab;
	font-size: 1rem;
	text-align: center;
	padding: 1.2rem;
	border-radius: var(--br-med);
	margin-bottom: 1rem;

	> * {
		font-size: 0.8rem;
	}
}
.warning-600,
.warning-740 {
	display: none;
}

@media screen and (width < 970px) {
	.table-of-content {
		display: none;
	}
	.hypotetical-size-code-test {
		flex-direction: column;
	}
	.container,
	.container1 {
		padding: 2rem;
	}
}
@media screen and (895px < width < 970px) {
	.container {
		max-width: 895px;
	}
}
@media screen and (width < 895px) {
	.container,
	.container1 {
		max-width: 100%;
	}
}

@media screen and (width < 740px) {
	.warning-740 {
		display: block;
	}
}

@media screen and (width < 700px) {
	.container {
		margin-top: -6rem;
	}
}

@media screen and (width < 600px) {
	.warning-600 {
		display: block;
	}
}