@import url("https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap");



:root{

    --main: #c2e9d4;

    --accent: #e8ccdf;

    --dark-accent: #d1a9e8;

    

    --logo-width: 5rem;

}



*{

    box-sizing: border-box;

}



/*format & fonts*/



.font-title{

    font-family: 'Amatic SC', serif;

}



.font-paragraph{

    font-family: 'Kaisei Tokumin', sans-serif;

}


.hidden.hidden{
    display:none;
}



.centered{

    text-align: center;
    margin:auto;

}


.underline{
    text-decoration: underline;
}



.vertically-centered{

    display:flex;

    flex-direction:column;

    justify-content: center;

}



.balanced{

    text-wrap:balance;

}



.transparent{

    opacity:0;

}



.left-bar{

    display:grid;

    grid-template-columns: 1fr 3fr;

    column-gap: 2rem;

}



.right-bar{

    display:grid;

    grid-template-columns: 3fr 1fr;

    column-gap: 2rem;

}



.even{

    display:grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 2rem;

}



body{

    font-family: 'Kaisei Tokumin', sans-serif;

    font-size: 1rem;

    background-color: var(--main);

    margin:0;

}



img{

    width:min(20rem, 100%);

    box-shadow: 2px 2px white;

    margin:auto;

    border-radius: 2px;

    display:block;

}



p{

    margin:0;

}



.button{

    display:block;

    padding:0.5rem;

    background-color:var(--accent);

    border:2px solid var(--dark-accent);

    border-radius: 2px;

    width:fit-content;

    text-decoration: none;

    color:black;

    margin:auto;

}



.button:hover,

.button:focus{

    background-color:var(--dark-accent);

    color:white;

}



header .title,

main,

footer{

    width:min(90rem, 100% - 2rem);

    margin:auto;

}



/*large elements*/



header{

    background-image: url(images/headerbackgroundextended.jpeg);

    background-size: cover;

}



.content{

    display:flex;

    flex-direction:column;

    gap:1rem;

}



/*navbar*/



nav{

    position:sticky;

    top:0;

    background-color: var(--accent);

    margin:0;

    height:3rem;

    z-index: 1000;

    box-shadow:0px 1px 5px var(--dark-accent);

}



nav ul{

    display:flex;

    gap:1.5rem;

    justify-content: center;

    align-items:center;

    margin:auto;

    padding:0;

    width:fit-content;

    list-style: none;

    height:3rem;

}



.hamburger{

    position:absolute;

    top:0.5rem;

    left:1rem;

    font-size:1.5rem;

    display:none;

    color:black;

}



nav ul.hidden li{

    display:none;

}



nav ul li{

/*    line-height: 3rem;*/

    width:fit-content;

}



nav ul li a,

nav ul li .dropdown-title{

    text-decoration: none;

    color: black;

    text-shadow: 1px 2px 2px var(--dark-accent);

    font-size: 1.3rem;

    cursor:pointer;

}



nav ul li a:hover,

nav ul li a:focus{

    color:white;

    text-shadow: 0px 0px;

}



nav .logo img{

    width:var(--logo-width);

    box-shadow: none;

    transform: translateY(1rem);

}



nav .dropdown{

    position:relative;

}



nav .books-list{

    position:absolute;

    /* display:none; */
    display:flex;
    opacity:0;

    flex-direction: column;

    background-color:var(--dark-accent);

    border-radius: 3px;

    gap:1rem;

    padding:0.5rem;

    height:fit-content;

    left:-6rem;

}



nav .dropdown:hover .books-list,
nav .dropdown:focus .books-list,
nav .dropdown:focus-within .books-list{

    /* display:flex; */
    opacity:1;

}



nav .books-list li{

    line-height: 1.4rem;

    width:max-content;

}



nav .books-list li a{

    font-size: 1.3rem;

}



@media screen and (max-width:945px){

    

    nav ul{

        flex-direction: column;

        flex-wrap: wrap;

        height:fit-content;

        margin-left:0;

        background-color:var(--accent);

        padding:2rem 1rem 1rem 1rem;

    }

    

    nav .books-list{

        left:-2rem;

    }

    

    nav ul li:nth-child(1){

        margin-top:1rem;

    }

    

    nav ul li{

        line-height: 1rem;

/*        display:none;*/

    }

    

    nav ul .logo{

        position:absolute;

        top:0;

        left:calc(50% - (var(--logo-width) / 2));

        transform:translateY(-1rem);

    }

    

    .hamburger{

        display:block;

    }

    

}



/*header*/



header .title{

    clear:both;

    padding-top:2rem;

    padding-bottom:2rem;

    position:relative;

}



header .right-bar{

    grid-template-columns: 5fr 3fr;

}



header .content{

    margin:auto;

    max-width:30ch;

}



header .font-title{

    font-size:5rem;

    text-shadow: 2px 2px white;

}



header p{

    font-size:1.6rem;

    font-style: italic;

    text-wrap: balance;

    width:min(30ch, 100% - 1rem);

    text-shadow: 2px 2px 2px white;

}



header img{

    max-width:15rem;

}



header .page-title{

    display:block;

    width:fit-content;

    margin:auto;

    font-size: 5rem;

    font-family: 'Amatic SC', serif;

    text-shadow: 2px 2px white;

}

@media (max-width:500px){
    header .page-title{
        font-size:3rem;
    }
}



/*main*/



main{

    padding:2rem;

    font-size: 1.1rem;

}



main .quote{

    background-color: var(--accent);

    padding:1rem;

    border-radius: 2px;

    line-height: 1.6;

}



main .book{

    margin-top:2rem;

}



main .book .content{

    display:flex;

    flex-direction: column;

    justify-content: center;

}



main .cut-off{

    margin:1rem auto;

    overflow: hidden;

    --webkit-line-clamp: 8;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    

}



main .signup + h2{

    text-align: center;

}



main .signup + h2 + ul{

    margin:auto;

    width:fit-content;

    font-size:1.2rem;

    list-style: none;

    padding:0;

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    justify-content: center;

}



main .signup + h2 + ul > li > a{

    min-width:11rem;

    text-align: center;

}



main .medium-paragraph{

    font-size:1.4rem;

}



main .large-paragraph{

    font-size:1.7rem;

    text-align: center;

    text-wrap:balance;

}



main .large-paragraph + p{

    text-align: center;

    margin:1rem;

}



main .image-large{

    text-align: center;

    width:fit-content;

    margin:auto;

}



main .image-large img{

    width: min(40rem, 95%);

}



main form{

    font-size: 1.5rem;

    width:min(30ch,100%);

    margin:auto;

}



main form input:not(.submit-button),

main form textarea{

    border:2px solid var(--dark-accent);

    border-radius: 3px;

    font-family: 'Kaisei Tokumin', sans-serif;

    font-size: 1.2rem;

    width:100%;

}





main form input{

    height:2.5rem;

}



main form textarea{

    height:8rem;

}



main form .submit-button{

    width:fit-content;

    height:fit-content;

    padding:0.3rem;

    background-color: var(--accent);

    border: 2px solid var(--dark-accent);

    font-size: 1.3rem;

    border-radius: 3px;

    font-family: 'Kaisei Tokumin', sans-serif;

    cursor:pointer;

}



main form .submit-button:hover,

main form .submit-button:focus{

    background-color:var(--dark-accent);

}



main .even{

    column-gap: 3rem;

}



main .even .buylinks{

    display:flex;

    gap:1rem;

}



main .even .image{

    text-align: right;

}



main .even .button{

    text-align: center;
    margin-bottom:1rem;

}



main p.medium-paragraph{

    margin:2rem auto;

}



main .praises{

    display:flex;

    flex-wrap:wrap;

    gap:3rem;

    justify-content: center;

    align-items: center;

}



main .praises h2{

    width:100%;

}



main .praise{

    display:flex;

    flex-wrap:wrap;

    gap:0.5rem;

    width: 25rem;

}



main .praise h3{

    text-align: center;

    width:100%;

}



main .praise .images{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    justify-content: center;

    align-items: center;

}



main .praise .small-image{

    width:min(7rem, 100%);

}



main .praise .small-image img{

    box-shadow: none;

}



main .praise .small-image img:hover{

    box-shadow: 0px 0px 20px var(--dark-accent);

}

main .event{

    background-color:var(--accent);
    padding:1rem;
    margin: 0px auto 2rem;

}

main .even .event{
    max-width: 50ch;
}

main .event .date{

    text-align: center;
    font-size:1rem;

}

main .event .description{

    margin:1rem;

}

main .cards{
    grid-template-columns: 300px;
    gap:2rem;
    place-content: center;
}

@media (min-width: 700px){
    main .cards{
        grid-template-columns: repeat(2, 300px);
    }
}

main .card{
    background:linear-gradient(45deg, var(--dark-accent), var(--accent));
    padding:1rem;
    margin:auto;
    display:grid;
    width:100%;
    place-content: center;
    border-radius: 5px;
    color:black;
    text-decoration: none;

    transition:transform 250ms;
}

main .card .content{
    padding:2rem;
    position:relative;
    min-height:10rem;
}

main .card img{
    box-shadow:none;
    max-height:7rem;
    width:auto;
    position:absolute;
    inset:0;
    
    transition: all 250ms;
}

main .card img.right{
    transform:translate(50%, 5%) rotate(10deg);
}

main .card img.left{
    transform:translate(-50%, 5%) rotate(-10deg);
}

@media(min-width:1000px){
    main .card:hover,
    main .card:focus-visible,
    main .card:focus-within{
        transform:translate(0.2rem,-0.5rem);
    }

    main .card img.right{
        transform:translate(0, 0) rotate(0);
    }
    
    main .card img.left{
        transform:translate(0, 0) rotate(0);
    }
    
    main .card:hover img.right,
    main .card:focus-visible img.right,
    main .card:focus-within img.right{
        transform:translate(50%, 5%) rotate(10deg);
    }
    
    main .card:hover img.left,
    main .card:focus-visible img.left,
    main .card:focus-within img.left{
        transform:translate(-50%, 5%) rotate(-10deg);
    }
}

main .bookrecs{
    display:flex;
    gap:2rem;
    flex-wrap:wrap;
    justify-content: center;
}

main button.bookrec{
    background:none;
    border:none;
    cursor:pointer;
    height:15rem;
    width: 15rem;
    flex-basis:calc(25% - (2rem * (3 / 4)));
}

main button.bookrec img{
    object-fit: cover;
    max-height: 100%;
}

@media (max-width:800px){
    main .bookrecs{
        flex-direction: column;
        gap:5rem;
    }

    main button.bookrec{
        width:80%;
        height:fit-content;
        margin:auto;
    }
}

@media (min-width:801px){
    main button.bookrec img{
        width:auto;
    }
}

main dialog{
    max-width:80ch;
    line-height: 1.8;
    border:none;
    box-shadow: 0px 0px 50px black;
    padding:3rem;
}

main dialog p > span:first-child{
    font-weight: 700;
}

main dialog .buttons{
    display:flex;
    justify-content: center;
    gap:1rem;
    width:100%;
}

main dialog a.button{
    color:black;
    margin:0;
}

main dialog .close{
    background:none;
    border:none;
    color:gray;
    font-size:2rem;
    position:sticky;
    translate: -2.5rem -3rem;
    top:0rem;
    cursor:pointer;
}

main .books-accordions,
main .books-accordions .accordion{
    display:grid;
    grid-template-columns: 
    [left-start full-start] 1fr
    [wide-start] 1fr 
    [left-end center-start] 20rem
    [center-end right-start] 1fr
    [wide-end] 1fr
    [right-end full-end];
    gap:1rem;
}


main .books-accordions .book-card{
    background:linear-gradient(45deg, var(--dark-accent), var(--accent));
    padding:2rem 0;
    margin: 2rem 0;
    height:20rem;
    grid-column: left;
}

main .book-card img{
    height:100%;
    width:auto;
    max-width: 100%;
}

main .books-accordions .accordion{
    grid-column: center / span 2;
    width:100%;
    height:fit-content;
    margin-top:2rem;
    background-color:var(--accent);
}

main .accordion button{
    background:none;
    border:none;
    font:inherit;
    font-weight: 700;
    grid-column: full;
    width:100%;
    height:4rem;
    padding:0;
}

main .accordion .content{
    padding:2rem;
    grid-column: wide;
}

main .accordion h3{
    text-align: center;
}

main .accordion li + li{
    margin-top:1rem;
}

main .books-accordions hr{
    grid-column: full;
    width:100%;
    margin:2rem 0 2rem;
    border:1px solid var(--dark-accent);
}

@media (max-width:950px){
    main .books-accordions,
    main .books-accordions .accordion{
        grid-template-columns: 
        [left-start full-start wide-start center-start]
        1fr
        [left-end full-end wide-end center-end];
    }

    main .books-accordions .book-card{
        height:80%;
        padding:0;
        margin-bottom:-50%;
    }
}

@media screen and (max-width:940px){
    
    
    
    .left-bar,
    
    header .right-bar,
    
    .right-bar,
    
    .even{
        
        grid-template-columns: 1fr;

    }

    

    .left-bar .image,

    .right-bar .image,

    header .right-bar .content,

    .even,

    main .even .image{

        text-align: center;

    }

    

    main .buylinks{

        justify-content: center;

    }

    

    main{

        font-size:0.9rem;

        padding:1rem 0;

    }

    

    main .medium-paragraph + .image{

        margin-top:1rem;

    }

    

}



/*footer*/



footer ul{

    list-style: none;

    display:flex;

    gap:1rem;

    margin:0;

    padding:0;

    font-size:2rem;

    justify-content: center;

    margin-bottom:3rem;

}



footer ul li a{

    color:black;

}



footer .fa-facebook{

    color:#3b5998;

}



footer .fa-twitter{

    color:#00acee;

}



footer .fa-instagram{

    color:#e44565;

}


.footer-image{

    width:6rem;

    box-shadow: none;

}