@import 'properties.css';
@import 'variables.css';
@import 'shared.css';
@import 'fonts.css';

@import 'components/sky.css';
@import 'components/base.css';
@import 'components/post.css';
@import 'components/posts.css';
@import 'components/postslist.css';

@import 'components/about-me.css';
@import 'components/what-can-i-help-you-with.css';

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
    
    html {
        scroll-behavior: smooth;
    }
}

html {
    min-height: 100vh;
}

body {
    margin: 0;
    color: var(--body);
    font-family: 'Lexend', 'Verdana', sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    background-color: var(--background);
    transition: ease var(--short-animation-duration);
    transition-property: color, background-color;
}

a {
    font-weight: 400;
}

strong,
b {
    font-weight: 500;
}

i,
em {
    padding-right: 0.2rem;
}

figure {
    width: 100%;
    margin: 2rem 0;

    &:has(img) {
        text-align: center;
    }

    figcaption {
        margin: 0;
        font-size: 0.9rem;
    }
}

img {
    max-width: 100%;
}

* {
    text-wrap: pretty;
}