$background-color: #c7c7c7;
$primary-color: #333;
$secondary-color: #d11414;
$text-color: #123455;

body {
    font-family: sans-serif;
    background-color: $background-color;

    header {
        nav {
            ul {
                display: flex;
                list-style: none;
                gap: 1em;

                li {}
            }

            a {
                &:hover {}
            }
        }
    }

    div {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    main {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;

        h1 {}

        h2 {}

        h3 {}

        p {
            display: flex;
            margin-block-start: unset;
            margin-block-end: unset;
        }

        div.feature {
            flex-direction: row;
            background-color: white;
            border-radius: 1em;
            gap: 1em;
            margin: auto;
            padding: 1.5em;

            img.portriat {
                width: 15em;
                border-radius: 50%;
            }

            div.summary {
                align-items: start;
                gap: 0.75em;

                div.row {
                    flex-direction: row;
                    gap: 0.5em;

                    img.icon {
                        width: 1.5em;
                    }
                }


            }
        }

        div.content-container {
            max-width: 50em;
 
            // margin: auto;

            div.content-section {

                div.content-inner {
                    flex-flow: row wrap;
                    gap: 1em;
                    align-items: stretch;

                    div.project {
                        background-color: white;
                        border-radius: 1em;
                        flex: 1;
                        padding: 0.5em;
                        align-content: flex-start;
                        justify-content: flex-start;

                    }
                }
            }
        }

    }


    footer {
        text-align: center;
        // background: #eee;
        padding: 1em;
    }
}