body {
                margin: 0;
                padding: 0;
                font-family: sans-serif;
                background: #ddd;
                background:rgba(255, 153, 28, 0.6);
            }
            nav {
                width: 97%;
                min-height: 10px;
                /*background: blue;*/
                margin: 10px auto;
            }
            nav .searchBar {
                width: 100%;
                height: 40px;
                /*background: white;*/
            }
            nav .searchBar .navLogo{
                box-sizing: border-box;
                padding: 5px;
                float: left;
                width: 40px;
                height: 40px;
                font-size: 20px;
                background: orange;
                border-top-left-radius: 10px;
                overflow: hidden;
            }
            nav .searchBar .navLogo img{
                width: 30px;
                height: 30px;
            }
            nav .searchBar .navSearch{
                float: left;
                width: calc(100% - 120px);
                height: 40px;
                /*margin-top: 5px;*/
                padding-left: 5px;
                font-size: 20px;
                background: #fff;
                border: 1px solid orange;
            }
            nav .searchBar .navSearchButton{
                box-sizing: border-box;
                padding: 10px;
                float: left;
                width: 80px;
                height: 40px;
                font-size: 20px;
                background: orange;
                text-decoration: none;
                color: #111;
                border-top-right-radius: 10px;
                border: none;
            }
            nav .genreBar {
                width: 100%;
                min-height: 10px;
                display: table;
            }
            nav .genreBar a{
                float: left;
                text-align: center;
                width: calc(25% - 2px);
                background: #fff;
                padding-top: 10px;
                padding-bottom: 10px;
                font-size: 15px;
                border: 1px solid orange;
                text-decoration: none;
                color: #000;
                transition: .2s;
            }
            nav .genreBar a:hover{
                background: orange;
            }
            nav .genreBar a.active{
                background: orange;
            }
            .bookContainer {
                width: 90%;
                min-height: 200px;
                background: rgba(255,255,255,0.8);
                margin: 10px auto;
                border-radius: 20px;
                display: table;
            }
            .bookContainer .imgSelectContainer {
                background-position: center;
                background-size: cover;
                float: left;
                aspect-ratio: 0.67;
                width: calc(25% - 10px);
                border-radius: 20px;
                overflow: hidden;
                margin: 10px 5px;
                position: relative;
                color: #111;
                transition: .2s;
            }
            .bookContainer .imgSelectContainer:hover {
                color: orange;
            }

            .bookContainer .imgSelectContainer img {
                width: 100%;
            }
            .bookContainer .imgSelectContainer .butSelectContainer {
                width: 100%;
                text-align: center;
                position: absolute;
                background: #ddd;
                bottom: 0;
                padding-top: 5px;
                padding-bottom: 5px;
            }
            .bookContainer .imgContainer{
                float: left;
                width: 30%;
                text-align: center;
                /*background: yellow;*/
            }
            .bookContainer .imgContainer img{
                width: 95%;
                margin: 5px auto;
                border-radius: 20px;
            }
            .bookContainer .imgContainer .butContainer{
                width: 100%;
                min-height: 100px;
                /*background: #fff;*/
            }
            .bookContainer .imgContainer .butContainer .buttonSelect {
                display: table;
                text-decoration: none;
                width: 95%;
                background: orange;
                font-size: 18px;
                padding-top: 7px;
                padding-bottom: 7px;
                margin: 5px auto;
                color: #111;
            }
            .bookContainer .imgContainer .shareButContainer{
                width: 95%;
                min-height: 100px;
                /*background: #fff;*/
                margin: 0px auto;
            }
            .bookContainer .imgContainer .shareButContainer .buttonSelect {
                display: table;
                text-decoration: none;
                float: left;
                width: calc(33% - 10px);
                background: orange;
                font-size: 18px;
                padding-top: 7px;
                padding-bottom: 7px;
                margin: 5px;
                color: #111;
            }

            .bookContainer .descriptionContainer {
                float: left;
                width: 70%;
                min-height: 300px;
                /*background: pink;*/
            }
            .bookContainer .descriptionContainer h3{
                width: 95%;
                margin: 10px auto;
            }
            .bookContainer .descriptionContainer .bookAuthor {
                width: 95%;
                margin: 10px auto;
            }
            .bookContainer .descriptionContainer p {
                width: 95%;
                margin: 10px auto;
            }
            .bookContainer .descriptionContainer .genreBox {
                width: 95%;
                margin: 10px auto;
            }
            .bookContainer .descriptionContainer .genreBox a {
                float: left;
                text-decoration: none;
                text-align: center;
                display: table;
                width: calc(25% - 6px);
                margin: 2px 2px;
                border: 1px solid #111;
                border-radius: 10px;
                padding-top: 4px;
                padding-bottom: 4px;
            }

            .bookContainer .descriptionContainer .bookPublisher {
                display: table;
                width: 95%;
                margin: 10px auto;
            }
            .bookContainer .descriptionContainer .bookPublisher p {
                margin: 10px 0;
            }

            @media screen and (max-width: 1240px) {
                .bookContainer .imgSelectContainer {
                    width: calc(33% - 10px);
                }
            }
            @media screen and (max-width: 930px) {
                .bookContainer .imgSelectContainer {
                    width: calc(50% - 10px);
                }
            }
            @media screen and (max-width: 620px) {
                .bookContainer .imgSelectContainer {
                    width: calc(100% - 10px);
                }
            }