@font-face
{
font-family:inter;font-style:normal;font-weight:400;font-display:auto;
}

*
{
margin:0;padding:0;border:none;outline:none;box-sizing:border-box;text-decoration:none;font-family:inter,-apple-system,sans-serif;font-weight:400;vertical-align:baseline;font-size:20px;letter-spacing:-.009em;line-height:36px
}

.animate-in
{
animation:fadeIn .2s ease-in
}

.animate-out
{
transition:opacity .2s;opacity:0
}

@-webkit-keyframes

fadeIn
{
from{opacity:0}to{opacity:1}
}

@keyframes

fadeIn
{
from{opacity:0}to{opacity:1}
}

html,body
{
background:#fcfcfc;color:#222;height:100%
}

body
{
display:grid;grid-template-columns:1fr;grid-gap:0;align-items:center;padding:5% 15%
}

.wrapper
{
grid-column:1;max-width:620px;display:block
}

nav
{
padding-bottom:60px;position:relative
}

h1,h2,h3,h4,p,blockquote,form,ul,ol,.video
{
margin-bottom:30px;font-weight:400;font-style:normal
}

ul li
{
list-style:none;padding:0 0 15px;position:relative;line-height:30px
}

ul li:before
{
content:"•";position:absolute;left:-27px
}

ol li
{
margin-left:-10px;padding:0 0 10px 10px
}

i,em
{
font-weight:400;font-style:normal
}

b,strong
{
font-weight:400;font-style:normal
}

blockquote
{
border-left:1px solid #ddd;margin-left:-10px;padding-left:10px;font-weight:400;font-style:normal
}

blockquote p
{
margin:0
}

cite
{
display:block;font-weight:400;font-style:normal;margin-top:15px
}

a
{
color:inherit;border-bottom:1px solid #ddd;transition:color .4s;padding-bottom:2px
}

a:hover
{
color:#f9415d;border-bottom:1px solid #ddd
}

nav a
{
margin-right:5%
}

nav a.active
{
border-bottom-style:dotted
}

nav a.rat
{
border:none;padding:0;vertical-align:top
}

img
{
max-width:100%;filter:grayscale(90%) opacity(90%)
}

.video
{
position:relative;height:0;overflow:hidden;padding-bottom:56.25%;box-sizing:border-box;filter:grayscale(90%) opacity(90%)
}

.video iframe
{
position:absolute;top:0;left:0;width:100%;height:100%
}

svg
{
max-width:20px;height:auto;margin-top:7px
}

svg path
{
fill:#aeaeae
}

a svg path
{
transition:fill .4s
}

a:hover svg path
{
fill:#f9415d
}

hr
{
padding:30px 0
}

hr:before
{
content:"—";color:#222
}

form
{
display:grid;grid-template-columns:1fr min-content;grid-gap:20px;align-items:center;margin:40px 0
}

input,button
{
width:100%;cursor:pointer;-webkit-appearance:none;border-radius:0
}

input
{
background:0 0;border-bottom:1px solid #bbb;padding:5px 0;color:#444;transition:color .4s,border .4s
}

input:focus
{
border-bottom:1px solid #444
}

input:required:invalid,input:invalid
{
outline:none;box-shadow:none;border-bottom:1px solid #bbb
}

::placeholder
{
color:#444;opacity:1
}

button
{
border-radius:40px;background:0 0;border:1px solid #444;padding:10px;color:#444;transition:color .4s,border .4s;white-space:nowrap
}

button:hover
{
color:#f9415d;border-color:#f9415d
}

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

body
{
display:block;padding:15px
}

.wrapper
{
margin-bottom:50px
}

form
{
display:block
}

input,button
{
margin-bottom:10px;text-align:center
}

ul li
{
list-style:none;padding:0 0 20px 20px;position:relative
}

ul li:before
{
position:absolute;left:0
}

ol li
{
margin-left:20px;padding:0 0 20px 10px
}

nav
{
text-align:center;z-index:1000
}

nav a.rat
{
display:block;margin-bottom:10px
}

nav a
{
z-index:1001
}

}

@media(prefers-color-scheme:dark)
{
html,body
{
background:#222;color:#fcfcfc
}

button
{
border:1px solid #fcfcfc;color:#fcfcfc
}

input
{
color:#fcfcfc}
}