body, html {
    height: 100%; /* Ensures the body/html covers the full height of the viewport */
    margin: 0; /* Removes default margin for the body */
    padding: 0; /* Removes default padding */
}


body {
    background-image: url(/images/horses.jpg);
    /* 2. Prevent the image from repeating */
    background-repeat: no-repeat;
    /* 3. Center the image on the page */
    background-position: center;
    /* 4. This is the key: scales the image to cover the entire container */
    background-size: cover;
    /* Optional: Fix the background image so it doesn't scroll with content */
    background-attachment: fixed;

    padding-top: 1rem;

    --label-width: 14em;
}


main {
    width: 6in;
    max-width: calc(100vw - 2em);
    margin: auto;
    border: 1px solid black;
    border-radius: 8px;
    background-color: #fffffff0;
    padding: 1em;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .5);
}

div.dialog-outer.dialog-outer-page {
    position: relative;
    margin: auto;    
    max-width: calc(100vw - 2em);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .5);
}

div.dialog-title-bar {
    background-color: white ;
    color: black;
    font-size: 200%;
    text-align: center;
}

div.dialog-body {
    padding: 1em;
}

div.the-list {
    text-align: left;
    width: 100%;
    max-width: 15rem;
    margin: auto;
}