html, body, #app, .mud-layout-root, .mud-main-content {
    height: 100%;
}

:root {
    --mud-primary-color-light: #ff0000; /* Lighter shade of the primary color */
    --mud-primary-color-main: #ff0000; /* Main primary color */
    --mud-primary-color-dark: #ff0000; /* Darker shade of the primary color */
}

.background-image-class {
    position: relative; /* Needed to position the pseudo-element */
    background-size: cover; /* Cover the entire page */
    background-position: center bottom; /* Anchor the image at the bottom center */
    background-repeat: no-repeat; /* Do not repeat the image */
}

    .background-image-class::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://tracksafe.sliceoflife.no/Profile2.jpg'); /* Adjust the path to your image */
        opacity: 0.2; /* 50% transparency */
        background-size: cover; /* Cover the entire page */
        background-position: center bottom; /* Anchor the image at the bottom center */
        background-repeat: no-repeat; /* Do not repeat the image */
        z-index: -1; /* Ensure the pseudo-element is behind the content */
    }


.images-wrapper {
    position: relative;
}

.image-container {
    /*display: flex;*/ /* Use Flexbox */
    /*justify-content: center;*/ /* Center horizontally */
    /*align-items: center;*/ /* Center vertically */
    position: relative;
    /*height: 100%;*/ /* Ensure the container has a height to allow vertical centering */
}

    .image-container img {
        position: absolute;
        top: 25px;
        left: 0;
        margin: 15px; /* Adjust spacing between images as needed */
    }