html {
                scrollbar-color: #c5dca0 #add8e6;
            }

            body {
                background: url(/book/bg.webp);
                background-size: 100%;
                margin: 0;
                word-wrap: break-word;  
                font-size: 1.2em;
                font-family: "Dekko", cursive;
            }

            .lace {
                background: url(/book/wrapper.webp);
                padding: 1px;
                margin: 60px auto 35px auto;
                width: 1120px;
                height: 630px;
            }

            .container {
                background: #ffead1;
                position: relative;
                width: 87%;
                height: 80%;
                padding: 20px 10px 15px;
                border: 1px solid #ffc19f;
                margin: 40px auto 0;
                border-radius: 5px;
            }

            /* Notebook pages */
            .paper {
                background: url(/book/paper.webp) #fffefc;
                border: 1px solid lightblue;
                border-radius: 10px;
                display: inline-block;
                height: 27em;
                position: relative;
                overflow: hidden;
                box-sizing: border-box;
                vertical-align: top;
                margin-top: -10px;
                background-size:23px;
            }
            .rings {
                background: url("/book/rings.webp") 0px 0px / contain repeat-y;
                height: 98%;
                width: 77px;
                position: absolute;
                left: 24em;
                z-index: 1;
                top: 10px;
            }
            .paper.left {
                width: 43%;
                margin-left: 3em;
                padding: 0px;
            }

            .paper.right {
                width: 43%;
                margin-left: 1em;padding:0px 0px 0px 30px;
                overflow: auto;
            }

            .left-in {
                padding: 0px 10px 15px 25px;
                height: 100%;
                overflow: auto;
                margin-right: 15px;
            }
           

            /* Tab navigation */
            nav.tab {
                width: 560px;
                height: 60px;
                position: absolute;
            }

            .tab-left {
                transform: rotate(-90deg);
                left: -232px;
                top: 11.2em;
            }

            .tab-right {
                rotate: 90deg;
                right: -232px;
                top: 13.4em;
            }

            .tablinks {
                z-index: 1;
                position: relative;
                width: 110px;
                margin: 0 8px;
                padding: 10px 0 30px;
                font-family: "Annie Use Your Telescope";
                font-size: 1.2em;
                border-radius: 10px 10px 0 0;
                cursor: pointer;
                transition: 0.3s;
                top: 10px;
            }

            .tablinks:hover {
                top: 0;
            }

            .tablinks.active {
                top: 0;
                box-shadow: 1px 1px 20px 1px #ffb37b;
            }

            .tablinks[data-color="green"] {
                background: #e0ffaf;
                border: 1px solid #97c154;
            }
            .tablinks[data-color="purple"] {
                background: #f5c8ff;
                border: 1px solid #e98efd;
            }
            .tablinks[data-color="pink"] {
                background: #ffcbd8;
                border: 1px solid #f584a1;
            }
            .tablinks[data-color="yellow"] {
                background: #fff3be;
                border: 1px solid #e3c437;
            }
            .tablinks[data-color="orange"] {
                background: #ffcf94;
                border: 1px solid #f4a341;
            }
            .tablinks[data-color="blue"] {
                background: #d2eaff;
                border: 1px solid #7cc2ff;
            }
            .tablinks[data-color="red"] {
                background: #ff9f9f;
                border: 1px solid #ff5a5a;
            }
            .tablinks[data-color="grey"] {
                background: #c7ffff;
                border: 1px solid #65e2e2;
            }

            .tabcontent {
                display: none;
            }
            #music {
                box-sizing: border-box;
                font-family: arial, nerdfont;
                padding-top: 1px;
                background: rgb(111, 67, 44);
                border-top: 1px;
                border-right: 0px;
                font-size: 19px;
                line-height: 31px;
                width: 200px;
                height: 430px;
                box-shadow: inset 2px -4px 10px #301606;
                transition-duration: 0.5s;
                border-radius: 10px;
                overflow: hidden;
                position: absolute;
                z-index: 1;
                top:13em;
                transform:rotate(5deg);
                right:-10em;
                * {
                    box-sizing: border-box;
                }

                #album {
                    background: white;
                    color: black;
                    border: 1px solid white;
                    width: 40%;
                    margin: 0 0 0 5px;
                }

                /* 1/? tracks playing */
                #now-playing {
                    display: inline-block;
                    position: absolute;
                    float: right;
                    margin-top: 30%;
                    margin-left: 40%;
                }

                /* line below album cover */
                hr {
                    border:1px solid white;
                }

                /* controls grid */
                #controls {
                    background: #fab657;
                    position: relative;
                    display: grid;
                    border: 2px solid rgb(188, 115, 69);
                    width: 63%;
                    height: 30%;
                    margin: auto;
                    margin-top: 10px;
                    grid-template-columns: 33% 33% 33%;
                    grid-template-rows: 33% 33% 33%;
                    padding: 0px;
                    border-radius: 50%;
                }

                /* buttons in controls CSS */
                #controls button {
                    cursor: pointer;
                    font-family: nerdfont, arial;
                    font-size: 13px;
                    background: inherit;
                    border: none;
                    border-radius: 50%;
                    color: #4f351b;
                    margin: 0px;
                    text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815);
                }

                /* since these buttons don't do anything, they have a 'blocked' cursor */
                #controls button.down {
                    cursor: not-allowed;
                }

                /* the two mini curcle buttons */
                button#playlist-btn,
                button#current-song-btn {
                    position: relative;
                    border: 1px solid rgb(213, 213, 213);
                    background: #ba3f3f;
                    color: white;
                    font-size: 10px;
                    text-align: center;
                    border-radius: 50%;
                    z-index: 20;
                }

                /* play pause button */
                button#play-pause {
                    color: white;
                    border: 1px solid rgb(95, 47, 22);
                    border-radius: 50%;
                    font-size: 14px;
                }

                /* screen wrapper */
                #screen {
                    position: relative;
                    background: rgb(255, 218, 166);
                    text-align: left;
                    margin: auto;
                    width: 100%;
                    height: 63%;
                    border: 20px solid #624a32;
                    box-shadow: inset 0px 0px 10px #7b5c42;
                    border-top-width: 30px;
                    border-bottom-width: 30px;
                    font-size: 10px;
                    letter-spacing: 1px;
                    line-height: 13px;
                    overflow: hidden;
                    color: #4b280d;
                    scrollbar-color: rgb(200, 147, 74) transparent;
                }

                /* screen class (for playlist and currently playing song)*/
                .screen {
                    position: relative;
                    overflow: auto;
                    height: 83.4%;
                }

                /* playlist songs listing */
                #playlist button {
                    color: rgb(66, 41, 20);
                    text-align: left;
                    display: block;
                    width: 100%;
                    padding: 0px;
                    margin: 0px;
                    background: transparent;
                    font-family: inherit;
                    font-size: inherit;
                    border: 1px solid transparent; /* this is here so it doesn't move when hovered */
                }

                #playlist button:hover {
                    cursor: pointer;
                    background: #fdaa03;
                    background: linear-gradient(360deg, rgba(253, 170, 3, 1) 0%, rgba(255, 217, 140, 1) 91%);
                    color: black;
                    border: 1px solid #f79501;
                }

                /* button text */
                #playlist button span {
                    margin: 4px 4px;
                    display: inline-block;
                    vertical-align: middle;
                    width: 70%;
                    font-size: 10px;
                    line-height: 13px;
                }

                /* button album cover */
                #playlist button img {
                    display: inline-block;
                    vertical-align: middle;
                    line-height: 0px;
                    width: 30px;
                    border: 1px solid #733e00;
                    margin: 4px 4px;
                }

                /* currently playing screen music info */
                p.info {
                    margin: 4px 4px;
                    padding: 0;
                }

                /* icons  */
                .icon {
                    color: rgb(170, 76, 47);
                    font-size: 12px;
                }

                #top-bar {
                    background: linear-gradient(360deg, rgb(255, 166, 89) 0%, rgb(255, 211, 166) 100%);
                    width: 100%;
                    text-align: center;
                    font-size: 9px;
                    padding: 1px;
                    margin: 0px;
                }

                #bottom-bar {
                    background: linear-gradient(360deg, rgb(239, 255, 157) 0%, rgb(221, 255, 168) 100%);
                    width: 100%;
                    font-size: 9px;
                    line-height: 0px;
                    padding: 0px;
                    margin: 0px;
                }

                /* current song playing in playlist screen */
                #bottom-bar #current {
                    display: inline;
                }

                /* current time of song */
                #bottom-bar span {
                    display: inline-block;
                    padding: 7px;
                }

                /* emoji that a song is playing */
                span#current-song-emoji {
                    font-size: 10px;
                    padding-left: 0px;
                    padding-right: 0px;
                }

                /* scrolling name of current song playing */
                span#current-song-playing {
                    display: inline-block;
                    padding: 0px;
                    width: 80px;
                    line-height: 10px;
                }

                /* playing status icon in the bar */
                #playing-status {
                    font-size: 13px;
                    padding-left: 5px;
                    color: rgb(92, 34, 34);
                }

                /* battery icon in the bar */
                #battery {
                    font-family: nerdfont;
                    padding-top: 10px;
                    padding-right: 4px;
                    font-size: 13px;
                    float: right;
                }

                /* song progress bar */
                .track-progress {
                    accent-color: rgb(255, 255, 255);
                    -webkit-appearance: none;
                    cursor: help;
                    width: 100%;
                    height: 4px;
                    padding: 0px;
                    margin: 0px;
                    background: linear-gradient(90deg, rgb(255, 165, 59) 0%, rgb(255, 51, 13) 100%);
                    border-bottom: 1px solid #96bf5f;
                }

                /* song progress bar - thumb */
                /* chrome */
                .track-progress::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    appearance: none;
                    height: 4px;
                    width: 2px;
                    background:rgb(169, 208, 255);
                    cursor: pointer;
                    border: none;
                    border-radius: 0px;
                }

                /* firefox */
                .track-progress::-moz-range-thumb {
                    height: 2.6px;
                    width: 2px;
                    background: rgb(129, 55, 52);
                    cursor: pointer;
                    border: none;
                    border-radius: 0px;
                }

                /* song progress - bar progress */
                /* only on firefox */
                .track-progress::-moz-range-progress {
                    background: rgb(169, 208, 255);
                }
            }

            

            /* nerdfonts */
            @font-face {
                font-family: "nerdfont";
                src: url(https://file.garden/Zj1sfPoh-G9Y8BHe/SymbolsNerdFont-Regular.ttf);
            }
            .headphones{
                position: absolute;
                right:-17em;
                z-index: 3;
                width:20%;
                transform: rotate(60deg);
                bottom:-13em;
            }
            .sword{
                width:22%;
                position: absolute;
                top:-5em;
                left:20.3em;
                z-index: 1;
            }
            .paper img{
                width:25%;
            }