/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=22V150kcglL4Zvw8Eq6eXhmkwen */

/* Feel free to copy&paste color codes to your application */


/* As hex codes */

.color-primary-0 { color: #4F805E }	/* Main Primary color */
.color-primary-1 { color: #9DBAA6 }
.color-primary-2 { color: #709A7D }
.color-primary-3 { color: #366645 }
.color-primary-4 { color: #1E552F }

.color-complement-0 { color: #AD746B }	/* Main Complement color */
.color-complement-1 { color: #FBD9D4 }
.color-complement-2 { color: #D0A098 }
.color-complement-3 { color: #8A524A }
.color-complement-4 { color: #723329 }



/* As RGBa codes */

.rgba-primary-0 { color: rgba( 79,128, 94,1) }	/* Main Primary color */
.rgba-primary-1 { color: rgba(157,186,166,1) }
.rgba-primary-2 { color: rgba(112,154,125,1) }
.rgba-primary-3 { color: rgba( 54,102, 69,1) }
.rgba-primary-4 { color: rgba( 30, 85, 47,1) }

.rgba-complement-0 { color: rgba(173,116,107,1) }	/* Main Complement color */
.rgba-complement-1 { color: rgba(251,217,212,1) }
.rgba-complement-2 { color: rgba(208,160,152,1) }
.rgba-complement-3 { color: rgba(138, 82, 74,1) }
.rgba-complement-4 { color: rgba(114, 51, 41,1) }



/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */

/*** Global ***/
/* Fonts:
 *  ModernAntiquaBook
 *  LibertinusMath
 * */

body {
    font-family: "LibertinusMath", serif;
}

h1, h2, h3, h4, h5, h6, figcaption {
    font-family: "ModernAntiquaBook", serif;
}

h2 {
    text-align: center;
}

.strike {
    text-decoration: line-through;
}

a {
    color: #1E552F;
}

a:visited {
    color: #723329;
}


a:hover {
    color: #9DBAA6;
}

a:visited:hover {
    color: #FBD9D4;
}

figure.banner {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    pointer-events: none;
}

.banner figcaption {
    font-size: .75em;
    padding: 2px;
    border: 1px;
    border-bottom-left-radius: 2px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.75);
    right: 0;
    top: 0;
    pointer-events: auto;
}

.banner img {
    width: 100%;
    height: auto;
    max-height: 5040px;
}

section {
    position: relative;
    height: 100%;
    overflow: hidden;
    /* background: linear-gradient(rgba(0,0,0, 0), #366645); */
}

section.centered>.banner {
    position: absolute;
}

section.centered>.banner>img {
    position: relative;
    z-index: -10;
}

section.centered>.banner~* {
    box-sizing: border-box;
    padding: 1em;
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
}

section.centered>.banner+* {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin: 200px auto 0 auto;
}

/*
section>.banner~*:last-child::after {
    content: "";
    display: table;
    min-height: calc(100vh - 800px);
}
*/

/*** Header ***/
header {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #424949;
}

header h1 {
    padding-left: 14px;
    color: white;
    display: inline;
    position: absolute;
}

header a, header a:visited {
    color: white;
    text-decoration: none;
}

header a:hover {
    color: #723329;
}

@media (max-width: 800px) {
    header {
        padding: 14px 16px;
    }
    header h1 {
        position: relative;
        padding: 0;
    }
}

/*** Navigation ***/

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header nav ul {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 800px) {
    header nav ul {
        flex-direction: column;
    }
}

header nav ul li {
    display: block;
}

header nav ul li a {
    display: block;
    color: white;
    padding: 32px 10px;
    text-decoration: none;
}

header nav ul li a:visited {
    color: white;
}

header nav ul li a:hover {
    color: #723329;
    background-color: #709A7D ;
}


/*** Footer ***/

footer {
    background-color: #424949;
    color: white;
    padding: 1em 0;
}

footer p {
    text-align: center;
}

footer a {
    color: white;
}

footer a:visited {
    color: white;
}

footer a.cc {
    display: inline-block;
}

footer a.cc img {
    height: 22px!important;
    margin-left: 3px;
    vertical-align: text-bottom;
}


/*** Bio **/

#bio {
    max-width: 800px;
    margin: 0 auto;
}

.selfie {
    position: relative;
    margin: 0;
    padding: 0;
    width: 30%;
    float: right;
    display: block;
}

@media (max-width: 800px) {
    .selfie {
        width: 100%;
        float: none;
    }
}

.selfie figcaption {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    background-color: white;
}

.selfie img {
    width: 100%;
    height: auto;
    border-radius: 100%;
}

#bio h2 {
    text-align: center;
}


/*** Skills ***/

#skills {
    padding-bottom: 50px;
    background-color: #424949;
    margin-top: 0;
}

#skills h2 {
    color: white;
}

.skill-category-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.skill-category {
    margin: 20px;
    max-width: 800px;
    border-radius: 3px;
    background-color: white;
}

.skill-category h3 {
    text-align: center;
}

.skill-category ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.skill-category ul li {
    display: inline-block;
    padding: .25em .5em .15em;
    margin: .25em;
    background-color: lightgray;
    border-radius: 2px;
}


/*** Education ***/

#education {}


/*** Experience ***/

#experience {}


/*** Certifications ***/

#certifications {
    overflow: hidden;
}

#certifications table {
    table-layout: fixed;
    width: 100%;
    border: none;
}

#certifications thead {
    text-align: left;
    text-decoration-line: underline;
}

#certifications th, #certifications td {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 20px;
}

#certifications thead th:nth-child(1) {
    min-width: 12ch;
    width: 16%;
}

#certifications thead th:nth-child(2) {
    min-width: 24ch;
    width: 22%;
}

#certifications thead th:nth-child(3) {
    min-width: 20ch;
    width: 37%;
}

#certifications thead th:nth-child(4) {
    min-width: 8ch;
    width: 11%;
}

#certifications thead th:nth-child(5) {
    min-width: 8ch;
    width: 11%;
}

/*** Portfolio ***/

#portfolio {
    padding-bottom: 50px;
    margin-top: 0;
}

.portfolio-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.portfolio-piece {
    margin: 20px;
    max-width: 400px;
    border-radius: 3px;
    border: 1px solid #424949;
    background-color: white;
}

.portfolio-piece h3 {
    text-align: center;
    padding: 10px;
}

.portfolio-piece p {
    padding: 10px;
}

.portfolio-piece .button {
    display: block;
    max-width: 50%;
    margin: 10px auto;
    text-align: center;
    color: white;
    background-color: #4F805E;
    border: none;
    border-radius: 1px;
    padding: 10px;
}

.portfolio-piece .button:hover {
    background-color: #9DBAA6;
}

.portfolio-piece .button:active {
    background-color: #AD746B;
}

/*** Contact ***/

#contact {}

.contact-form label {
    box-sizing: content-box;
}

.contact-form label p, .contact-form label h4 {
    display: inline-block;
    box-sizing: content-box;
    width: 10ch;
    margin: 10px 0;
    padding: 0;
}

.contact-form input {
    display: inline-block;
    box-sizing: content-box;
    width: 100%;
    border: none;
    border-bottom: 2px solid black;
}

.contact-form textarea {
    border: none;
    border-bottom: 2px solid black;
    width: 100%;
    height: 10vh;
}

.contact-form button {
    color: white;
    background-color: #4F805E;
    border: none;
    border-radius: 2px;
    height: 40px;
}

.contact-form button:hover {
    background-color: #9DBAA6;
}

.contact-form button:active {
    background-color: #AD746B;
}

.contact-form .name { grid-area: name; }
.contact-form .email { grid-area: email; }
.contact-form .subject { grid-area: subject; }
.contact-form .phone { grid-area: phone; }
.contact-form .message {grid-area: message;}
.contact-form .submit { grid-area: submit; }

.contact-form {
    display: grid;
    grid-template:
        'name email'
        'phone subject'
        'message message'
        'submit submit '
        ;
    grid-gap: 30px;
}


@media (max-width: 600px) {
    .contact-form {
        grid-template:
            'name'
            'email'
            'phone'
            'subject'
            'message'
            'submit'
            ;
    }
}