@import url("fonts/fonts.css");
@import url("themes/themes.css");
@import url("animations.css");

:root {
    --header-h: 3rem;
    --footer-h: 5rem;
    --page-pad-x: 4rem;
    --max-page-w: calc(1280px - calc(2 * var(--page-pad-x)));
    --min-page-h: 100vh;
    --display-font-family: "Source Sans 3";
    --text-font-family: "Ubuntu";

    @media (max-width: 480px) {
        --page-pad-x: 2rem;
    }
}

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

html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    height: 100vh;
    position: relative;
    background-color: var(--theme-bg-color);
}

h1,
h2,
h3 {
    font-family: var(--display-font-family);
    line-height: 1.25;
    color: var(--theme-ui-text-color);
}

h1 {
    font-size: 3rem;
    font-variation-settings: var(--display-wght);
}

h2 {
    font-size: 1.25rem;
    font-variation-settings: var(--text-wght);
}

h3 {
    font-size: 1rem;
    font-variation-settings: var(--bold-wght);
}

a {
    font-family: var(--display-font-family), sans-serif;
    font-variation-settings: var(--text-wght);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--theme-ui-text-color);
    text-decoration: none;
    cursor: pointer;
}

p,
span {
    font-family: var(--text-font-family), sans-serif;
    font-variation-settings: var(--text-wght);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--theme-body-text-color);
}

.container {
    margin: 0 auto;
    max-width: var(--max-page-w);
    display: flex;
    gap: 2rem;

    @media (max-width: 1024px) {
        flex-direction: column;
    }
}

.page {
    padding: 0 var(--page-pad-x);
}

.icon {
    fill: var(--theme-ui-text-color);
}