/* Sets page height to the full screen and allows vertical scrolling */
html,
body {
    min-height: 100%;
    margin: 0;
    overflow-y: auto;
}

/*  Styling to keep footer at the bottom of the view port and above background images. */
footer{
    position: fixed;
    bottom: 0; 
    width: 100%;
    z-index: 2;
}

/* Carousel Styling for full background display */
.carousel-item {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
}

/* Individual Background Images */
.carousel-item:nth-child(1) {
    background-image: url("../assets/background/army.webp");
}
.carousel-item:nth-child(2) {
    background-image: url("../assets/background/artillery.webp");
}
.carousel-item:nth-child(3) {
    background-image: url("../assets/background/carrier1.webp");
}
.carousel-item:nth-child(4) {
    background-image: url("../assets/background/carrier2.webp");
}
.carousel-item:nth-child(5) {
    background-image: url("../assets/background/challenger2.webp");
}
.carousel-item:nth-child(6) {
    background-image: url("../assets/background/fleet1.webp");
}
.carousel-item:nth-child(7) {
    background-image: url("../assets/background/fleet2.webp");
}
.carousel-item:nth-child(8) {
    background-image: url("../assets/background/navy.webp");
}
.carousel-item:nth-child(9) {
    background-image: url("../assets/background/redarrows.webp");
}
.carousel-item:nth-child(10) {
    background-image: url("../assets/background/soldier1.webp");
}
.carousel-item:nth-child(11) {
    background-image: url("../assets/background/soldier2.webp");
}
.carousel-item:nth-child(12) {
    background-image: url("../assets/background/sub.webp");
}

/* Content Container visible above the background */
.content-container {
    z-index: 2;
    padding: 20px;
}

/* Shadow on the title text for visibility against background */
.title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
    text-align: center;
}

/* Custom CSS for login box */
#loginBox {
    background: rgba(0, 0, 0, 0.85);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    max-width: 400px;
}

/* Responsive adjustments */

/* For screens 1000px or smaller */
@media (max-width: 1000px) {
    #loginBox {
        padding: 30px;
        width: 200%;
    }
    .title {
        font-size: 1.8rem;
    }
    footer{
        position: relative;
    }
}

/* For screens 576px or smaller */
@media (max-width: 576px) {
    #loginBox {
        padding: 20px;
        width: 200%;
    }
    .title {
        font-size: 1.5rem;
    }
    footer{
        position: relative;
    }
}

/* For extra-large screens 1440px or larger */
@media (min-width: 1440px) {
    #loginBox {
        max-width: 500px;
        padding: 50px;
    }
    .title {
        font-size: 2.5rem;
    }
}