@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    color-scheme: light dark;
    --max-width: 1440px;
    --med-width: 810px;
    --font-family-header: 'IBM Plex Mono', monospace;
    --font-family-body: system-ui, sans-serif;
    /* COLORS */
    --orange: #F05454;
    --white: #E8E8E8;
    --navy: #30475E;
    --black: #222831;

    --background: var(--white);
    --text-color: var(--black);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--black);
        --text-color: var(--white);
    }
}


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

html, body {
    background: var(--background);
    color: var(--text-color);
    font-family: var(--font-family-body);
}




h1 {
    font-size: clamp(7rem, 2rem, 4rem);
    text-align: center;
    text-transform: uppercase;

    @media (width <= 810px) {
        font-size: 4rem;
    }
}

.header {
    font-size: 1.5rem;
    display: flex;
    max-width: var(--max-width);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    font-family: var(--font-family-header, san-serif);
    border-bottom: 2px solid light-dark(var(--black), var(--white));

    @media (width <= 810px) {
        flex-direction: column;
    }

    .lockup {
        padding: 0.5rem;
        font-size: 1.99rem;
        font-weight: 600;

        a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            color: var(--text-color);
            text-decoration: none;
            svg {
                width: 3.5rem;
                height: auto;
                fill: var(--text-color);
            }

            :hover {
                text-decoration: underline;
            }
        }
    }

    .primary-nav {
        text-align: right;

        @media (width <= 810px) {
            text-align: center;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                display: inline-block;
                padding: 0.5rem;

                a {
                    text-decoration: none;
                    color: var(--text-color);

                    &.active {
                        text-decoration: underline;
                    }
                }
            }
        }
    }


}





.container {
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 1.5rem;

    @media (width <= 810px) {
        max-width: var(--med-width);
    }
}




img { width: 100%; padding: 0; margin: 0;}

.image-placement__top { object-position: top; }
.image-placement__bottom { object-position: bottom; }
.image-placement_left { object-position: left; }
.image-placement_right { object-position: right; }

p { padding: 1.25rem 0; }




.about_me {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    img { width: 700px; height: auto; flex: 1; }
    p { flex: 1; padding: 2.5rem; font-size: 1.8rem;}

    @media (width <= 1150px) {
        flex-direction: column;
    }
}


.note_image {
    margin-top: 1.5rem;
    height: 550px;
    background-color: #ccc;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

article {
    width: 75vw;
    margin: 0 auto;
    margin-top: 0px;
    margin-top: 2.5rem;

    header {
        .description {
            text-align: center;
            font-family: var(--font-family-header);
            background-color: var(--orange);
            padding: 0.5rem;
            color: var(--white);
            border-bottom: 4px solid var(--orange);
        }
    }

    .note_content {
        width: 75vw;
        margin: 0 auto;
        margin-top: 2.5rem;

        blockquote {
            margin-left: 2rem;
            border-left: 0.25rem solid var(--orange);
            padding: 1.25rem;
            background: ghostwhite;
            color: var(--black);
        }
    }

}

.note_cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;

    @media (width <= 810px) {
        justify-content: center;
        flex-direction: column;
    }

    .note_card {
        width: calc(50% - 4rem);
        margin: 0 auto;
        @media (width <= 810px) {
            width: auto;
        }
        background-color: light-dark(var(--black), var(--white));
        padding: 1rem;
        /*box-shadow: 0 0 1rem rgba(0,0,0,0.2);*/
        transition: all 0.2s ease-in-out;

        img {
            width: 100%;
            max-height: 275px;
            object-fit: cover;
            overflow: hidden;
        }
    }
}