:root {
    --kr-primary: #55B5C1;
    --kr-dark: #044B61;
    --kr-deep: #033747;

    --kr-black: #000000;
    --kr-white: #ffffff;

    --kr-text: #172027;
    --kr-muted: #69767d;

    --kr-bg: #ffffff;
    --kr-soft: #f4f7f7;
    --kr-soft-2: #eef3f4;
    --kr-border: #dbe5e7;

    --kr-content: 860px;
    --kr-wide: 1240px;
    --kr-site: 1440px;

    --kr-radius-sm: 10px;
    --kr-radius-md: 18px;
    --kr-radius-lg: 28px;

    --kr-shadow:
        0 18px 50px rgba(3,55,71,.09);

    --kr-transition:
        180ms ease;

    --kr-header-height: 76px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--kr-bg);
    color: var(--kr-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--kr-dark);
}

.kr-container {
    width: min(var(--kr-wide), 92%);
    margin-inline: auto;
}

.kr-content-width {
    width: min(var(--kr-content), 92%);
    margin-inline: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.kr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 10px 20px;

    border: 0;
    border-radius: 999px;

    background: var(--kr-dark);
    color: var(--kr-white);

    font-weight: 750;
    text-decoration: none;

    transition:
        transform var(--kr-transition),
        background var(--kr-transition);
}

.kr-button:hover {
    color: var(--kr-white);
    background: var(--kr-deep);
    transform: translateY(-2px);
}

::selection {
    background: var(--kr-primary);
    color: var(--kr-deep);
}