/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');


/* General */


:root {
    --bg-color-main: #04052e;
    --bg-color-second: #050754;
    --bg-color-third: #deddf4;
    --bg-color-four: #006eff;
    --bg-color-text: whitesmoke;
    --bg-color-text-dark: black;
}

body {
    color: var(--bg-color-text);
    background-color: var(--bg-color-main);
    font-family: 'Roboto Mono';
}

main {
    margin: 40px 0;
}


/* Navigation & Logo */


.navbar {
    background-color: var(--bg-color-main);
    --bs-navbar-color: var(--bg-color-text);
    --bs-navbar-active-color: var(--bg-color-text);
    --bs-navbar-brand-color: var(--bg-color-text);
    --bs-navbar-hover-color: var(--bg-color-text);
    --bs-navbar-brand-hover-color: var(--bg-color-text);
}

.navbar-brand {
    font-size: 30px;
    padding-left: 20px;
}

.navbar-collapse {
    justify-content: end;
}

.nav-item {
    font-size: 16px;
    padding-right: 20px;
}

.nav-item a {
    position: relative;
}

.nav-item a::after {
    content: '';
    width: 0;
    height: 3px;
    background: var(--bg-color-text);
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}

.nav-item a:hover::after {
    width: 100%;
}

.navbar-toggler {
    background-color: var(--bg-color-second);
}


/* Hero Section */


.jumbotron {
    height: 400px;
    color: var(--bg-color-text-dark);
    background-image: url(../images/bg-hero.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}

#jumbotron-btn {
    color: var(--bg-color-text);
    background-color: var(--bg-color-four);
}

#jumbotron-btn:hover {
    box-shadow: 4px 4px var(--bg-color-second);
}


/* Contact Modal */


#contact {
    color: var(--bg-color-text-dark);
    text-align: center;
}

#contact i {
    font-size: 50px;
    padding: 10px;
    color: var(--bg-color-main);
}


/* Profile & Skills */


.profile, .skills {
    margin-bottom: 20px;
    padding: 20px;
    font-size: 14px;
    background-color: var(--bg-color-second);
    border-radius: 15px;
    box-shadow: 7px 7px 15px black;
}

.skills {
    line-height: 30px;
}

.profile h2, .skills h2 {
    text-align: left;
}


/* Portfolio */


#portfolio {
    margin: 40px;
    padding: 20px;
}

#portfolio h2, #portfolio hr {
    margin-right: 30px;
    margin-left: 30px;
}

.cardContainer {
    margin: 30px 0;
}

.card {
    background-color: var(--bg-color-second);
    color: var(--bg-color-text);
    margin: 10px;
    box-shadow: 7px 7px 15px black;
}

.card:hover {
    margin: 2px;
}

.card-button {
    background-color: var(--bg-color-four);
    color: var(--bg-color-text);
}

.card-button:hover {
    background-color: var(--bg-color-main);
}


/* Footer */

footer {
    padding: 20px;
    height: 100px;
    background-color: var(--bg-color-second);
    display: flex;
    align-items: baseline;
    justify-content: center;
}

footer p {
    padding: 20px;
}

#footer-btn {
    color: var(--bg-color-text);
    background-color: var(--bg-color-four);
}

#footer-btn:hover {
    box-shadow: 7px 7px var(--bg-color-text-dark);
}