body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    font-family: "Special Elite", system-ui;
    background-image: url(/images/backgrounds/tan_floral.jpg);
    cursor: url(/images/icons/gauntlet.png), auto;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #bf8251 #d8bf8e;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #d8bf8
}

*::-webkit-scrollbar-thumb {
    background-color: #d8bf8;
    border-radius: 10px;
    border: 3px none #bf8251;
}

::selection {
    background: #e08f6b
}

.links {
    font-family: 'Traveling _Typewriter', sans-serif;
    font-size: 1rem;
    color: white;
    background: #1d1c3200;
    padding-top: 1px;
    padding-bottom: 5px;
    text-align: center;

}

/*Links are put into a ul list element*/
.links ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
}

/*Use li for the individual links*/
.links li {
    list-style-type: none;
    display: inline-block;
    padding: 8px 15px 8px 15px;
    margin: 3px 2px 3px 2px;
    border: 0.8em solid;
    border-image-slice: 130 125 125 130;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(/images/frames/painting_frame.png);
    background-image: url(/images/backgrounds/plain_cloth.jpg);
    background-size: contain;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.5);
}

.links a {
    color: #683a27;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 2px #b47f5b;
    cursor: url(/images/icons/gauntlet.png), auto;
}

.links a:hover {
    color: white;

}

h1 {
    color: coral;
}

#title{
    width: 50%;
    padding: 20px;
}

.grid-container {
    columns: 5 500px;
    column-gap: 3rem;
    width: 80%;
    margin: 0 auto;

    div {
        width: 150px;
        margin: 0 1.5rem 1.5rem 0;
        display: inline-block;
        background-image: url(/images/backgrounds/wall.jpg);
        width: 100%;
        border: 0.8em solid;
        border-image-slice: 130 125 125 130;
        border-image-outset: 0px 0px 0px 0px;
        border-image-repeat: stretch stretch;
        border-image-source: url(/images/frames/painting_frame.png);
        box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.5);
    }

    img {
        width: 100%;
        border-radius: 5px;
    }

    p {
        margin: 15px 0 10 0;
        padding: 0;
        text-align: center;
        font-style: italic;
        font-size: 1.1rem;
    }
}