body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Blippo', Arial, sans-serif;
    background-image: url("/static/images/sergey-kotenev-NKz8DHaS_d0-unsplash.jpg");
    background-clip: border-box;
    background-repeat: repeat; /* Ensures the background image repeats */
    background-size: auto; /* Keeps the original size of the image */
}


@font-face {
    font-family: 'Blippo';
    src: url('/static/fonts/blippo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.background-container {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.5);
    border-radius: 40px; /* Rounded corners */
}

.content-header-background-container {
    position: relative;
    width: 100%;
    height: 16%; /* Fixed height for the header */
    min-height: 16%;
    background-color: transparent;
    background-image: url("/static/images/contentbackground/pooltable_horizontal_header.png");
    background-size: 100% 100%;
    background-position: center;
    z-index: 1;
    overflow: hidden;
}

.content-middle-background-container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    background-color: transparent;
    background-image: url("/static/images/contentbackground/pooltable_horizontal_middle.png");
    background-size: 100%; /* Scale the image to fill the height and repeat horizontally */
    background-repeat: repeat-y; /* Repeat the image vertically */
    background-position: center;
    z-index: 0;
    align-items: top;
    justify-content: center;
}

.content-footer-background-container {
    position: relative;
    width: 100%;
    height: 16%; /* Fixed height for the footer */
    min-height: 16%;
    background-color: transparent;
    background-image: url("/static/images/contentbackground/pooltable_horizontal_footer.png");
    background-size: 100% 100%;
    background-position: center;
    z-index: 1;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .content-header-background-container,
    .content-footer-background-container {
        height: 10%;
        min-height: 10%;
    }
}

@media (max-width: 768px) {
    .content-header-background-container,
    .content-footer-background-container {
        height: 6%;
        min-height: 6%;
        
    }
    .background-container {
        top:5%;


    }
}

@media (max-width: 480px) {
    .content-header-background-container,
    .content-footer-background-container {
        height: 4%;
        min-height: 4%;
    }
    .background-container {
        top:5%;

        
    }

}