/* Some resets. Thanks, Andy: https://hankchizljaw.com/wrote/a-modern-css-reset/ */
*,::after,::before{box-sizing:border-box}ol[class],ul[class]{padding:0}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,li,ol[class],p,ul[class]{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ol[class],ul[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}

/* VARIABLES */
:root {
    --black: #0A182E;
    --white: #FFFFFF;
    --grey-1: #5F6876;
    --grey-2: #D3D9E3;
    --grey-3: #FAFCFD;
    --bl-1: #0050D8;
    --bl-2: #D0E2FF;
    --bl-3: #0A3174;
    --bl-4: #21AFFF;
    --re-1: #D85743;
    --re-2: #FFC0B7;
    --re-3: #8C2515;
    --ye-1: #FFC73A;
    --ye-2: #FFE9B1;
    --ye-3: #4B390A;
    --gr-1: #469B5F;
    --gr-2: #BCEDCA;
    --gr-3: #35533E;
    --pu-1: #794DAF;
    --pu-2: #D9CBEB;
    --pu-3: #46256F;

    --rad-1: 12px;
    --rad-2: 6px;
}

html { background-color: var(--white); height: 100%; min-height: 100%; width: 100%; }
body { background: var(--white); color: var(--grey-1); font-family: 'Avenir Next', sans-serif; font-size: 1rem; font-weight: normal; line-height: 1.8; margin: 0; padding: 8%; }

/* Links */
a { color: var(--bl-1); font-weight: normal; transition: all 0.1s ease-in-out; }
a:hover { color: var(--bl-4); text-decoration: none; }
.button, button { background: var(--black); border: none; color: var(--white); cursor: pointer; display: inline-block; font-weight: 600; margin: 1rem 0; padding: 0.4rem 1.4rem; text-decoration: none; }
.button:hover, button:hover { background: var(--bl-1); color: var(--white); }

/* Typography */
h1, h2, h3, h4, h5, h6 { color: var(--black); }
h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 2rem 0; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 4rem 0 2rem 0; }
h3 { font-size: 1.4rem; line-height: 1.2; margin: 3rem 0 1.6rem 0; }
h4 { font-size: 1.2rem; line-height: 1.2; margin: 1.6rem 0; }
h5 { font-size: 1rem; line-height: 1.4; margin: 1.6rem 0; }
h6 { font-size: 1rem; line-height: 1.4; margin: 1.6rem 0; }
p { margin: 0 0 1.6rem 0; }
p:last-child { margin-bottom: 0; }
p, li, h1, h2, h3, h4, h5, h6 { hyphens: auto; word-break: break-word; }
strong { color: var(--black); font-weight: bold; }
hr { border: none; border-bottom: 1px solid var(--bl-2); margin: 4rem auto 4rem 0; width: 10rem; }
ul, ol { margin: 0 0 1.6rem 0; padding: 0 1.2rem; }
li { margin: 0 0 0.6rem 0; }
blockquote { border-left: 1px solid var(--bl-1); color: var(--black); font-style: italic; margin: 0 0 1.6rem 0; padding: 1rem 2rem; }
summary { margin-bottom: 1.6rem; }

/* Utilities */
img { height: auto; max-width: 100%; }
.page { margin: 0 auto 0 0; max-width: 60rem; padding: 2rem; }

/* Header, Footer, Nav */
.site-header { margin: 0 0 4rem 0; }
.site-header p { margin-bottom: 0; }
.site-footer { margin: 8rem 0 0 0; padding: 0 0 4rem 0; }
.site-header img { border: 1px solid var(--bl-2); border-radius: 100px; display: inline-block; margin: 0 0 2rem 0;  transition: all 0.2s ease-in-out; width: 100px; }
.site-header img:hover { transform: rotate(10deg); }
.social { margin: 0 0 2rem 0; }
.social strong { display: block; margin: 0 0 0.4rem 0; }
.social a { text-decoration: none; }
.social a:hover svg { fill: var(--bl-4); }
.social svg { display: inline-block; margin: 0 1rem 0 0; transition: all 0.2s ease-in-out; width: 32px; }

/* Notice */
.notice {
    background: var(--bl-1);
    color: var(--bl-2);
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 4rem 1rem 1rem 1rem;
    position: fixed;
    right: 4rem;
    top: 0;
    width: 200px;
}
.notice a { color: var(--white); display: block; font-weight: 600; margin-top: 0.4rem; }

/* Content Stuff */
.signup { max-width: 32rem; }
label { color: var(--black); display: block; font-weight: bold; }
input { border: 1px solid var(--black); border-radius: none; display: block; margin: 0 0 1rem 0; padding: 0.4rem 1.4rem; width: 100%; }

.meta { display: block; margin: -1rem 0 4rem 0; }

@media screen and (max-width: 40rem) {
    body { padding: 2%; }
    .hide { display: none; }
}

@media screen and (max-width: 52rem) {
    .site-header { margin-top: 8rem; }
    .notice { position: absolute; right: 4%; }
}