*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
background: var(--c-void);
}
html,
body {
margin: 0;
padding: 0;
max-width: 100%;
overflow-x: clip;
overscroll-behavior-y: none;
}
body {
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.is-locked {
overflow: hidden;
}
img,
svg,
video,
canvas {
max-width: 100%;
display: block;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
hr {
border: 0;
border-top: 1px solid var(--c-line);
margin: 0;
}
::selection {
background: var(--c-accent);
color: var(--c-void);
}
:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
border-radius: 2px;
} .container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
position: relative;
padding-block: var(--section-y);
}
.section--lg {
padding-block: var(--section-y-lg);
}
.section--sm {
padding-block: var(--section-y-sm);
}
.section--flush-top {
padding-top: 0;
} .surface-paper {
background: var(--p-bg);
color: var(--p-ink-2);
} .u-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 10px;
z-index: 200;
background: var(--c-accent);
color: #fff;
padding: 10px 18px;
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-xs);
}
.skip-link:focus {
left: 10px;
} .bg-drops {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.5;
background-image:
radial-gradient(circle at 12% 18%, rgba(30, 141, 233, 0.16), transparent 26%),
radial-gradient(circle at 88% 6%, rgba(123, 47, 247, 0.12), transparent 22%);
}
main {
position: relative;
padding-top: 65px;
z-index: 1;
}