/* 
Robert Minkler
CSD 340
BioSite
 */


body {
    font-family: Tahoma, Helvetica, sans-serif;
    background-color: #e5f4f3;
    margin: 0;
}

/* Text and Link Formatting */
h1 {
    color: #012e40;
}

h2 {
    color: #012e40
}

h3 {
    color: #025159;
    font-style: italic;
}

a {
    color: #025159
}

a:hover, a:active {
    color: #03a696;
}

a:visited {
    color: #038c8c;
}

/* General Page Background Color Blocks */
.white-block {
    background-color: #ffffff;
    padding: 100px;
}

.md-blue-block {
    background-color: #03a696;
    padding: 100px;
}

.lt-blue-block {
    background-color: #e5f4f3;
    padding: 100px;
}

/* Circle Images */
.md-circle-img {
    height: 250px;
    clip-path: circle();
}

/* Blockquote */
blockquote {
    padding: 30px;
    border-left: 3px solid #025159;
    background-color: #e5f4f3;
    box-shadow: 5px 8px 15px #02515955;
}

/* Image Card Formatting */
.card-img {
    object-fit: cover;
    border-radius: 25px;;
    width: 250px;
    height: 250px;
    box-shadow: 5px 5px 30px rgba(0,0,0,.4);
}

.card-caption {
    color: #ffffff;
    font-size: .9em;
    font-style: italic;
}

.card-figure {
    width: 250px;
}

figure {
    text-align: center;
}

/* Header CSS */
header {
    font-size: 1.2em;
    font-weight: 500;
    border-top: 30px solid #038c8c;
    background-color: #025159;
    padding: 0px 50px;
    overflow: hidden;
}

header a, header a:visited {
    padding: 26px 30px 26px 10px;
    display: block;
    float: left;
}

#orange-nav-bar {
    background-color: #f28705;
    margin-top: 50px;
    height: 5px;
    width: 60%;
    position: absolute;
    right: 0;
}

/* Navigation Link CSS for both nav panels */
nav a, nav a:visited {
    color: #e5f4f3;
    text-decoration: none;
}

nav a:hover, nav a:active {
    color: white;
    text-decoration: underline;
    text-shadow: 2px 2px 2px #025159, 
                 0px 3px 10px #e5f4f3;
}

/* Footer CSS */
footer {
    background-color: #025159;
    text-align: center;
    padding: 30px 10px 5px 10px;
    color: #e5f4f3;
    white-space: nowrap;
}

.text-divider {
    margin: 40px;
    color: #f28705;
}

footer p {
    margin: 20px auto 10px auto;
    font-size: .8em;
}

/* Column layout */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.col-center {
    place-items: start center;
}

.justify-center {
    justify-self: center;
}

.col-2-text-block {
    grid-column: span 2;
    padding: 0 0 0 100px;
}


/* Hero Image and text */
.hero-img {
    max-width: 400px;
    max-height: 400px;
    display: block;
    margin: 0 auto 0 50px;
}

.hero-img-container {
    width: 100%;
    grid-column: 2;
    grid-row: 1;
}

.hero-text {
    padding: 0 0 0 50px;
    grid-column: 1;
    grid-row: 1;
}

.image-and-text-container {
    padding: 0 0 50px 0;
}

/* Three Image Row configuration */
.three-image-bar {
    padding: 50px;
    place-items: start center;
}


/*
Responsive Design for small screens
*/
@media screen and (max-width: 1025px) {

    /* Switch to single col layout on small screens */
    .grid-3-col, .grid-2-col {
        grid-template-columns: 1fr;
    }

    /* Reduce padding on small screens */
    .white-block, .md-blue-block, .lt-blue-block {
        padding: 30px;
    }

    /* Shrink Hero image on small screens */
    .hero-img {
        max-width: 250px;
    }

    /* Hide orange bar on nav 
    #orange-nav-bar {
        visibility: hidden;
    }

*/

    /* Hobbies text uses one column on mobile */
    .col-2-text-block {
        padding: 20px 20px;
        grid-column: 1;
    }

    /* Hero one column configuration */
    .hero-img-container {
        text-align: center;
        grid-row: 1;
        grid-column: 1;
    }

    .hero-img {
        margin: 0 auto 20px auto;
    }

    .hero-text {
        grid-row: 2;
        grid-column: 1;
    }

    /* Center top navigation on small screens */
    nav {
        width: 100%;
    }

    .nav-container {
        width: fit-content;
        margin-right: auto;
        margin-left: auto;
    }
  }