body {
    background-color: #f6eee1;
}

/* ------------------------------------------------------------------------------- Nav */

.logo {
    width: 70px;
}

.nav-link {
  color: #334b35;
  text-decoration: none;
  position: relative;
}

.nav-link:hover {
    color: #000;
}

.nav-active {
    text-decoration: underline 1px;
}

/* ---------------------------------------------------------------------------- Colors */

.bg-green {
    background-color: #334b35;
}

/* ------------------------------------------------------------------------------ Text */

h1, h2, h3, h4, .ultra {
    font-family: "Ultra", serif;
}

.ultra {
    color: #334b35;
    font-size: 2rem;
}

h1 {
    font-size: 3.5rem;
    line-height: 4.5rem;
    color: #334b35;
}

.about-h1 {
    font-size: 2.5rem;
    line-height: 3.5rem;
}

h2, h3 {
    margin-bottom: 1rem;
    color: #334b35;
}

h5, p, table, li, .exo-2 {
    font-family: "Exo 2", sans-serif;
}

.yellow-highlight {
    background: linear-gradient(to bottom, #FFFFFF00 50%, #fdad16 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%; /* start hidden */
    transition: background-size 1s ease-in-out .3s;
}

.orange-highlight {
    background: linear-gradient(to bottom, #FFFFFF00 50%, #fd6037 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%; /* start hidden */
    transition: background-size 1s ease-in-out .3s;
}

.orange-highlight.in-view, .yellow-highlight.in-view {
    background-size: 100% 100%; /* grow across text */
}

.bg-green h2 {
    color: #f6eee1;
}

.bg-green h5, .bg-green p, .bg-green li, .bg-green li a, .project-nav a {
    color: #fff;
}

a {
    text-decoration: none;
}

.bg-green li a, .project-nav a, .project-nav-green a {
    text-decoration: underline 1px;
    transition: .2s ease-in-out;
}

.bg-green li a:hover, .project-nav a:hover, .project-nav-green a:hover {
    color: #fd6037;
}

.istok-web-font {
    font-family: "Istok Web", sans-serif;
    color: #334b35;
}

.noto-serif-font {
    font-family: "Noto Serif Display", serif;
    font-weight: 700;
}

.lexend-exa-font {
    font-family: "Lexend Exa", serif;
    font-weight: 500;
    color: #334b35;
}

.education tr td:first-child {
    font-family: "Ultra", serif;
    font-size: calc(1.275rem + .3vw);
    color: #334b35;
    table-layout: fixed;
    width: 170px;
}

.education h2, .skills h2, .skills h4, .project-nav-green a {
    color: #334b35;
}

.skills h4 {
    margin-top: 1.5rem;
}

.skills p {
    margin-bottom: .5rem;
}

.yellow-box-persona p, .yellow-box-persona li {
    color: #000;
}

.p-link {
    text-decoration: underline 1px;
    color: #000;
    transition: .2s ease-in-out;
}

.p-link:hover {
    color: #fd6037;
}

/* ------------------------------------------------------------------------------ Imgs */

.polaroid {
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
}

.yellow-border {
    border: 3px solid #fdad16;
}

.polaroid p {
    margin-bottom: 0;
    margin-top: .5em;
    color: #000;
    text-align: center;
}

.img-shadow {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
}

/* ------------------------------------------------------------------------------ Btns */

.circle-btn-anchor {
    position: relative;
}

.circle-btn {
    height: 100px;
    width: 100px;
    background-color: #fdad16;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 3px 3px #fff;
    position: relative;
    top: 50px;
    z-index: 1;
}

.ow-btn {
    height: 40px;
    width: 200px;
    background-color: #fd6037;
    border-radius: 20px;
    border: none;
    display: inline-block;
    box-shadow: 3px 3px #fff;
}

.og-btn {
    height: 40px;
    width: 200px;
    background-color: #fd6037;
    border-radius: 20px;
    border: none;
    display: inline-block;
    box-shadow: 3px 3px #334b35;
}

.ow-btn:hover, .og-btn:hover {
    box-shadow: none;
    position: relative;
    top: 3px;
    left: 3px;
}

.pt-btn {
    padding-top: 0.3rem;
}

.btn-wide {
    width: 240px;
}

/* --------------------------------------------------------------------------- Padding */

.py-row-header-index {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.py-row-header-about {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-row-header {
    padding-top: 0;
    padding-bottom: 2rem;
}

.py-row {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.py-row-persona-before {
    padding-top: 7rem;
    padding-bottom: 1rem;
}

.persona-bg {
    background: linear-gradient(#334b35 75%, transparent 25%);
}

/* ----------------------------------------------------------------------------- About */

.about-icon i {
    color: #fdad16;
}

.about-icon a {
    text-decoration: underline 1px;
    color: #000;
    transition: .2s ease-in-out;
}

.about-icon a:hover {
    color: #fd6037;
}

.yellow-box, .yellow-box-persona {
    background-color: #fdad16;
    display: inline-block;
    box-shadow: 3px 3px #fff;
}

tr.spaceunder>td {
    padding-bottom: 1.25em;
}

td {
    vertical-align: top;
}

/* ----------------------------------------------------------------------------- Hayle */

.img-radius {
    border-radius: 6px;
}

.hayle-box, .hayle-box-2 {
    border-radius: 6px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
}

.hayle-box p, .hayle-box-2 p {
    color: #000;
}

.hayle-box:nth-child(1) {
    background-color: #dbcbaf;
}

.hayle-box:nth-child(2) {
    background-color: #c78f30;
}

.hayle-box:nth-child(3) {
    background-color: #fff;
}

.hayle-box:nth-child(4), .hayle-box:nth-child(4) p {
    background-color: #000;
    color: #fff;
}

.hayle-box-2:nth-child(1) {
    background-color: #ece9e0;
}

.hayle-box-2:nth-child(2) {
    background-color: #c5a14b;
}

.hayle-box-2:nth-child(3) {
    background-color: #fff;
}

.hayle-box-2:nth-child(4), .hayle-box-2:nth-child(4) p {
    background-color: #1a1b1d;
    color: #fff;
}

/* ---------------------------------------------------------------------------- Footer */

footer .bg-green i {
    color: #fd6037;
    transition: .2s ease-in-out;
}

footer .bg-green i:hover {
    color: #fff;
}

footer .bg-green a {
    text-decoration: underline 1px;
    color: #fff;
    transition: .2s ease-in-out;
}

footer .bg-green a:hover {
    color: #fd6037;
}

footer i {
    color: #fd6037;
    transition: .2s ease-in-out;
}

footer i:hover {
    color: #fdad16;
}

footer a {
    text-decoration: underline 1px;
    color: #000;
    transition: .2s ease-in-out;
}

footer a:hover {
    color: #fdad16;
}

/* ---------------------------------------------------------------- JavaScript Classes */



/* --------------------------------------------------------------------------- Queries */

@media (min-width: 576px) {
    .education tr td:first-child {
        width: 180px;
    }
}

@media (min-width: 992px) {
    .py-row-header-index {
        padding-top: 0;
        padding-bottom: 0;
    }
    .education tr td:first-child {
        width: 175px;
    }
    .yellow-box-anchor {
        position: relative;
    }
    .yellow-box {
        position: absolute;
        z-index: 1;
    }
    .persona-bg {
        background: linear-gradient(#334b35 50%, transparent 50%);
    }
}

@media (min-width: 1050px) {
    .education tr td:first-child {
        width: 190px;
    }
}

@media (min-width: 1400px) {
    .education tr td:first-child {
        width: 210px;
    }
}

@media (min-width: 1800px) {
    .padding-widescreen {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (min-width: 2000px) {
    .padding-widescreen {
        padding-left: 10%;
        padding-right: 10%;
    }
}