@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Sets background color of entire page. The !important is used to override Bootstrap's settings */
body {
    background-color: #387a68 !important;
}

/* Only apply underline effect for navigation bar tabs for screens 768px and above */
/* Any smaller screens will see the hamburger menu instead of all the tabs laid out */
@media (min-width: 768px) { 
    .nav-link::before {
        content: "";
        position: absolute;
        top: 80%;
        left: 0;
        width: 0;
        height: 3px;
        background: #ffffff;
        transition: .3s;
    }
    
    .nav-link:hover::before {
        width: 100%;
    }
    
    .nav-link:hover {
        transition: .3s;
        color: #ffffff !important;
    }
    
    .nav-link {
        transition: .3s;
        position: relative;
    }
}