@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

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

body {
	min-height: 100vh;
	font-weight: 80;
	padding: 0 4rem 0 1rem;
	background: hsl(0 0% 98%);
	color: hsl(0 0% 6%);
	font-family:  "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}

body::after {
	--size: 80px;
	--thickness: 2px;
	content: "";
	position: fixed;
	height: 100vh;
	width: 100vw;
	pointer-events: none;
	background:
		linear-gradient(transparent 0 calc(var(--size) - var(--thickness)), currentColor calc(var(--size) - var(--thickness)) var(--size)) 50% 50% / var(--size) var(--size),
		linear-gradient(90deg, transparent 0 calc(var(--size) - var(--thickness)), currentColor calc(var(--size) - var(--thickness)) var(--size)) 50% 50% / var(--size) var(--size);
	-webkit-mask: linear-gradient(-35deg, transparent 50%, white);
	        mask: linear-gradient(-35deg, transparent 50%, white);
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0.25;
}

.dark body {
	background: hsl(0 0% 6%);
	color: hsl(0 0% 96%);
}

mark {
	color: hsl(0 0% 6%);
}

.dark mark {
	color: hsl(0 0% 98%);
}

section {
	margin-bottom: 2rem;
}

.dark header svg path {
	fill: white;
}

* {
  box-sizing: border-box;
}

:where(h1, h2) {
	font-weight: 120;
}

code {
	max-width: 100%;
	overflow: auto;
}

header {
	height: 50vmin;
	min-height: 200px;
	width: 40ch;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.25rem;
  display: grid;
  align-content: center;
}

header svg {
	width: 35%;
	filter: drop-shadow(0 0 20px hsl(0 0% 50% / 0.75));
}

main {
	padding: 0 1rem;
  width: 40ch;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.25rem;
  padding: 0 0 50vmin 0;
}

/* Botão de tema específico - posicionado à esquerda, sem conflito com menu */
header button {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 48px;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 12px;
	border: 0;
	background: transparent;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 10001;
	pointer-events: auto;
}

header button[aria-pressed=true] svg path:last-of-type,
header button[aria-pressed=false] svg path:first-of-type {
	display: none;
}

header button svg {
	width: 65%;
}

header button svg path {
	fill: #000 !important;
}

@media (max-width: 768px) {
	header button svg path {
		fill: #000 !important;
	}
}

mark {
	--lightness: 80%;
  --highlighted: 1;
  --highlight: hsl(var(--hue, 45) 80% var(--lightness));
  background: transparent;
}

@supports (animation-timeline: view()) {
  mark {
    --highlighted: 0;
    -webkit-animation: highlight steps(1) both;
            animation: highlight steps(1) both;
    animation-timeline: view();
    animation-range: entry 100% cover 10%;
  }
}

.dark mark {
	--lightness: 35%;
}

mark span {
  background: linear-gradient(120deg, var(--highlight, lightblue) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
  background-position: calc((1 - var(--highlighted)) * 110%) 0;
  transition: background-position 1s;
}
p, li {
  position: relative;
}

a {
	color: hsl(212 100% 50%);
	text-decoration: none;
}

a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 6px;
}

hr {
	margin: 2rem auto;
}

hr + p {
	text-align: center;
}


@-webkit-keyframes highlight {
  to {
    --highlighted: 1;
  }
}

@keyframes highlight {
  to {
    --highlighted: 1;
  }
}

::view-transition-new(root) {
	-webkit-animation: grow 1s;
	        animation: grow 1s;
}
::view-transition-old(root) {
	-webkit-animation: none;
	        animation: none;
}

@-webkit-keyframes grow {
	0% {
		-webkit-clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
		        clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
	}
	100% {
		-webkit-clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
		        clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
	}
}

@keyframes grow {
	0% {
		-webkit-clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
		        clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
	}
	100% {
		-webkit-clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
		        clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
	}
}

/* Menu universal acima do background */
.cd-header {
  z-index: 1000 !important;
}

.nav {
  z-index: 1000 !important;
}

/* Garantir que o botão de fechar do menu seja visível */
.nav__close-btn {
	z-index: 10002 !important;
	pointer-events: auto !important;
	opacity: 0.7 !important;
}

body.nav-active .nav__close-btn {
	opacity: 0.7 !important;
	transform: rotate(0deg) scale(1) !important;
}