svg {
 display: grid;
 align-items: center;
 width: 100%;
}
.one-rem-icon {
 width: 1rem;
}
body {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--spacer-md);
 line-height: var(--lh-lg);
 background-color: var(--background);
 color: var(--small-elements);
}
body::-webkit-scrollbar {
 width: 1rem; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
 background: var(--background); /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
 background-color: var(--accent); /* color of the scroll thumb */
 border-radius: 4rem; /* roundness of the scroll thumb */
 border: 0.1875rem solid var(--background);
}
hr {
 border-top: 0.0625rem solid var(--small-elements);
 opacity: 0.3;
 max-width: 30%;
 margin-block: var(--spacer-sm);
}
.doted-list::before {
 content: "• ";
 color: inherit;
}

section,
body {
 transition: ease-in-out 0.2s;
}

body {
 animation: fade-sections 1s 1;
}
@keyframes fade-sections {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
/* .animation-hidden {
 opacity: 0;
 transition: var(--scroll-animation-speed);
}
.animation-show {
 opacity: 1;
} */
@media (prefers-reduced-motion) {
 .animation-hidden {
  transform: none;
 }
}
p {
 text-wrap: balance;
 max-width: 80ch;
 min-width: 22ch;
}
h1 {
 font-size: var(--fs-xlg);
 font-weight: var(--fw-b);
 line-height: var(--lh-sm);
 margin-inline: var(--spacer-sm);
}
h2 {
 font-size: var(--fs-lg);
 font-weight: var(--fw-m);
 line-height: var(--lh-sm);
}
h3 {
 display: inline;
 font-weight: var(--fw-m);
 line-height: 1;
}
.text-right-alignment {
 text-align: right;
}
a {
 text-decoration: none;
 color: currentColor;
 display: block;
}
:root {
 --link-icon-font-size: 0.7rem;
}
.link {
 color: var(--accent);
 font-weight: var(--fw-m);
 text-decoration: underline solid transparent 0.1875rem;
 text-underline-offset: 0.3125rem;
 transition: 0.3s ease;
 cursor: pointer;
 text-wrap: balance;
 /* font-size: var(--link-font-icon-size); */
}
.link:hover,
.link:focus {
 text-decoration: underline solid var(--accent) 0.1875rem;
}
/* .link::after {
 content: "";
 margin: 0 0 0.25rem 0.25rem;
 display: inline-block;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect width='512' height='512' fill='none' /><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M388.364 242.764v178.691A42.547 42.547 0 0 1 345.818 464H90.546A42.544 42.544 0 0 1 48 421.455V166.182a42.543 42.543 0 0 1 42.546-42.546h178.69M464 180.364V48H331.636M216 296L464 48' /></svg>")
  no-repeat 50% 50%;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect width='512' height='512' fill='none' /><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M388.364 242.764v178.691A42.547 42.547 0 0 1 345.818 464H90.546A42.544 42.544 0 0 1 48 421.455V166.182a42.543 42.543 0 0 1 42.546-42.546h178.69M464 180.364V48H331.636M216 296L464 48' /></svg>")
  no-repeat 50% 50%;
 -webkit-mask-size: cover;
 mask-size: cover;
 background-color: currentColor;

 width: var(--link-icon-font-size);
 height: var(--link-icon-font-size);
} */
.link-in-text {
 display: inline;
}

.header-icon-container {
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 width: 1.5rem;
}
.header-icon-container > svg {
 color: currentColor;
 fill: currentColor;
}

.wrapper {
 display: flex;
 justify-content: start;
 align-items: flex-end;
 flex-direction: column;
 gap: var(--spacer-md);
 margin: 1rem auto 3rem auto;
 max-width: 62rem;
 padding-inline: var(--spacer-sm);
}
main {
 display: flex;
 align-items: start;
 gap: var(--spacer-sm);
}
section {
 display: flex;
 flex-direction: column;
 align-items: end;
 gap: var(--spacer-lg);
}
.sections {
 display: flex;
 flex-direction: column;
 gap: 6rem;
}
.span__2 {
 grid-column: span 2;
}
.span__3 {
 grid-column: span 3;
}
@media (max-width: 39em) {
 .wrapper {
  margin: 0 auto;
 }
}
.hidden {
 display: hidden;
}
@media (max-width: 39em) {
 .hidden-mobile {
  display: none;
 }
 .span__2 {
  grid-column: span 1;
 }
 .span__3 {
  grid-column: span 1;
 }
}
@media (min-width: 39.1em) {
 .hidden-desktop {
  display: none;
 }
}