/*CSS Reset*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    background: var(--background-color);
    color: var(--text-color);
}

body {
    display: grid;
    grid-template-rows: auto 1fr;
}

/*body {
    overflow-y: hidden;
}*/


main,
header,
aside {
    line-height: normal;
}

/* Set base font properties */
html {
    font-size: 16px;
}

:root {
    font-size: clamp(0.8em, 1.5vw, 1.2em);

    /* Fonts */
    --font-header: "Barlow Condensed", sans-serif;
    --font-header-weight: 600;
    --font-header-style: normal;

    --font-paragraph: "Source Sans 3", sans-serif;
    --font-paragraph-weight: 400;
    --font-paragraph-style: normal;

    /* Spacing */
    --button-padding: 10px 20px;
    --border-radius: 8px;

    /*--------------------------------------------------*/
    /* Colors */
    --text-color: hsl(191, 53%, 10%);
    --background-color: hsl(191, 53%, 95%);
    --bg-tint-color: hsl(191, 53%, 90%);
    --drop-shadow-color: color-mix(in srgb, var(--text-color), transparent 50%);
}



h1,
h2,
h3,
h4,
h5,
h6,
button,
a {
    font-family: var(--font-header);
    font-weight: var(--font-header-weight);
    font-style: var(--font-header-style);
    color: var(--text-color);
}

h1 {
    font-size: 3rem;
}

h4,
button,
a {
    font-size: 1.1rem;
    width: clamp(45px, 1.5em, 60px);
}

button img {
    height: clamp(45px, 1.5em, 60px);
}