/* CSS by Drew Bruner */

/* Color Palette (80's Synthwave by James Menendez at https://color.adobe.com)
Royal Orchid:   #A8119E
Dark Magenta:   #8B2A8C
Bright Amber:   #F5C818
Turquoise:      #18F5DC
Verdigris:      #08A896
Prussian Blue:  #022859
Dust Gray:      #D8D8D0
Shadow Gray:    #231F20
*/

/* Base Style */
.no-wrap {
    white-space: nowrap;
}

body {
    background-color: #D8D8D0;
    color:#231F20;
    display: grid;
    font-family: sans-serif;
    grid-template-rows: auto auto 1fr auto;
    margin: 0;
    min-height: 100dvh;
}

p {
    font-size: 1.25rem;
}

header {
    text-align: center;

    h1 {
        font-size: 3rem;
        text-transform: uppercase;
    }
    
    p {
        font-style: italic;
        font-weight: 300;
    }
}

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

nav {
    ul {
        align-items: center;
        display: flex;
        flex-direction: column;
        list-style-type: none;
        padding-left: 0;
        text-align: center;
    
        li {
            background-color: #08A896;
            width: 100%;
    
            a {
                display: block;
                font-weight: 300;
                padding: 0.75rem;
                text-transform: uppercase;
            }
        }
    }
}

main {
    padding: 0 1rem;
    
    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-weight: 300;
        font-size: 1.5rem;
        text-align: center;
    }
    
    .sub-nav {
        align-items: center;
        display: flex;
        flex-direction: column;
        list-style-type: none;
        padding-left: 0;
        text-align: center;

        li {
            width: 100%;

            a {
                background-color: #08A896;
                border-radius: 50rem;
                color: #231F20;
                display: block;
                font-weight: 300;
                margin: 0.25rem 0;
                padding: 0.75rem;
            }
        }
    }
    
    a {
        color: #A8119E;
    }
    
    img {
        display: block;
        margin: 0 auto;
        &#headshot {
            border-radius: 25%;
        }
        &#certificate {
            max-width: 500px;
            min-width: 300px;
            width: 75%;
        }
        &.project-img {
            max-width: 750px;
            width: 90%;
        }
        &#orderingApp {
            border-radius: 1rem;
            width: 50%;
        }
    }
    
    ul {
        font-size: 1.25rem;
        list-style-type: '– ';
    }
}

footer{
    border-top: 1px solid #231F20;

    p   {
        padding: 0 0.5rem;
        font-size: 0.75rem;
        font-style: italic;
    }
}

@media screen and (min-width: 768px) {
    body {
        margin: 0 auto;
        max-width: 75%;
    }

    nav ul {
        flex-direction: row;
    }

    main .sub-nav {
        flex-direction: row;

        li {
            margin: 0 0.5rem;
        }
    }

    #orderingApp {
        max-width: 300px;
    }
}