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

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        var(--font-main);

    font-size: 16px;

    line-height: 1.7;

    color:
        var(--color-text);

    background:
        var(--color-background);

    -webkit-font-smoothing:
        antialiased;

}

img {

    max-width: 100%;

    height: auto;

    display: block;

}

a {

    color:
        inherit;

    text-decoration:
        none;

}

button,
input,
textarea,
select {

    font:
        inherit;

}

button {

    cursor:
        pointer;

}

h1,
h2,
h3,
h4 {

    margin-top:
        0;

    line-height:
        1.2;

    color:
        var(--color-blue);

}

h1 {

    font-size:
        clamp(2.5rem, 5vw, 4.5rem);

}

h2 {

    font-size:
        clamp(2rem, 4vw, 3rem);

}

p {

    margin-top:
        0;

}

.skip-link {

    position:
        absolute;

    left:
        -9999px;

    top:
        10px;

}

.skip-link:focus {

    left:
        10px;

    z-index:
        9999;

    padding:
        12px 20px;

    color:
        white;

    background:
        var(--color-blue);

}