body {
    background-image: url("../img/bg-home.png");
    color: #202124;
}


header, footer, h1 a {    
    background-color: black;
    /* If I don't set the backgound color dark, the WAVE always show me that there's a contrast error, even though I have a dark background image */
    background-image: url("../img/banner-cloud.png");
    background-size: cover;
    background-position: center;
    color: #f3efe0;
}

h1, h2, .navbar, footer, footer a {
    font-family: 'Oleo Script', cursive;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-link {
    color: #f3efe0; 
}

a {
    color: #052F56;
    text-decoration: none;
}

a.active {
    color:#ffc857;
}

h1 a:hover, h2 a:hover, .nav-link:hover, .nav-link:focus,
ul li a:hover, footer a:hover {
    color: #ffc857;
}

.dropdown-item:hover {
    background-color: #ffc857;
}

.container-fluid {
    padding: 0;
}

.navbar {
    padding: 0;
}

ul li {
    list-style-type: none;
}

.card {
    padding: 0;
}


.badge {
    font-size: 0.6em;
}

.list-group-item {
    background-color: white;
    color: black;
    transition-property: background-color;
    transition-duration: 0.8s;
}

.list-group-item-action:hover {
    background-color: #ffc757a4;
    color: #052F56;
}

footer a {
    color: #f3efe0;
    text-decoration: none;
}


/* about me page */
main {
    width: 45%;
    /* width: 62%; */
    margin: auto;
    border: #202124 2px double;
    border-radius: 2em;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.7);
}

main p {
    margin-bottom: 0;
}

.container {
    margin-top: 2em;
}

#carouselWithCaptions {
    width: 70%;
    margin: auto;
}

.carousel-caption {
    background-color: rgba(255, 255, 255, 0.4);
    color: #202124;
}


/* client project page */
.project .row {
    background-color: rgba(0, 12, 30, 0.3);
    padding: 2em;
    border-radius: 20px;
}


.testimonials {
    font-style: italic;
    font-size: 0.8em;
}

h3.testimonials:before {
    display: block;
    content: "";
    height: 0.05em;
    background-color: #ffc857;
    margin-bottom: 1em;
}

.project-img {
    width: 100%;
    border: #ffc857 5px double;
    border-radius: 10%;
}

.project-img:hover {
    box-shadow: rgba(0, 12, 30, 0.3) 5px 5px;
}


/* procreate page */
#gallery {
    width: 80%;
    height: 70vh;
    margin: auto;
}


/* power bi page */
#bi2,#ex1 {
    padding-top: 50px;
}

#bi1 h2 ,#bi2 h2, #ex1 h2 {
    text-shadow: #ffc857 1px 0 10px;;
}