@charset "utf-8";

:is(:root,*,*::before,*::after,::backdrop) {
    box-sizing: border-box;
    --white: hsl(0 0% 100%);
    --header: 2.75rem;
    @media screen and (width > 81.125rem) {
        --header: 4.375rem;
    }
    @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
    }
}
html {
    position: relative;
    min-block-size: 100vh;
    scroll-behavior: smooth;
    @media screen and (prefers-reduced-motion: reduce) {
        scroll-behavior: auto;
    }
}
body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    min-block-size: 100vh;
    margin-block: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
    font-size: 1rem;
    font-family: Roboto, sans-serif;
    text-rendering: optimizeLegibility;
    background-color: var(--liberty-gray-44);
    color: var(--liberty-blue);
}
:is(#header-container, #footer-container) {
    flex-grow: 0;
    flex-shrink: 0;
}
main {
    position: relative;
    display: block;
    background-color: var(--white);
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    padding-block-start: calc(var(--header) * 2);
}
section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-inline: auto;
    inline-size: min(calc(100% - 2rem), 54rem);
    background-color: var(--white);
    @media screen and (width > 48rem) {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    > div {
        inline-size: 50%;
        @media screen and (width > 48rem) {
            inline-size: auto;
        }
    }
}
picture {
    position: relative;
    display: block;
    flex-basis: calc(100% / 2.5);
    aspect-ratio: 1 / 1;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 50%;
}
img {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
a {
    color: var(--liberty-dark-teal);
    font-weight: bold;
    :is(:visited, :active) {
        color: var(--liberty-dark-teal);
        font-weight: bold;
    }
}