@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Gruppo&family=Nunito:wght@300&family=Playfair+Display+SC&display=swap');
@import url(components/container.css);
@import url(components/burger.css);
@import url(components/navbar.css);
@import url(components/header.css);
@import url(components/footer.css);
@import url(components/dialog.css);
@import url(ui/buttons.css);
@import url(ui/links.css);
@import url(ui/social-icons-list.css);
@import url(ui/titles.css);
@import url(ui/inputs.css);
@import url(ui/picture.css);
@import url(ui/texts.css);
@import url(layouts/contacts.css);
@import url(layouts/about.css);
@import url(layouts/gallery.css);
@import url(layouts/artwork.css);
@import url(layouts/index.css);

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

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}


.gruppo-regular {
    font-family: "Gruppo", sans-serif;
    font-weight: 400;
    font-style: normal;
}

:root {
    --font-family: "Nunito", sans-serif;

    --fs-100: clamp(0.75rem, calc(0.7rem + 0.08vw), 0.81rem);
    --fs-200: clamp(0.88rem, calc(0.85rem + 0.08vw), 0.94rem);
    --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

    --clr-text: #595959;
    --clr-text-grey: #b3b3b3;
    --clr-accent: #b18f78;
}

body {
    font-family: var(--font-family);
    font-size: var(--fs-400);
    background-color: #fff;
    color: var(--clr-text);

    display: flex;
    flex-direction: column;
}

html, body {
    min-height: 100vh;
}

.logo {
    font-family: "Amatic SC", sans-serif;
    font-weight: 400;
    font-size: var(--fs-600);
    font-style: normal;
    text-transform: uppercase;
}

.main {
    position: relative;
    padding-block: 0;
    flex-grow: 1;
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease;
}

.fade-in.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transition: none;
    }
}

@media screen and (max-width: 768px) {
    .main__container {
        margin-top: 2em;
        padding-block: 1.5em;
    }
}