@font-face {
    font-family: noto-sans;
    font-weight: 400;
    src: url('/src/fonts/NotoSans-Regular.ttf');
}

@font-face {
    font-family: noto-sans;
    font-style: italic;
    src: url('/src/fonts/NotoSans-Italic.ttf');
}

@font-face {
    font-family: noto-sans;
    font-weight: 700;
    src: url('/src/fonts/NotoSans-Bold.ttf');
}

@font-face {
    font-family: noto-sans;
    src: url('/src/fonts/NotoSans-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

[x-cloak] {
    display: none !important;
}

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

:root {
    --main-background: white;
    --second-background: hsl(0, 0%, 94%);
    --main-text: black;
    --second-text: #32393b;
    --main-accent: #2d7aa7;
    --second-accent: #f1f7fc;
    --third-accent: #379ad5;

    --width-screen: 100%;
    --main-shadow: rgba(0, 0, 0, 0.2);

    scroll-padding-top: 80px;
    scroll-behavior: smooth;
}

body {
    display: grid;
    grid-template-areas: 
        "nav"
        "main"
        "footer"
    ;
    grid-template-rows: 4rem auto max-content;
    justify-items: center;
    font-family: "noto-sans";
    font-weight: 400;
    gap: 2rem;
    min-height: 100vh;
}

body nav {
    grid-area: nav;
}

body main {
    grid-area: main;
    width: var(--width-screen);
}

body footer {
    grid-area: footer;
}

h1 {
    font-size: clamp(2.25rem, 7vw, 6rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
}

h3 {
    font-size: clamp(1.5rem, 3.5vw, 1.75rem);
    font-weight: 400;
}

h4 {
    font-size: clamp(1.25rem, 3vw, 1.35rem);
    font-weight: 400;
}

h5 {
    font-size: 0.875rem;
    font-weight: 700;
}

h6 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 400;
    font-style: italic;
}

@media (min-width: 768px) {
    body {
        grid-template-rows: 6rem auto max-content;
    }
}