/* Define the Cascade Layers */
@layer bootstrap, overrides;
/* Import BootStrap and assign it to the lowest
specificity layer */


/* Can import from CDN */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css') layer(bootstrap);

/* Can Import the local bootstrap file */
/* @import url(./css/bootstrap.min.css) layer(bootstrap); */

/* Can put my overides in the overrides layer or just have my CSS outside */
@layer overrides {

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        font-size: 120%;
    }

    .navbar-brand {
        font-family: 'Galada', cursive;
        font-size: 150%;
    }

    .navbar-nav {
        align-items: flex-end;
    }

    .navbar-nav>a {
        font-size: 120%;
    }

    .navbar-toggler-icon {
        width: 2em;
        height: 2em;
    }

    .banner {
        background-color: rgba(0, 0, 0, 0.1);
        background-image: url(./img/hero-image.jpg);
        height: 60vh;
        background-size: cover;
        padding-top: 15vh;
        color: white;
    }

    #about, #skills, #contact {
        margin: 3em 0;
    }

    #skills {
        background-color: rgba(234, 229, 192, 0.5);
        padding: 3em 0;
    }

    #contact {
        padding: 3em 0;
    }

    .col-sm-4>img {
        margin: 2em 0;
    }

    .modal-img, .modal-body>img  {
        width: 100%;
    }

    .modal-footer, .modal-header {
        justify-content: center;
        font-size: 120%;
    }

    /* for the fields in the contact form */
    .form-control {
        margin: 1em 0;
    }

    footer {
        background-color: #28205f;
        height: 10vh;
    }

    
    footer .uparrow {
        font-size: 450%;
        line-height: 100%;
        font-weight: bolder;
        color: #f4511e;
    }

    .uparrow:hover{
        color: #04bf2f;
    }

    footer>a {
        text-decoration: none;
    } 
    
    /* Extra left padding on the menu items */
    @media (min-width: 992px) {
        .navbar-expand-lg .navbar-nav .nav-link {
            padding-left: 2.5rem;
        }
    }
}