:root {
    --font: calibri, Verdana, Arial, Helvetica, sans-serif;
    --heading-font: Georgia, serif;
    --font-size: 18px;

    --margin: 30px;
    --padding: 20px;
    --round-borders: 0px;
    --sidebar-width: 200px;
}

body {
    font-family: var(--font);
    font-size: var(--font-size);
    background-image: url("https://oxalate.neocities.org/images/backgrounds/giornali.png");
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #130C0B;
}


/*-------------------------------------
            LAYOUT 
-------------------------------------*/

.container {
    width: 1000px;
    display: grid;
    gap: var(--margin);
    grid-template-areas:
        "header header"
        "sidebar main"
        ". main"
        "footer footer";
    grid-template-columns: var(--sidebar-width) auto;
    grid-template-rows: auto;
    margin: auto;
}

header {
    grid-area: header;
    border-radius: 16px;
    text-align: center;
    background-color: #AA746B;
    border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAiElEQVQ4T72UUQ7AIAhD5/0PvU0zDSNCQRE/tX2AguU6sIqBeU80qg9BK3CmkfZbfA2qGl+veO6BckgIlF+tGcofBVVCAw0tNaE7RI0y/B26C+wBGycN6s2a6nMzRQ+inf8yrUJv2WLf8j4M71PzxHxC80RRMJr1EKi5kvT/lI4ez3Lr51/q2Qe64SgWk0IfHQAAAABJRU5ErkJggg==') 7 / 7px / 0 round;
    border-width: 5px;
    border-style: solid;
}



aside {
    grid-area: sidebar;
    padding: 10px;
    background-color: #F2EAE8;
    text-align: center;
    font-size: 15px;
}

main {
    grid-area: main;
    border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAMBJREFUWEftlmEKgCAMhfUA3v+gHqAIEmIha9tDHL3+Cfn2+TmtWpI8NQlnISh6p2iURtEG0HnsURpFG0DnqT3aWjvQRa+83rta+1lXfTkdqNXAbBfGwq15n41ag5eBzrY8Cgw3uj2oXLE2tt4IMKMamLfQWJB3/uswEfRWusyotSfl+/8DlU0/xtH7E36Y0oFGDSz7hKYFjZ52Od/a85//nrYHRQN681Sj3mD0PILSKNoAOo89SqNoA+g89ija6AkKGqgruOVHVgAAAABJRU5ErkJggg==') 14 / 14px / 0 round;
    border-image-outset: 13px;
    border-width: 14px;
    border-style: solid;
    overflow-y: auto;
    box-sizing: border-box;
    padding: var(--padding);
    background-image: url("https://oxalate.neocities.org/images/backgrounds/oshi-note-p8-1280x720.png");
    text-align: justify;
}



footer {
    grid-area: footer;
    border-radius: 16px;
    text-align: center;
}

p span {
    background-color: #AA746B;
    border: #AA746B 15px solid;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #AA746B;
    color: #130C0B;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
}

#myBtn:hover {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

/*IMAGE GALLERY*/
.library_2025 div {
    width: 25%;
    margin: 5px;
    border: 5px solid;
    border-color: #AA746B;
    background-color: #F2EAE8;
}

.library_2025 div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.library_2025 {
    display: flex;
    flex-wrap: wrap;
}

.library_2025 div {
    box-sizing: border-box;
    width: calc(25% - 10px);
}

.library_2025 div:hover img {
    opacity: 0.5;
}

.library_2025 div {
    position: relative;
}

/* Captions */
.library_2025 div span {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    color: black;
    text-align: center;
    padding: 5px 10px;
    font-size: 30px;
}

.library_2025 div span {
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.5s ease;
}

/* Captions on Hover */
.library_2025 div:hover span {
    opacity: 1;
    transform: none;
}