/* SkyHills - base layer
 * Resets, typography and the two buttons that are reused everywhere.
 * Component styles live in skyhills.css.
 */

:root {
    --ink: #071a24;
    --ink-2: #0d2f3d;
    --paper: #eaf6f3;
    --mint: #79e5d0;
    --mint-soft: #81e3d0;
    --body-copy: #b7ccca;
    --display: Marcellus, 'Times New Roman', serif;
    --text: Manrope, 'Helvetica Neue', Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
}

/* Buttons: one filled, one outlined. Nothing else. */

.sh-btn {
    display: inline-flex;
    align-items: center;
    padding: 15px 20px;
}

.sh-btn-fill {
    margin-top: 24px;
    gap: 70px;
    background: var(--mint-soft);
    color: #09212a;
}

.sh-btn-outline {
    padding: 12px 18px;
    border: 1px solid #6dd4c2;
    border-radius: 30px;
    color: #83ead5;
}

/* Utilities. Kept short on purpose - if a rule is used once it belongs
 * to its component, not here. */

.u-overline {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #82dfce;
}

.u-quiet {
    color: var(--body-copy);
    line-height: 1.75;
}

.is-hidden {
    display: none !important;
}