html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;


}

body {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    /* background-color: #b39797; */
    /* background-image: linear-gradient(to right, #d2c1c1, #333, #d2c1c1); */

    letter-spacing: 1pt;
    /* Viewport-locked radial gradient */
    background: radial-gradient(circle at center, black 0%, #8f3d3d 100%) fixed center/cover no-repeat;


}

/* Container spacing for main content */
.container {
    margin-top: 70px;
    flex: 1;
    /* Pushes the footer to the bottom */

}

/* Navbar Styling */
.navbar {
    background-color: #343a40;
    border-bottom: 3px solid #ffc107;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: crimson;
    transition: color 0.3s ease;
}

i {
    font-size: 32pt;
}

.navbar-brand:hover,
.navbar-nav .nav-link:hover {
    background-color: #577a80;
    color: #ffbf00;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Grid Item Styling */
.grid-item {
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}



/* Hover effect on grid items */
.grid-item:hover {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

hr {
    border: 0;
    height: 1pt;
    background: #333;
    background-image: linear-gradient(to right, black, #d2c1c1, black);
}

#myImg {
    max-width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    text-align: center;
}

footer {
    background-color: #343a40;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    margin-top: auto;
}


.extra-margin:hover {
    color: #d2c1c1;
    background-color: #7a4343;
    /* font-weight: bold; */
}

.img-fluid {
    position: relative;
    /* required for z-index to work */

}

.art:hover {

    transition: all .3s ease-in;
    z-index: 999;

    @media ((min-width: 576px) and (max-width: 768px)) {
        transform: scale(2.5) translateX(-30%);
    }

    @media (min-width: 768px) {
        transform: scale(2) translateX(-20%);
    }

}

/* Art hover effect for different columns */
.art2:hover {

    transition: all .3s ease-in;
    z-index: 999;

    @media ((min-width: 576px) and (max-width: 768px)) {
        transform: scale(2.5);
    }

    @media (min-width: 768px) {
        transform: scale(2);
    }

}

.art3:hover {
    transition: all .3s ease-in;
    z-index: 999;

    @media ((min-width: 576px) and (max-width: 768px)) {
        transform: scale(2.5) translateX(30%);
    }

    @media (min-width: 768px) {
        transform: scale(2) translateX(20%);
    }


}

a:hover {
    color: rgb(116, 167, 167);
}

.contrasted-link {
    color: #a6dde4;
    text-decoration: none;
}

.contrasted-link:hover {
    color: #577a80;
}

.active {
    background-color: rgba(37, 23, 23, 0.4);
}

.extra-margin {
    /* font-size: 16pt; */
    background-color: rgba(22, 22, 49, 0.6);
    border-radius: 15pt;
    padding: 10pt;
    margin: 10pt;
    color: rgb(116, 167, 167);
    font-family: Papyrus,  Copperplate, fantasy; /* TODO: add a custom font later*/
    font-weight: bold;
}

h2 {
    /* font-size: 24pt; */
    font-weight: bolder;
    color: #609155;

}

h4 {
    /* font-size: 18pt; */
    font-weight: bolder;
    color: #609155;

    /* text-transform: uppercase; */

}

h1 {
    letter-spacing: 4pt;
    font-weight: bolder;
    /* font-size: 36pt; */

}