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

    :root {
        --baseFontSize: 24px;
    }

    html{
        width: 100%;
        font-size: var(--baseFontSize);
    }

    body {
        container-name: ContainerBody;
        container-type: inline-size;
		font-family: monospace, sans-serif;
		width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    a {
        text-decoration: none;
        color: black;
    }

    ul {
        list-style : none;
    }

    main{
        display: flex;
        flex-direction: column;
        gap: .4rem;
        flex-grow: 1;
        max-width: 800px;
        width: 80%;
        margin: auto;
        justify-content: flex-start;
    }

    main.Post {
        header {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            .PostTitle{
                font-size: 2rem;
                text-transform: capitalize;
            }
            .PostAuthor {
                font-size: .6rem;
                text-decoration: underline;
                text-transform: uppercase;
            }
        }
        article {
            font-size: .8rem;
            img{
                width: 8rem;
                height: 8rem;
            }
        }
    }
}

@layer ContainerQueries {
    @container ContainerBody (width <= 850px) {
        main.Post {
            header {
                .PostTitle {
                    font-size: 1.6rem;
                }
            }
        }
    }

    @container ContainerBody (width <= 500px){
        main {
            width: 100%;
            padding-inline: .4rem;
        }
    }

}