html {
    background-color: #EEEEE7;
    color: #1d3c4e;
    scroll-behavior: smooth;
    /* overflow-x: hidden; */
}

body {
    font-family: 'Chivo', sans-serif;
    font-weight: 600;
    background-color: #EEEEE7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
}

#intro-btn {
    border-color: #559EB0;
    color: #559EB0;
}

#intro-btn:hover {
    background-color: #559EB0;
    color: white;
} 

#projects-btn {
    color: white;
    border-color: white;
}

#projects-btn:hover {
    background-color: #559EB0;
    color: white;
    border: none;
}

#main-section h1
{
    font-size: 6em;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
}

#avatar {
    max-width: 90%;
    width: 40em;
}

#main-section
{
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 95vh;
    scroll-margin-top: 6rem;
    background-color: #EEEEE7;
    color: #1d3c4e;
    padding: 0px;
}

#about-section
{
    background-color: #1d3c4e;
    scroll-margin-top: 4rem;
    height: 100vh;
    width: 100%;
    color: white;
    font-size: 2em;

    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh;
    padding: 2em;
}

#relaxing {
    max-width: 100%;
}

#project-section {
    background-color: #EEEEE7;
    scroll-margin-top: 4rem;
    height: 100vh;
    width: 90%;
    font-size: 1em;
    margin-top: 0.5em;
    padding: 5em;
}

.project-card {
    padding: 2em;
    border: 1px solid #578687;
    border-radius: 5px;
    background-color: #578687;
    margin-bottom: 1em;
}

.project-card a, .project-card a:visited{
    color: #1d3c4e;
}

.project-card a:hover {
    color: #EEEEE7;
}

.fab {
    color: white;
}

#dogelon, #covid, #tomatodoro, #spense, #photo-portfolio {
    background-position: center;
    background-size:cover;
    width: 100%;
    height: 15rem;
    margin-top: 1.5em;
    border-radius: 15px;
}

#photo-portfolio {
    background-image: url("photo-portfolio.PNG");
}

#spense {
    background-image: url("spense.PNG");
}

#dogelon {
    background-image: url("dogelon.png");
}

#covid {
    background-image: url("covid-tracker.PNG");
}

#tomatodoro {
    background-image: url("tomatodoro.PNG")
}

#projects-intro {
    color: #1d3c4e;
    text-align: center;
}

/*
    NAVBAR STYLING 
*/

#elvis-nav {
    font-family: 'Chivo', sans-serif;
    font-size: 1.5em;
    background-color: #EEEEE7 !important;
    color: #1d3c4e !important; 
/*     position: fixed; */
    top: 0;
    z-index: 1;
    width: 100%;
}
#elvis-nav a {
    margin: 10px;
    cursor: pointer;
}

#elvis-nav a:visited, a:link {
    color: #1d3c4e;
    text-decoration: none;
}

#elvis-nav a:hover {
    color: #578687
}

/* Breakpoints
*/

@media only screen and (min-width: 576px) {
    #main-section .col-sm-6{
        top: -6rem;
    }
    
    #main-section .col-sm-6, #about-section .col-sm-5, #about-section .col-sm-7 {
        margin-top: auto;
        margin-bottom: auto;
    }
    #main-row, #about-row{
        height: 100vh;
    }
}
@media only screen and (max-width: 900px) {
    #project-section h1{
        font-size: 1.5em;
    }
}

@media only screen and (max-width: 576px) {
    #main-section h1{
        font-size: 3em;
    }

    #main-section {
        height: 90vh;
        margin-top: 2em;
    }

    #intro {
        margin: 10px;
    }

    #project-section .col-sm-4 {
        margin: 10px;
    }

    #project-section h1{
        font-size: 2em;
    }

    #project-section {
        margin-top: 0.5em;
        padding: 2em;
        width: 100%;
    }

    #about-section {
        font-size: 1.5em;
    }

    .test:nth-child(2), .test:nth-child(3), .test:nth-child(4){
        transition-delay: 0ms;
    }
}


/* ANIMATIONS */

.hidden{
    opacity: 0;
    filter: blur(5px);
    transition: all .5s;
    transform: translateY(-20%);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.container-fluid > .hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-10%);
    transition: all 1s;
}

.container-fluid > .show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}

.test:nth-child(2) {
    transition-delay: 200ms;
}

.test:nth-child(3) {
    transition-delay: 300ms;
}
.test:nth-child(4) {
    transition-delay: 300ms;
}