/* Creating default color variables */
:root {
    --darker:#36454f;
    --lighter:#ADD8E6;
    --border: 4px solid var(--lighter);
}

/* General styles */
h2 {
    text-align:center;
}

h5 {
    font-size: 16px;
}

/* Hero section styling */
#hero-section p {
    color:white;
}

#hero-section h3 {
    color:white;
}

.hero {
    display:flex;
    align-items: center;
    justify-content: center;
    background-image:url(../images/02-hero-bg.jpg), linear-gradient(rgba(54, 69, 79, 0.7),rgba(54, 69, 230, 0.7));
    background-blend-mode: overlay;
    background-repeat:none;
    background-size:cover;
    height:80vh;
}


.hero-caption {
    width:75%;
    align-items:center;
    background-color: rgba(54, 69, 79, 0.7);
    padding: 20px;
}

.hero-caption .col {
    padding:10px;
}

#ericPhoto {
    width: 100%;
    border:var(--border);
}

.quotee {
    text-align: right;
}

/* Portfolio section styling */
#portfolio-section {
    margin-top: 20px;
}

.card {
    padding: 20px;
    margin-bottom: 20px;
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:center;
}


.card-body p {
    font-size: 13px;
}

.card-body a {
    font-size: 14px;
}

/* Skills section styling */

.skills-list {
    text-align:center;
    list-style:none;
    margin-right:25px;
    display:flex;
    flex-direction:row;
    justify-content: center;
}

.skills-list li {
    margin:25px;
}

/* footer section styling */

footer div ul {
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    list-style:none;
    padding-right:25px;
}

footer div ul li a {
    text-decoration: none;
    color: var(--darker);
}