/*
Vanilla Cream #FFF7E6
Blush Petal #F7C8D3
Rosewood #B46A72
Sage Leaf #A8B58A
Misty Sky #A9B7C6
Midnight Lagoon #2D3A47
*/
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=Shadows+Into+Light&family=Shadows+Into+Light+Two&display=swap');
/*LAYOUT*/
body {
    font-family: "Shadows Into Light Two", serif;
    color:#2D3A47;
    background: url("Images/background1.jpg");
    background-repeat: repeat;
    background-size: 15%;
    background-color: #A8B58A;
    min-height: 100vh;
}
.site_container {
    background-color: #FFF7E6;
    max-width: 1200px;
    margin: 48px auto;
}
header {
    background-color: #B46A72;
    color: #FFF7E6;
    text-align: center;
    padding: 24px;
}
.main_container {
    display: grid;
    grid-template-columns: 20% 80%;
    max-width: 1200px;
}
.navbar {
    display: flex;
    gap: 3px;
    flex-direction: column;
    padding: 3px;
}
.navbutton {
    display: flex;
    background-color: #F7C8D3;
    border:1px solid #B46A72;
    color: #B46A72;
    text-align: left;
    padding: 3px;
}
.content_container {
    border: 1px solid #A8B58A;
    background-color: #FFF7E6;
    padding: 12px;
    margin: 3px;
}
footer {
    background-color: #B46A72;
    text-align: center;
    padding: 24px;
}
.footerbutton {
    background-color:#FFF7E6;
    color:#B46A72;
    text-align: center;
    border: 3px solid #B46A72;
    border-radius: 6px;
    padding: 3px;
    margin: 24px;
}

/*CONTENT*/
p {
    color:#2D3A47
}
ul {
    color:#2D3A47
}
li {
    list-style-type: "★ ";
}
blockquote {
    text-align: center;
    padding: 48px;
    border: 1px solid #A8B58A;
}
a {
    color: #A9B7C6;
    text-decoration: none;
}
summary h3 { /*Dropdown arrows next to heading3*/
    display: inline;
}
.thumbnail {
    width: 250px;
    float: right;
    text-align: center;
    font-size: small;
}
details { /*Dropdown*/
    color:#A8B58A;
}
h2, h3, h4, h5, h6 {
    color:#A8B58A;
}

/*CLUBS AND WEBRINGS*/
.button_and_club_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.button_container {
    padding: 12px;
}
.my_buttons, .site_buttons, .other_buttons {
    border: 1px solid #A8B58A;
    padding: 12px;
    margin: 12px 0;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 3px;
    justify-content: left;
}
.club_container {
    padding: 0 12px;    
}
.clubs {
    border: 1px solid #A8B58A;
    padding: 12px;
    margin: 12px 0;

}
.webring_container {
    padding: 0 12px;
    margin-top: 12px;
}
.webrings {
    border: 1px solid #A8B58A;
    display: flex;
    gap: 24px;
    padding: 12px;
    margin: 12px 0;
    justify-content: flex-start;
    align-items: baseline;
}

/*BOOKSHELF*/
.bookshelf {
    background-color: #A9B7C6;
    border: 1px solid #A8B58A;
    font-size: 0;
    padding: 12px 3px;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
}
.shelf {
    background-color: #2D3A47;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 6px 0 6px;
    row-gap: 24px;
}
.book_series {
    display: inline-block;
    height: 25vh;
    margin: 0 6px;
    .book {
    margin: 0;
    }
}
.book {
    display: inline-block;
    height: 25vh;
    margin: 0 3px;
    box-shadow: 6px -3px 12px 3px #000000;
}

/*TOYBOX*/
.toybox {
    img {
        zoom: 100%;
    }
}