html {
                overflow-y: scroll;
                scrollbar-color: #ffffff #000;
                scrollbar-width: thin;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                }

            ul { list-style-type: none; text-align: center; margin: 0; padding: 0; padding-top: 5px;}
            a {text-decoration: none;}
    
            .sitelink {
                position: absolute;
                float: inherit;
            }

#musicplayer{
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 14em;
font-family: greybeard, monospace;
font-size: 12px;
color:#ffffff;
line-height:140%;
border: 1px solid #808080;
border-radius: 3px;
background:#000000;
margin-top: 10px;
margin-bottom: 5px;
}

#musictitle{
font-family: greybeard, monospace;
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
}

#musicpixel{
width: 2.5em;
padding: 5px;
position:relative;
min-height: 15px;
background:#000000;
border-right: 1px solid #808080;
}

.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;
background: #3c3c3c;
}

#musicplayer:hover .overlay {
opacity: 1;
transition:0.3s ease;
}

.playpause{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}

.playpause:hover{
cursor:help;
}

#musicpixel img{
display:block;
}

.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}

    
    
    .ttext {
     font-family: monospace;
     color: #432929;
    margin-top: 20px;
    }
    
       .ttextb {
     font-family: monospace;
     color: #432929;
    margin-bottom: 20px; 
    }
    
              #preloader {
    align-items: center;
    justify-content: center;
    width: 100%;
    display: flex;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    background: #000000
      url("https://files.catbox.moe/pv6zub.gif")
      repeat center;
    z-index: 9999;
  }

    .button {
        background-color: black;
        color: white;
    }

    .button:hover {
        background-color: black;
        color: white;
        cursor: pointer;
    }
    


            textarea {
                background-color: #000000;
                border: 1px solid #999;
                padding: 5px;
                color: white;
                display: block;
                width: 100%;
                height:70px;
                z-index: 999;
                display: block;
            }

           #mySidenav a {
               display: block;
                left: 5px;
                transition: 0.6s ease-out; 
                background-color: #000000;
                color: white;
                font-size: 12px;
                font-weight: 10px;
                padding: 5px;
                text-align: left;
                border-style: solid;
                border-color: gray;
                border-width: thin;
                border-radius:  0px 5px 85px 5px;
                border-block-start-style: double;
                margin-top: 5px;
                width: 100%;
                text-decoration: none;
        }

        #mySidenav a:hover {
            left: 15px; 
            box-shadow: 0 0 10px #9c9c9c;
            letter-spacing: 0.15em;
            border-color: white;
            color: white;
        }
            #mySidenav a:active {
            left: 5px; 
            box-shadow: 0 0 20px #dfdfdf;
            letter-spacing: 0.12em;
            transition: 0.05s ease-out;
        }

        #guestbook {
          top: 300px;
          background-color: #000000;
        }

        #drawbox {
          background-color: #000000; 
        }

        #status {
          top: 100px;
          background-color: #000000; 
        }

        #photog {
          top: 140px;
          background-color: #000000 
        }
    
        a {
                letter-spacing: 1px;
                transition: all .5s ease-out;
            }
        a:hover {
                letter-spacing: 0.2em;
                text-shadow: 0 0 15px #8c8c8cff;
            }
    
        .ad {
                text-align: center;
                margin-top: 15px;
                opacity: 50%;
            }

        .ad img {
            max-width: 100%;
            height: auto;
            display: inline-block;
        }
      
            body {
                font-family: greybeard, monospace;
                margin: 0;
                background-color: #000000;
                color: #fceaff;
                background-size:     100% 100%;                     
                background-repeat:   no-repeat;
                background-position: center center;
            }

            * {
                box-sizing: border-box;
            }
            
            #container {
                max-width: 900px;
                min-width: 900px;
                margin: 0 auto;
            }
    
            #container a {
                color: #ffffff;
        
            }

            #header {
                width: 900px;
                height: 50px;
                background-image: var(--header-image);
                background-size: 100%;
            }

            
            #navbar {
                height: 40px;
                background-color: #121212;
                width: 900px;
                letter-spacing: 4px;                

                border-top: 1px solid #f8e9e9;
                border-left: 1px solid #b8a9a9;
                border-right: 1px solid #f8e9e9;
                border-bottom: 1px solid #b8a9a9;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            #navbar li a {
                color: #ffffff;
                font-weight: 800;
                text-decoration: none;
            }

            #navbar li a:hover {
                color: #ffffff;
                text-decoration: none;
                text-shadow: 0 0 20px #ffffff;
            }
    
            #navbar li a:active {
                color: #ffffff;
                background-color: #181818;
                text-decoration: none;
                text-shadow: 0 0 30px #ffffff;
            }

            #flex {
                display: flex;
            }
        
            aside {
                background-color: #121212;
                overflow-y: auto;
                width: 300px;
                padding: 12px;
                font-size: 12px;
                float: left;
                 border-top: 1px solid #f8e9e9;
                border-left: 1px solid #b8a9a9;
                border-right: 1px solid #f8e9e9;
                border-bottom: 1px solid #b8a9a9;
            }
        
            main {
                background-color: #0b0b0b;
                flex: 1;
                padding: 0px;
                order: 2;
                width: 900px;
                font-family: "MS Gothic", Times, serif;
                
                 border-top: 1px solid #f8e9e9;
                border-left: 1px solid #b8a9a9;
                border-right: 1px solid #f8e9e9;
                border-bottom: 1px solid #b8a9a9;
            }
           
            iframe {
                border:none; 
                height: 600px;
                flex: 1;
                size: 100px;
                max-width:900px;
                width: 700px;
                margin:auto;
            }
      
            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                width: 900px;
                height: 40px;
                padding: 10px;
                text-align: right;
                font-size: small;
                color: gray;
            }

            .counter {
                background-color: #000000;
               border-style: solid;
                border-color: #808080;
                border-width: thin;
                border-radius:  0px 5px 50px 5px;
                border-block-start-style: double;
                padding: 10px;
                margin-bottom: 15px;
                padding-top: 0px;
                column-gap: 20px;
                justify-content: space-between;
                scrollbar-width: none;
                -ms-overflow-style: none; }
                counter::-webkit-scrollbar-button { display: none; };
                
            }
    
            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: 20px;
                background-color: #000000;
            }
    
              ::selection {
    background: #582c2c; /* WebKit/Blink Browsers */
    color: #ffffff;
}
::-moz-selection {
    background: #432929; /* Gecko Browsers */
    color: #ffffff;
}
       
            @media only screen and (max-width: 500px) {
               
                <meta name="viewport" content="width=device-width, initial-scale=0.5" />

                site {
                    height: 100px;
                    width: 100px;
                     margin: auto;
                    position: fixed;
                    top: 50%;
                }
            }