body {
            background-color: rgb(134, 116, 89);
            scrollbar-color: var(--mid-brown) transparent;
            scrollbar-width: thin;
        }

        @font-face {
            font-family: pixelFont; 
            src: url(font/Pixelta.ttf); 
        }

        :root {
            --dark-brown: rgb(63, 37, 16);
            --mid-brown: #c28c68;
            --light-brown: #ecd0bd;
            --cream: #fffaeb;
            --tree: #6f4928;
        }

        #main-wrapper {
            border: 10px solid;
            margin: 0 auto;
            margin-top: 90px;
            padding: 0px;
            width: 1006px;
            height:674px;
            background-image: url('index/main-bg.png');
            position: relative;
            color: var(--dark-brown);
            font-family: "MS UI Gothic", Tahoma;
            overflow: hidden;
        }
        
        #fox-sit {
            position: absolute;
            bottom: 0;
            right: 33px;
            bottom: 121px;
        }

        #frame {
            border: 1px solid transparent;
            width: 401px;
            height:394px;
            position: absolute;
            left: 23px;
            bottom: 79px;
            border-radius:20px;
    
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 20px;
        }

        #main-box {
            border: 1px solid transparent;
            width: 361px;
            height:354px;
            border-radius:20px;
            padding: 11px;
            overflow-y: auto;
        }

        p {  text-indent: 30px; margin-top: 10px;}

        .fancy {
            font-family: pixelFont; 
        }

        .hilite {
            background: linear-gradient(to bottom, transparent 20%, var(--light-brown) 40%, var(--light-brown) 90%, transparent 90%);
            display: inline; 
        }

        hr {
            border: 1px solid var(--mid-brown);
            margin-bottom: 10px;
            margin-top: 0px;
        }

        #last-updated {
            border: 1px solid;
            width: 200px;
            position: absolute;
            top: -98px;
            right: 0px;
             -webkit-transition: all 0.8s ease-in-out;
             -moz-transition: all 0.8s ease-in-out;
             -o-transition: all 0.8s ease-in-out;
             -ms-transition: all 0.8s ease-in-out;
             transition: all 0.8s ease-in-out;
             
        }

        #update-date {
            font-weight: bold;
        }

        #blurb {
            background-color: var(--cream);
            padding:10px;
            position: relative;border: 1px solid;
            min-height: 74px;
        }

        #drop-down {
            background-color: var(--dark-brown);
            color: var(--cream);
            padding: 7px;
            cursor: pointer;
        }

        #drop-down:hover {
            color: var(--light-brown);
        }

        #blurb p {
           text-indent: 0px;
        }

        #last-updated:hover {
            top: -2px;
        }

        .warn::before {
            content: "!!!";
            color: red;
            font-weight: bold;
        }

        #view-count {
            width: 132px;
            position: absolute;
            top: 0;
            right: 210px;
        }

        .flex-box {
            display: flex;
            justify-content: center;
            flex-wrap: wrap; 
        }

        .flex-box h1 {
            font-family: pixelFont; 
            font-size: 20px;
            font-weight: 100;
        }

        #featured {
            border: 1px solid transparent;
            width: 180px;
            text-align: center;
            height: 200px;
        }
    

        #featured img {
            border: 1px solid var(--mid-brown);
            width: 155px;
            height: 155px;
        }

    
        #featured-artwork a {
            color: var(--dark-brown)
        }

        #clique-column {
            width: 150px;
            font-size: 10px;
            text-align: center;
        }

        #featured-artwork {
            border: 2px solid transparent;
            width: 200px;
            height: 232px;
            position: absolute;
            right: 280px;
            top: 120px;
            border-radius:20px;
            background-color: transparent;
            text-align: center;
        }

        #featured-artwork p {
            font-family: pixelFont; 
            font-size: 23px;
            text-indent: 0px; 
            margin-bottom: 5px;
        }

           #featured-artwork img {
            border: 1px solid;
            width: 180px;
            height: 180px;
        }

            #featured-artwork img:hover {
            box-shadow: 2px 2px var(--dark-brown);
            top:
        }

        
        #audio {
            position: absolute;
            bottom: 40px;
            left: 105px;
        }

        #audio button {
            font-family: pixelfont;
            font-size: 18px;
            background-color: var(--tree);
            border-radius: 10px;
            color: var(--cream);
            border: 2px solid var(--tree);
            filter: drop-shadow(0px 2px #573314);
            height: 25px;
        }

        #audio button:hover {
            margin-top: 1px;
            color: var(--light-brown);
        }

        .iframe-page {
            background-color: transparent;
             color: var(--dark-brown);
        }