html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    text-align: center;
    /* Apply the radial gradient background */
    background: radial-gradient(circle, #FFFFFF 5%, #dbd0bd 75%, #A69475 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main content div */
.main-content {
    /* Set width to 95% of viewport width */
    width: 95vw;
    /* Use aspect ratio matching the 1170x625 image for sizing */
    aspect-ratio: 1170 / 625;
    margin: auto; /* Center the block itself */
   /* border-image: url('images/FULLBORDER.png') 30 30 30 30 / 20px 20px 20px 20px round;
    border-style: solid;
    border-width: 20px;
    padding: 20px; /* Padding for the inner content */
    box-sizing: border-box;
    /* Use Grid to center the inner div content */
    display: grid;
    place-items: center;
}

/* Inner content div */
.inner-content {
    /* Takes up all available space within padding */
    width: 100%;
    max-width: 400px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Scalable Image */
.scalable-image {
    max-width: 100%; /* Ensures image scales down if viewport is smaller than 1170px */
    height: auto;
    /* Use aspect ratio for consistent scaling */
    aspect-ratio: 1170 / 625;
}
