/* Library Stylesheet */
        
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            :root {
                --lightest-brown: #a15016;
                --light-brown: saddlebrown;
                --medium-brown: #66330f;
                --dark-medium-brown: #5c2e0e;
                --dark-brown: #4d2509;
                --modal-color: darkgoldenrod;
                --sunrays: #f9fabc9a;
            }

            html{
                font-size: 25pt;
                scroll-behavior: smooth;
            }

            body {
                background-image: url('../Images/darkseagreen_book.svg'), linear-gradient(#38261a, darkseagreen);
                background-size: 5%;
                display: flex;
                justify-content: center;
            }

            .room {
                justify-self: center;
                height: 100vh;
                display: grid;
                grid-template-rows: repeat(7, 1fr);
                grid-template-columns: repeat(6, minmax(100px, 175px));
                opacity: 0;
                animation: 6s begin;
            }

            @keyframes begin {
                0% {
                    opacity: 0;
                }
                90% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }

            .wall {
                background-color: darkseagreen;
                grid-row: 1 / 6;
                grid-column: 1 / 9;
            }

            .floor {
                background-color: #38261a;
                grid-row: 6 / 8;
                grid-column: 1 / 9;
            }

            .table {
                width: 90%;
                justify-self: end;
                grid-row: 5 / 7;
                grid-column: 1 / 3;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(6, 1fr);
            }

            .tabletop {
                border-bottom: 50px solid var(--lightest-brown);
                border-left: 25px solid transparent;
                border-right: 25px solid transparent;
                height: 0;
                grid-column: 1 / 5;
                grid-row: 1 / 2;
            }

            .table-side {
                background-color: var(--light-brown);
                border-top: 1px solid var(--medium-brown);
                border-bottom: 1px solid var(--medium-brown);
                grid-row: 2 / 3;
                grid-column: 1 / 6;
            }

            .front-legs {
                grid-column: 1 / 5;
                grid-row: 3 / 7;
                display: flex;
                border-left: 25px solid var(--light-brown);
                border-right: 25px solid var(--light-brown);
            }

            .front-sides {
                flex: 1;
                border-left: 10px solid var(--medium-brown);
                border-right: 10px solid var(--medium-brown);
                border-bottom: 20px solid transparent;
            }

            .back-legs {
                grid-column: 1 / 5;
                grid-row: 3 / 6;
                height: 80%;
                width: 70%;
                justify-self: center;
                display: flex;
                border-left: 20px solid var(--dark-medium-brown);
                border-right: 20px solid var(--dark-medium-brown);
            }

            .back-sides {
                flex: 1;
                border-left: 8px solid var(--dark-brown);
                border-right: 8px solid var(--dark-brown);
                border-bottom: 16px solid transparent;
            }

            .catalog {
                border-bottom: 45px solid antiquewhite;
                border-left: 25px solid transparent;
                border-right: 25px solid transparent;
                height: 0;
                grid-column: 2 / 4;
                grid-row: 1 / 2;
                font-size: 12px;
                text-align: center;
                color: darkgoldenrod;
                box-shadow: 0px 5px darkgoldenrod;
            }

            .catalog:hover {
                cursor: pointer;
                border-bottom: 45px solid lightgoldenrodyellow;
                box-shadow: 0px 5px gold;
            }

            .sign {
                grid-column: 4 / 6;
                grid-row: 1 / 2;
                background-image: linear-gradient(100deg, gold, goldenrod, gold, goldenrod, gold, goldenrod, gold);
                background-color: gold;
                border: 5px solid #b1861a;
                color: #b1861a;
                text-align: center;
                font-size: 0.75rem;
                font-weight: bold;
                margin-top: 10px; 
                border-radius: 10px;
                height: 50%;
                display: grid;
                align-items: center;
            }

            .windowsill {
                grid-column: 1 / 3;
                grid-row: 2 / 4;
                width: 50%;
                justify-self: center;
                border-bottom: 15px solid var(--medium-brown);
                display: grid;
                
            }

            .window {
                width: 90%;
                justify-self: center;
                background-size: cover;
                background-color: skyblue;
                border: 10px solid var(--light-brown);
                border-bottom: 5px solid var(--light-brown);
                overflow: hidden;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
            }

            .invisible {
                display: none;
            }

            .dawn-sky {
                background-image: linear-gradient(paleturquoise, palegoldenrod);
            }

            .mid-day-sky {
                background-image: linear-gradient(deepskyblue, skyblue);
            }

            .dusk-sky {
                background-image: linear-gradient(blueviolet, orange);
            }

            .night-sky {
                background-image: linear-gradient(black, navy);
            }

            .cloud {
                width: 70px;
                height: 40px;
            }

            .cloud-one-dawn {
                grid-row: 1 / 2;
                grid-column: 1 / 3;
                justify-self: center;
                animation: 3s linear infinite alternate sway;
            }

            .cloud-two-dawn {
                grid-row: 2 / 3;
                grid-column: 2 / 4;
                justify-self: center;
                align-self: center;
                animation: 3s linear infinite alternate-reverse sway;
            }

            .cloud-one-mid {
                grid-row: 2 / 4;
                grid-column: 1 / 3;
                justify-self: center;
                align-self: center;
                animation: 3s linear infinite alternate sway;
            }

            .cloud-two-mid {
                grid-row: 1 / 2;
                grid-column: 2 / 4;
                justify-self: center;
                align-self: end;
                animation: 3s linear infinite alternate-reverse sway;
            }

            @-webkit-keyframes sway {
                from {
                    -webkit-transform: translateX(0px);
                    transform: translateX(0px);
                }
                to {
                    -webkit-transform: translateX(10px);
                    transform: translateX(10px);
                }
            }

            @-moz-keyframes sway {
                from {
                    -moz-transform: translateX(0px);
                    transform: translateX(0px);
                }
                to {
                    -moz-transform: translateX(10px);
                    transform: translateX(10px);
                }
            }

            @-ms-keyframes sway {
                from {
                    -ms-transform: translateX(0px);
                    transform: translateX(0px);
                }
                to {
                    -ms-transform: translateX(10px);
                    transform: translateX(10px);
                }
            }

            @-o-keyframes sway {
                from {
                    -o-transform: translateX(0px);
                    transform: translateX(0px);
                }
                to {
                    -o-transform: translateX(10px);
                    transform: translateX(10px);
                }
            }

            @keyframes sway {
                from {
                    -webkit-transform: translateX(0px);
                    -moz-transform: translateX(0px);
                    -ms-transform: translateX(0px);
                    -o-transform: translateX(0px);
                    transform: translateX(0px);
                }
                to {
                    -webkit-transform: translateX(10px);
                    -moz-transform: translateX(10px);
                    -ms-transform: translateX(10px);
                    -o-transform: translateX(10px);
                    transform: translateX(10px);
                }
            }

            .white-clouds {
                background-color: white;
            }

            .pale-blue-clouds {
                background-color: #daf3ff;
            }

            .pale-yellow-clouds {
                background-color: cornsilk;
            }

            .plum-clouds {
                background-color: plum;
            }

            .pink-clouds {
                background-color: rgb(253, 144, 104);
            }

            .cloud-base {
                width: 70px;
                height: 20px;
                border-radius: 50px;
                margin-top: 20px;
            }

            .cloud-mini-bump {
                width: 25px;
                height: 25px;
                border-radius: 50%;
            }

            .mini-one {
                margin-top: -30px;
                margin-left: 10px;
            }

            .mini-two {
                margin-top: -30px;
                margin-left: 35px;
            }

            .cloud-main-bump {
                width: 35px;
                height: 35px;
                border-radius: 50%;
            }

            .main-one {
                margin-left: 23px;
                margin-top: -30px;
            }

            .main-two {
                margin-left: 10px;
                margin-top: -35px;
            }

            .sun-rays {
                width: 90px;
                height: 90px;
                border-radius: 50px;
                grid-row: 1 / 4;
                grid-column: 1 / 4;
                justify-self: center;
                align-self: end;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 121px;
                background-image: repeating-conic-gradient(var(--sunrays), transparent, var(--sunrays), transparent, var(--sunrays), transparent, var(--sunrays), transparent, transparent, transparent, transparent, transparent, transparent, transparent, var(--sunrays), transparent, var(--sunrays), transparent, var(--sunrays), transparent, var(--sunrays));
            }
/*
            .sun-rays::before {
                content: "";
                width: 5px;
                height: 20px;
                background-color: yellow;
                transform: translateX(-50%);
                position: absolute;
                transform: translateX(-50%) rotate(30deg);
            }
*/
            .sun {
                position: absolute;
                width: 50px;
                height: 25px;
                border-top-left-radius: 50px;
                border-top-right-radius: 50px; 
            }

            .no-rays {
                background-image: none;
            }

            .sunrise {
                background-color: #ffe600;
            }

            .sunset {
                background-color: orangered;
            }

            .stars {
                background-color: white;
                width: 3px;
                height: 3px;
                border-radius: 50%;
                grid-column: 1 / 4;
                grid-row: 1 / 4;
                justify-self: center;
                align-self: center;
                box-shadow: 40px 40px white, 25px -25px white, -35px -35px white, -30px 30px white, 0px -70px white, 60px -60px white;
                transition: width 1s ease-in-out;
                animation: twinkle 2s infinite;
            }

            .small-stars {
                background-color: paleturquoise;
                width: 1.5px;
                height: 1.5px;
                border-radius: 50%;
                grid-column: 1 / 2;
                grid-row: 1 / 2;
                justify-self: center;
                align-self: center;
                box-shadow: 40px 30px paleturquoise, 90px 50px paleturquoise, 80px 0px paleturquoise, 0px 60px paleturquoise, 50px 120px paleturquoise, 60px 90px paleturquoise, 0px 110px paleturquoise;
            }

            @keyframes twinkle {
                0% {
                    width: 3px;
                    height: 3px; 
                }
                50% {
                    width: 4px;
                    height: 4px;
                }
                100% {
                    width: 3px;
                    height: 3px; 
                }
            }

            .bookcase-container {
                width: 90%;
                grid-column: 3 / 7;
                grid-row: 1 / 7;
                display: grid;
                grid-template-rows: 1fr 5fr;
                justify-self: center;
            }

            .bookcase-top {
                border-left: 25px solid transparent;
                border-right: 25px solid transparent;
                border-bottom: 25px solid var(--lightest-brown);
            }

            .bookcase {
                background-color: var(--dark-brown);
                border: 15px solid var(--light-brown);
                display: grid;
            }

            .casing {
                border-bottom: 10px solid var(--light-brown);
                display: grid;
            }

            .shelf {
                width: 100%;
                height: 100%;
                grid-row: 1 / 2;
                grid-column: 1 / 2;
                display: flex;
                gap: 10px;
                padding: 2px;
                padding-left: 10px;
            }

            .shelf-siding {
                grid-row: 1 / 2;
                grid-column: 1 / 2;
                height: 100%;
                background-color: var(--medium-brown);
                border-left: 25px solid var(--medium-brown);
                border-right: 25px solid var(--medium-brown);
                border-bottom: 25px solid var(--dark-brown);
            }

            .shelf-backing {
                height: 100%;
                background-color: var(--dark-medium-brown);
                border-left: 1px solid var(--dark-brown);
                border-right: 1px solid var(--dark-brown);
            }

            .book {
                width: 25px;
                height: 80%;
                align-self: flex-end;
                border-radius: 5%;
                display: grid; /* to align the title */
                align-items: center; /* to align the title */
                justify-content: center; /* to align the title */
                overflow: hidden;
            }

            .book:hover {
                cursor: pointer;
                background-image: radial-gradient(white, lime);
                background-blend-mode:lighten;
            }

            .title {
                width: 70px; /* same length as the book's height*/
                font-size: 10%;
                font-weight: bold;
                transform: rotate(90deg);
                letter-spacing: 0.03rem;
                text-align: center;
                padding: 0.5vmin;
            }

            .visible {
                display: grid;
            }

            @media(max-width: 920px) {
                .room {
                    height: 100vh;
                }
                .windowsill {
                    display: none;
                }
                .table {
                    width: 100%;
                    grid-column: 1 / 2;
                    grid-row: 2 / 3;
                    display: flex;
                    justify-content: flex-end;
                }
                .tabletop {
                    display: none;
                }
                .table-side {
                    display: none;
                }
                .front-legs {
                    display: none;
                }
                .back-legs {
                    display: none;
                }
                .sign {
                    grid-column: 3 / 6;
                }
                .catalog {
                    height: 100%;
                    width: 90%;
                    border: none;
                    background-color: antiquewhite;
                    padding-top: 10px;
                    font-size: 25px;
                    padding: 1vmin;
                }
                .catalog:hover {
                    border: none;
                    background-color: lightgoldenrodyellow;
                }
                .bookcase-container {
                    grid-column: 2 / 7;
                }
            }

            @media(max-width: 600px) {
                .room {
                    justify-self: center;
                    width: 100vw;
                    height: 100vh;
                    display: grid;
                    grid-template-rows: repeat(7, 1fr);
                    grid-template-columns: repeat(4, 1fr);
                }
                .sign {
                    grid-column: 2 / 4;
                    font-size:4.5vmin;
                    height: 60%;
                }
                .table {
                    width: 100%;
                    grid-column: 2 / 4;
                    grid-row: 7 / 8;
                    justify-content: center;
                    align-items: center;
                }
                .catalog {
                    height: 80%;
                    width: 50%;
                }
                .bookcase-container {
                    grid-column: 1 / 5;
                }
            }

            @media(max-width: 450px) {                
                .bookcase {
                    border: 3vmin solid var(--light-brown);
                }
                .casing {
                    border-bottom: 3vmin solid var(--light-brown);
                }
                .catalog {
                    width: 100%;
                }
            }