/****** BASICS ******/
    body {
        margin: 0;
        background-image: url(/backgrounds/greenknit.jpg);
        background-color: rgb(142, 106, 112);
    }

/***** LAYOUT *****/
    .container {
        display: grid;
        grid-template: 
        "left head head" 100px
        "aside main main" 1fr
        "aside footer footer" 30px
        / 225px 1fr;
        width: 1150px;
        margin: 0 auto;
        margin-top: 20px;
        height: 95vh;
        border: 1px black solid;
        overflow: scroll;
        background-image: url(/backgrounds/plank.jpeg);
    }

/**** HEADER ****/
    header {
        border: 1px #534537 ridge;
        grid-area: head;
    }

    header img {
        margin-left: 45px;
    }

/**** ASIDE ****/
/**** this is for the tiny square in the top right corner ****/
    .left {
        grid-area: left;
    }

    .left img {
        margin-left: 35px;
        filter: sepia(0.5);
    }

    .left img:hover {
        transform: rotate(7deg);
    }

    aside {
        border: 1px #534537 ridge;
        grid-area: aside;
        overflow: scroll;
    }

    /*** styling for the decoration box ***/
    .decor {
        border: 1px #534537 ridge;
        height: 250px;
        background-image: url(/backgrounds/picnic.jpg);
    }
    
    .decor img {
        margin-top: -25px; 
        position: relative;
    }
    
    /*** syling for the recommendations box ***/
    .recommendations {
        border: 1px #534537 ridge;
        height: 200px;
        background-image: url(/backgrounds/diamond.jpg);
    }

    .recommendations h3 {
        background-color: bisque;
    }

    .recommendations img {
        margin-left: 60px;
        margin-top: -15px;
    }

    /*** styling for the notepad box ***/
    .literary {
        border: 1px #534537 ridge;
        height: 345px;
        background-image: url(/imgs/libraryimage/pngs/notepad.png);
        background-size: 99%;
        background-position-y: -25px;
    }

/**** MAIN CONTENT ****/
    main {
        border: 1px #534537 ridge;
        grid-area: main;
        overflow: scroll;
    }

    /*** introduction section styling ***/
    #intro {
        font-family: courier;
        font-size: 1em;
        text-align: center;
        height: 445px;
    }

    #intro p {
        background-color: bisque;
        border: 2px pink dotted;
    }

    /**** styling for buttons ***/
    button {
        padding: 10px 20px;
        background: pink;
        border-radius: 25px;
        font-family: courier;
        font-size: 1em;
        margin-left: 50px;
        margin-top: 15px;
    }

    /*** styling for the actual book part ***/
    .library {
        border: 1px #534537 ridge;
        height: 500px;
        overflow: scroll;
    }

    .library h2 {
        background-color: bisque;
        border: 2px darkolivegreen dotted;
    }

    .library img:hover {
        transform: rotate(7deg);
    }

    figure {
        width: 200px;
        display: inline-block;
        margin: auto;
    }

    figure p {
        text-align: center;
        margin-left: 5px;
        font-size: 0.8em;
        font-family: Courier;
        color: black;
        background-color: antiquewhite;
    }

    figure img {
        border: black 1px solid;
        width: 125px;
        height: 200px;
        margin-left: 5px;
    }

    /*** commentary box styling ***/
    .commentary {
        border: 1px #534537 ridge;
        height: 350px;
        margin-top: 5px;
        background-image: url(/backgrounds/crinkle.jpg);
        font-family: courier;
    }

/*** FOOTER ***/
    footer {
        border: 1px #534537 solid;
        grid-area: footer;
        background-image: url(/backgrounds/picnic.jpg);
    }

/****** ACCESSABILITY *******/
    #skip-to-content-link {
        position: fixed;
        top: 0;
        left: 0;
        display: inline-block;
        padding: 0.375em 0.75em;
        line-height: 1;
        font-size: 1.25em;
        background-color: var(--content-background-color);
        color: var(--text-color);
        transform: translateY(-3rem);
        transition: transform 0.1s ease-in;
        z-index: 99999999999;
    }

    #skip-to-content-link:focus, #skip-to-content-link:focus-within {
        transform: translateY(0);
    }