html, body {
    overflow-x: hidden
} 

html {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-size: cover; /* Ensures the image covers the entire viewport */
    background-attachment: fixed; /* Keeps the image static while scrolling */
    background-position: center; /* Centers the image */
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: Century Gothic;
}

a {
    text-decoration: none;
}

.content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 601px) {
    .content {
        width: 100%;
    }
    .modal-content {
        width: 100%;
    }
}

.background-div {
    width: 100%;
    height: 451px; /* Full viewport height */
    background-image: url('images/circles.png');
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}