@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
    body {
        background-color: #212121;
        position: relative;
    }
    
    a {
        color: #18BC9C;
    }
    
    a:hover {
        color: #1be0b9;
        text-decoration: none;
    }
    
    .navbar {
        background-color: #212121;
        box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .2);
    }
    
    .navBarDesign {
        float: right;
    }
    
    .navbar-dark .navbar-nav .nav-link:hover {
        color: #18BC9C;
    }
    
    .navbar-dark .navbar-nav .nav-link:focus {
        color: #18BC9C;
    }
    
    .navbar-dark .navbar-nav .active>.nav-link,
    .navbar-dark .navbar-nav .nav-link.active,
    .navbar-dark .navbar-nav .nav-link.show,
    .navbar-dark .navbar-nav .show>.nav-link {
        color: #18BC9C;
    }
    
    .navBarOptions {
        margin-left: auto;
    }
    
    nav {
        font-family: 'Roboto Mono', monospace;
    }
    
    .headerImageAndTextDiv {
        display: flex;
        width: 100%;
        height: 100%;
        height: fit-content;
    }
    
    .greetings {
        font-family: 'Roboto Mono', monospace;
        color: #18BC9C;
        font-size: large;
    }
    
    .aboutMeHeader {
        opacity: .9;
        font-weight: 500;
        font-size: 2em;
    }
    
    .headerConnectIcons {
        display: flex;
        padding-top: 5%;
    }
    
    .headerConnectIcons a {
        text-decoration: none;
    }
    
    .gitIcon {
        color: white;
        padding-top: 2%;
        padding-right: 5%;
    }
    
    .gitIcon:hover {
        color: #18BC9C;
    }
    
    .headerConnectBtn {
        padding-top: 2%;
        padding-right: 5%;
        display: flexbox;
    }
    
    .btn-outline-info {
        color: #18BC9C;
        border-color: #18BC9C;
    }
    
    .btn-outline-info:hover {
        background-color: #18BC9C;
    }
    
    .linkedInIcon {
        color: white;
        padding-top: 2%;
        padding-right: 5%;
    }
    
    .linkedInIcon:hover {
        color: #18BC9C;
    }
    
    header .intro-text .name {
        display: block;
        font-family: 'Roboto', 'sans-serif';
        opacity: .8;
        font-weight: 700;
        font-size: 6em;
    }
    
    header .intro-text .aboutMeHeader {
        font-size: 2em;
        font-weight: 300;
    }
    
    .initialIntroText {
        padding-top: 5%;
        opacity: .7;
        font-size: 1em;
        font-weight: 300;
        font-family: 'Roboto', sans-serif;
        color: white;
        font-size: large;
    }
    
    @media (max-width: 768px) {
        header .container {
            padding-top: 200px;
            padding-bottom: 100px;
        }
        header .intro-text .name {
            font-size: 4.5em;
        }
        header .intro-text .aboutMeHeader {
            font-size: 1.5em;
            font-weight: 300;
        }
    }
    
    header {
        text-align: center;
        background: #212121;
        color: white;
    }
    
    header .container {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    
    .intro-text {
        float: left;
        text-align: left;
    }
    
    .dataSection {
        font: 'Roboto', 'sans-serif';
        color: white;
        opacity: .8;
    }
    
    .dataSection h1 {
        font-family: 'Roboto', 'sans-serif';
        font-weight: 700;
        font-size: 2em;
        padding-top: 4%;
        padding-bottom: 2%;
    }
    
    .aboutMePic {
        width: 40%;
        height: 40%;
        border-top-left-radius: 15%;
        border-bottom-right-radius: 15%;
        padding-left: 2%;
    }
    
    .aboutMeContainer {
        display: flex;
    }
    
    @media (max-width: 768px) {
        .aboutMePic {
            width: 100%;
            height: 100%;
            border-top-left-radius: 15%;
            border-bottom-right-radius: 15%;
            padding-bottom: 5%;
        }
        .aboutMeContainer {
            display: block;
        }
    }
    
    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        background-color: #18BC9C;
    }
    
    .nav-pills .nav-link.active,
    .nav-pills .show .nav-link>a:hover {
        background-color: #18BC9C;
    }
    
    .tab-pane h1 {
        font-family: 'Roboto', 'sans-serif';
        font-weight: 500;
        font-size: 1.8em;
        padding-top: 0%;
        padding-bottom: 0%;
    }
    
    .tab-pane h5 {
        font-family: 'Roboto Mono', monospace;
        color: #18BC9C;
        font-weight: 400;
        font-size: 1em;
        padding-top: 0px;
    }
    
    .tab-pane h6 {
        font-family: 'Roboto', 'sans-serif';
        font-weight: 400;
        font-size: 1em;
    }
    
    .tab-pane h3 {
        font-family: 'Roboto', 'sans-serif';
        font-weight: 400;
        font-size: 1.2em;
        padding-top: 0%;
        padding-bottom: 0%;
    }
    /* --- */
    
    .progress {
        position: relative;
        height: 25px;
        margin-bottom: 8%;
        text-align: center;
    }
    
    .progress>.progress-type {
        font-family: 'Roboto Mono', monospace;
        position: absolute;
        left: 0px;
        font-weight: 500;
        font-size: medium;
        padding: 3px 30px 2px 10px;
        margin-top: 8px;
    }
    
    @media (max-width: 1200px) {
        .progress>.progress-type {
            font-family: 'Roboto Mono', monospace;
            position: absolute;
            left: 0px;
            font-weight: 250;
            font-size: small;
            padding: 3px 30px 2px 10px;
            margin-top: 8px;
        }
    }
    
    .progress>.progress-completed {
        font-family: 'Roboto Mono', monospace;
        position: absolute;
        right: 0px;
        font-weight: 800;
        margin-top: 8px;
        margin-right: 1%;
        color: black;
    }
    
    .progressTitles {
        font-family: 'Roboto', 'sans-serif';
        font-weight: 500;
        font-size: 1.8em;
    }
    
    .progress-bar {
        background-color: #11a88a;
    }
    
    .card {
        background-color: black;
        margin: 1%;
    }
    
    .card-body {
        display: grid;
    }
    
    .card-subtitle {
        font-family: 'Roboto Mono', monospace;
        color: #11a88a;
        font-weight: 400;
        font-size: 1em;
    }
    
    .card-col {
        display: flex;
    }
    
    @media (max-width: 768px) {
        .card-col {
            display: block;
        }
    }
    
    .footer-text {
        display: grid;
    }
    
    footer {
        background-color: #1a1a1a;
        padding: 4%;
        text-align: center;
        font-family: 'Roboto Mono', monospace;
        color: #18BC9C;
        font-weight: 400;
        font-size: 1em;
    }
    
    .footer-connect {
        width: 100%;
        display: flex;
        padding-bottom: 5%;
        justify-content: center;
    }

    .tech-stack {
        color: #18BC9C;
        font-size: small;
        margin-bottom: 3%;
    }