body {
    background-image: url(/images/backgrounds/red_floral.png);
    background-size: 500px;
}

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

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

*::-webkit-scrollbar-track {
    background: #422015;
}

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

::selection {
    background: #9fb4db
}

.special-elite-regular {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
}

a {
    color: #29582c;
    text-decoration: none;
      text-shadow: 1px 1px 2px rgb(117, 99, 72);
}

a:hover {
    font-style: italic;
}

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px;
}

.header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px;
    width: 50%;
}

#title {
    width: 100%;
    min-width: 200px;
}

.button {
    background-image: url(/images/backgrounds/plain_cloth.jpg);
    background-size: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px;
    border: 0.5em 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);
    padding: 5px;
    width: 30%;
    min-width: 200px;
    height: 40px;
    font-family: "Special Elite", system-ui;
    font-size: 2rem;
}

@media screen and (max-width:800px) {
   .button {
    font-size: 1.5rem;
    padding: 3px;
   }
    }