/* Michael Sterling
Intersession 2023 - INF 250
Michael Sterling's Final Project*/


/* Load web font */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@700&display=swap');

/* 
Entries marked with "global:" are styles universally utilized across all pages.

Table of Contents:
1) global: border box declaration
2) global: anchor element styles
3) global: header styles
4) global: background styling
5) global: body declaration
6) global: wrapper
7) global: header declarations
8) global: hero
9) global: content declarations
10) page-specific styling
11) global: footer styling
12) global: media queries
*/

/* 1 */
* {
    box-sizing: border-box;
}

/* 2 */
a:link {
    color: whitesmoke;
}

a:visited {
    color: whitesmoke;
}

/* 3 */
h2, h3 {
    font-family: 'Lexend', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 2em;
}

#hireMe {
    justify-content: center;
    margin-bottom: 0; 
}

#hireMe h3 {
    padding: 5px;
}

/* 4 */
.patternDisplay {
    background-image: url(pattern.jpg);
    background-repeat: repeat;
    background-size: cover;
}

.gradient {
    background-color: salmon;
    background-image: linear-gradient(to right, salmon, #F85441);
    background-repeat: no-repeat;
}

/* 5 */
body {
    color: whitesmoke;
    background-color: salmon;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 6 */
#wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

#headerNav {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: salmon;
}

/* 7 */
#headerNav h1 {
    margin-bottom: 0;
    font-family: 'Lexend', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 4em;
}

#headerNav ul {
    padding: 0;
    list-style: none;
}

#headerNav li {
    display: inline;
    margin: 5px;
}

#headerNav a {
    text-decoration: none;
    transition: color 1s ease-out;
}

#headerNav a:hover {
    color: #F85441;
}

/* 8 */
#hero {
    display: flex;
    height: 30vh;
    justify-content: center;
    align-items: center;
}

#heroText {
    padding: 10px;
}

/* 9 */
.content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

section {
    padding: 5px;
    margin-bottom: 2.5%
}

#lastContentSection {
    margin-bottom: 0;
}

section p {
    padding: 2%;
}

section a {
    text-decoration: none;
    font-size: 1.1em;
    text-shadow: 2px 2px salmon;
}

figcaption a {
    text-shadow: none;
}

/* 10 */

/* 
Page-specific stylings will be marked by the page they are used in and their function
*/

/* final.html - Styles portrait image
Makes <img> dynamic. */
#portrait {
    max-width: 30vw;
    max-height: 30vh;
}

/* about.html - Styles image of Junction City
Makes <img> dynamic. */
#junctionCity {
    max-width: 40vw;
    max-height: 40vh;
}

/* resume.html - Styles selfie of me at Konza
Makes <img> dynamic. */
#konza {
    max-width: 30vw;
    max-height: 30vh;
}

/* resume.html - Styling of list items
Makes <li> look prettier by removing bullet */
.resumeList {
    list-style-type: none;
    font-weight: bold;
}

/* resume.html - Styles resume navigation header
Applies to <span> element */
#resumeNavHeader {
    font-family: 'Lexend', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 1.5em;
}

/* resume.html - Styles embedded YouTube video
Removes border around containing iFrame */
iframe {
    border: 0;
}

/* services.html - Styles nature picture
Makes <img> dynamic. */
#nature {
    max-width: 30vw;
    max-height: 30vh;
}

/* services.html - Style for only table on website
Applies to <table> element */
table, th, td {
    border: 1px solid whitesmoke;
    border-collapse: collapse;
    text-align: center;
    padding: 5px;
}

/* 11 */
footer {
    padding: 10px;
    text-align: center;
}

/* 12 */
@media (min-width: 600px) {
    section {
        line-height: 2em;
        margin-bottom: 1%;
    }

    .content {
        flex-wrap: nowrap;
        justify-content: space-around;
    }
}

@media (min-width: 1024px) {
    #wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 75%;
    }

    section {
        line-height: 2em;
        margin-bottom: 1%;
    }

    .content {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

@media (min-width: 1660px) {
    #wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 75%;
    }

    #headerNav {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        margin-bottom: 1.5%;
    }

    #headerNav h1 {
        margin-bottom: 3%;
    }

    section {
        line-height: 2em;
        margin-bottom: 1%;
    }

    .content {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}