/* Override bootstrap font */
:root
{
    --bs-body-font-family: 'Roboto', sans-serif;
}


/* Hover effects for Nav links */
.nav-link
{
    position: relative;
}

.nav-link::after
{
    content: '';
    opacity: 0;
    transition: all 0.2s;
    height: 2px;
    width: 100%;
    background-color: skyblue;
    position: absolute;
    bottom: 0;
    left: 0;
}

.nav-link:hover::after
{
    opacity: 1;
}

/* Hover effects for cards */
.card
{
    transition: all 0.1s;
}

.card:hover
{
    cursor: pointer;
    transform: scale(1.02);
    box-shadow: inset 0px 0px 8px rgba(22, 22, 22, .3),
        0 0 10px rgb(22, 22, 22, .3);
}

.card
{
    display: flex;
}

.footer li
{
    transition: all 0.3s;
}

.footer li:hover
{
    box-shadow: 0 10px 6px -6px #777;
}

.card-body
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 25vh;
}

/* Setting image and scaling for hero */
#heroImage
{
    background-image: url(../images/hero-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: multiply;
}

/* Setting image scaling/size for bootstrap cards */
.card-img-top
{
    width: 100%;
    height: 20vh;
    object-fit: cover;
}

/* .columnText
{
     border-right: 1px solid black; 
}  */

.box
{
    background-color: lightblue;
    border: 1px solid blue;
    min-height: 50px;
    font-size: 2rem;
}

/* Medium and below */
@media only screen and (max-width: 991px)
{
    h2
    {
        margin: 1rem 0rem;
    }
}

/* 
@media (min-width: 576px)
{
    
    body::before
    {
        content: "SM";
    }
}

@media (min-width: 768px)
{

    
    body::before
    {
        content: "MD";
    }
}

@media (min-width: 992px)
{
    body::before
    {
        content: "LG";
    }
}

@media (min-width: 1200px)
{
    body::before
    {
        content: "XL";
    }
}

@media (min-width: 1400px)
{
    body::before
    {
        content: "XXL";
    }
} */