/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

body, p, h1, h2,
h3, h4, figure, blockquote, dl, dd, ul[class],
ol[class] {
    margin: 0;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}
h1, h2,
h3, h4 {
    text-wrap: balance;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
h1 { font-size: 2rem;}

video, canvas, svg {
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
a {
    color: inherit;
}
ul {
    padding-left: 0;
    list-style-type: none;
}
dt {
    font-weight: 600;
}
:target {
    scroll-margin-block: 5ex;
}


/* Custom props */
body {
    --font: -apple-system, '.SFNSText-Regular', 'San Francisco', 'Oxygen', 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;

    --space-lg: 1.75rem;
    --space: 1rem;
    --space-sm: 0.5rem;
    --rad: 1rem;
    --rad-sm: 0.5rem;

    --bp-xl: 1600px;
    --bp-lg: 1200px;
    --bp-md: 800px;
    --bp-sm: 600px;
    --bp-xs: 400px;

    --c-white: #fff;
    --c-black: rgb(0,0,0);
    --c-gray1: #eee;
    --c-gray2: #aaa;
    --c-gray3: #999;
    --c-gray4: #666;
    --c-gray5: #333;

    --c-primary: #073743;
    --c-secondary: #bdecfc;
    --c-secondary-light: #ebfaff;
    --c-theme-text: var(--c-black);
    --c-theme-text-secondary: var(--c-gray4);
    --c-theme-contrast: var(--c-white);
    --c-theme-content-bg: rgba(255,255,255,0.3);
    --c-theme-ui-bg: var(--c-white);
    --c-theme-border: var(--c-gray5);

    --t-title: 500 1.1rem var(--font);
    --t-subtitle: 300 1rem var(--font);
    --t-meta: 500 0.8rem var(--font);


    font-family: var(--font);

}


/* ---- Base Styling ---- */

h1, h2, h3, h4, p, a {
    color: var(--c-theme-text);
}

/* ---- Grid row ---- */
.container {
    max-width: 68.75rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;

    overflow-x: hidden;
}

/* https://heydonworks.com/article/the-flexbox-holy-albatross-reincarnated/ */
.row {
    display: flex;
    flex-wrap: wrap;
    --modifier: calc(32rem - 100%);
    margin: calc(0.5rem * -1);
}

.row > .col {
    flex-grow: 1;
    flex-basis: calc(var(--modifier) * 9999);
    margin: 0.5rem;
  }

.section {
    margin-bottom: 8rem;
    overflow: visible;
}


/* ---- Elements ---- */
.title {
    position: relative;
    font: var(--t-title);
}

.title.-is-xl {
    font-size: 8rem;
    font-weight: 900;
}
.title.-is-lg {
    font-size: 2rem;
}

.sup {
    padding-left: 0.2rem;

    font-size: clamp(0.8rem, 50%, 2rem);
    font-weight: 400;

    color: var(--c-theme-text-secondary);
}

.subtitle, .label {
    font: var(--t-subtitle);
    color: var(--c-theme-text-secondary);
}

.label {
    display: block;
    margin-bottom: calc(var(--space)/2);
}

.meta {
    font: var(--t-meta);
    color: var(--c-theme-text-secondary);
}

.icon-sm {
    width: 1.875rem;
    height: 1.875rem;
}

.btn-primary, .btn-secondary, .btn-icon {
    display: inline-block;

    padding: var(--space-sm) var(--space);

    border-radius: 4rem;

    text-decoration: none;

    cursor: pointer;
}
.btn-primary {
    background-color: var(--c-primary);
    color: var(--c-theme-contrast);
}
.btn-primary:hover {
    background-color: var(--c-secondary);
    color: var(--c-primary);
}

.btn-secondary {
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
}
.btn-secondary:hover {
    border-color: var(--c-secondary);
}

.btn-icon {
    padding: var(--space-sm);
    background-color: transparent;
    border: 1px solid var(--c-primary);
}

input[type="text"], select {
    padding: var(--space-sm);

    color: var(--c-theme-text);

    border: 1px solid var(--c-theme-border);
    border-radius: var(--rad-sm);
    background-color: var(--c-theme-content-bg);

}

/* ---- Components ---- */
.card {
    position: relative;
    padding: var(--space);

    border: 1px solid var(--c-theme-border);
    border-radius: var(--rad);

    backdrop-filter: blur(5rem);
    background-color: var(--c-theme-content-bg);
}

.color-picker {
    position: relative;
    width: 2rem;
    height: 2rem;
    /* margin: 1.5rem auto; */

    border-radius: var(--rad);
    border: 1px solid var(--c-primary);

    overflow: hidden;
}
.color-picker::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 2rem;
    height: 2rem;

    border-radius: var(--rad);

    background-color: var(--c-primary);

    overflow: hidden;
    pointer-events: none;
}
.color-picker input {
    width: calc(100% + 1rem);
    min-height: calc(100% + 1rem);
    margin-left: -5px;
    margin-top: -5px;

    border: none;
    background: transparent;
}

.sparkline {
    stroke: var(--c-primary);
    fill: none;
}

.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: var(--c-theme-content-bg);
    backdrop-filter: blur(0.5rem);

    display: none;
}
.modal {
    max-width: var(--bp-sm);
    margin: 10vh auto 0 auto;
    padding: var(--space-lg);

    border: var(--c-theme-border);
    border-radius: var(--rad);
    background-color: var(--c-theme-ui-bg);


    overflow: hidden;
}
    .modal-wrapper.-is-open {
        display: block;
    }

/* ---- Modifiers ---- */

.p-v {
    padding-top: var(--space);
    padding-bottom: var(--space);
}
.p-h {
    padding-left: var(--space);
    padding-right: var(--space);
}
.p {
    padding: var(--space);
}
.p-lg {
    padding: var(--space-lg);
}
.m-v {
    margin-top: var(--space);
    margin-bottom: var(--space);
}
.m-h {
    margin-left: var(--space);
    margin-right: var(--space);
}
.m {
    margin: var(--space);
}
.m-b-sm {
    margin-bottom: calc(var(--space) / 1.5);
}

.t-center {
    text-align: center;
}
.t-right {
    text-align: right;
}

.t-scale-lg {
    font-size: clamp(2rem, 10vw, 9rem);
    font-weight: 1000;
}

.b-round {
    border-radius: var(--rad);
}

.bg-radial-color {
    background: radial-gradient(circle at top center, var(--c-secondary) 0%, var(--c-theme-contrast) 50%) fixed;
}

.-is-top-right {
    position: absolute;
    top: var(--space);
    right: var(--space);
}

/* ---- Landing page ---- */
.nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.nav ul {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    padding: var(--space);
    padding-bottom: var(--space);
}
.nav li:not(:first-of-type) {
    margin-left: var(--space);
}
.nav a {
    text-decoration: none;
    color: var(--c-primary);
}
.nav a:hover {
    text-decoration: underline;

    background: var(--c-secondary);
}

.footer {
    background-color: var(--c-primary);
    color: var(--c-white);
}
footer .icon-sm {
    color: var(--c-primary);
}

.bg-light {
    background-color: var(--c-secondary-light);
}


/* ---- Themes ---- */
[data-theme="dark"] {
    --c-theme-contrast: var(--c-black);
    --c-theme-text-secondary: var(--c-gray2);
    --c-theme-text: var(--c-gray1);
    --c-theme-border: var(--c-gray5);
    --c-theme-content-bg: rgba(0,0,0,0.3);
    --c-theme-ui-bg: var(--c-black);
}