#musicplayer{
                font-family:'Arial'; /* default font */
                background: #C21482; /* background color of player */
                border:4px solid #6D0846; /* border around player */
                width:250px; /* width of the player - make it 100% if you want it to fill your container */
                padding:10px;
                text-align:center; 
                display:flex;
                flex-direction:column;
                gap:10px;
            }
 
            .songtitle, .track-info, .now-playing{
                padding:5px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:10px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:17px !important; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:33.3%;
            }
 
            .playpause-track, .prev-track, .next-track{
                color:#FFF; /* color of buttons */
                font-size:35px !important; /* size of buttons */
            }
 
            .volume-icon{
                color:#FFF; /* color of icon */
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items: center;
                gap:5px;
            }
 
            .now-playing, .track-info{
                background-color: #6D0846; /* background color of top two boxes */
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:100%;
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#FFF; /* color of seeking track */
            }
 
            input[type=range]::-webkit-slider-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background: #FFF; /* color of seeker square */
                -webkit-appearance:none;
                margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
            }
 
            input[type=range]::-moz-range-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background: #FFF; /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#6D0846; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }
        </style>


<style>
/* The following CSS applies on all screen sizes */

/* Colors and fonts */
:root {
  
    /* Fonts */
    --headerfont: 'BestTenDOT';
    --bodyfont: 'Pixel Operator';
  
  
    /*Images*/
    --body-bg-image: url('https://smokoswebzone.gay/ud1.gif');
    

    /* Main colors */
    --background: #5a094a; /* Page background */
    --color: #fff;
    --block: #211884; /* Background color for the grid blocks in the content */


    --link:#EF5DB9;
    --linkhover:#F6B6DF;

    --h1:#EF5DB9;
    --h2:#EF5DB9;
    --h3:#EF5DB9;
    --h4:#EF5DB9;

    /* Sidebar colors */
    --sidebar: #00000000;
    --sidebarcolor: #00000000;
    --title: #5a094a;
    --sidebarlink: #5a094a;
    --sidebarlinkhover:#a649a9;

    /* Menu colors */
    --menubg:#2c1a30;
    --menucolor:#e0aee2;
    --menubghover:#e0aee2;
    --menucolorhover:#2c1a30;
}

* { margin:0; padding:0; }

/* Main body styling */

@font-face { 
    font-family: Pixel Operator;
    src: url('https://smokoswebzone.gay/fonts/PixelOperator.ttf');
  }

  @font-face {
    font-family: Pixel Operator;
    src: url('https://smokoswebzone.gay/fonts/PixelOperator-Bold.ttf');
    font-weight: bold;
  }
  
  @font-face {
    font-family: BestTenDOT;
    src: url('https://smokoswebzone.gay/fonts/BestTen-DOT.otf');
  }

  @font-face {
    font-family: BestTenCRT;
    src: url('https://smokoswebzone.gay/fonts/BestTen-CRT.otf');
    font-weight: bold;
  }
  

body {
  font-family: var(--bodyfont); 
  margin: 0;
  background-size: 184px;
  color: #fceaff;
  background-image: var(--body-bg-image);
 background-color:var(--background);
 background-attachment:fixed;
 color:var(--color);
}

/* Rounded corners - feel free to get rid of this or change it */

main section, #sidebar-content, #main-footer {
    border-radius:5px;
}

/* Sidebar styling */

#sidebar-content {
    text-align:center;
    background: var(--sidebar);
    color: var(--sidebarcolor);
    padding:10px;
}

#sidebar-content header {
    color:var(--title);
    font-family: var(--headerfont);
    margin:8px;
}

#sidebar-content p a {
    color:var(--sidebarlink);
    transition:0.5s ease;
}

#sidebar-content p a:hover {
    color:var(--sidebarlinkhover);
    transition:0.5s ease;
}

/* Styling for the menu */

#main-menu {
    font:1.1em var(--headerfont);
    width:100%;
}

#main-menu ul {
    list-style:none;
}

#main-menu li a {
    padding:7px;
    background:var(--menubg);
    color:var(--menucolor);
    text-decoration:none;
    transition:0.5s ease;
}

#main-menu li a:hover, #main-menu li a:focus {
    background: var(--menubghover);
    color:var(--menucolorhover);
    transition:0.5s ease;
}

/* Content styling */

main {
    margin-top:10px;
}

/* Styling for blocks */

main section {
    padding:15px;
    background:var(--block);
    margin-bottom:10px;
    border: 5px dotted #C71585;
    border-radius: 25px;
}

#main-footer {
    padding:15px;
    background: #00000000;
    margin-bottom:10px;
    border: none;
}

main h1 {
    font-family: var(--headerfont);
    color:var(--h1);
}

main h2 {
    font-family: var(--headerfont);
    color:var(--h2);
}

main h3 {
    font-family: var(--headerfont);
    color:var(--h3);
}

main h4 {
    font-family: var(--headerfont);
    font-style:italic;
    color:var(--h4);
}

p {
    font-family: var(--bodyfont);
    font-size: 18px;
    margin:10px 0 10px 0;
}

main a {
    color:var(--link);
    transition:0.5s ease;
}

main a:hover, main a:focus {
    color:var(--linkhover);
    transition:0.5s ease;
}

main ul {
    list-style-position: outside;
    margin-left: 25px;
}

main ul li {
    line-height:1.5;
}

main img {
    max-width:100%;
}

main input, textarea, select { 
    background: #C21482;  
    color: var(--color);
    font: var(--bodyfont);
    padding: 8px; 
    margin: 2px;
}


.grow img{
transition: 1s ease;
}

.grow img:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1s ease;
}

button { 
  background-color: #C21482;
  border-radius: 10px;
  border: solid 2px #6D0846;
  color: white;
  padding: 5px;
  font-family: var(--bodyfont);
  text-align: center;
  font-size: 18px;
  margin: 2px;  
}

button:hover {
 background-color: #e872bc;
}

#main-footer {
    text-align:center;
    background-color: #000000000;
}

/* The following CSS ONLY applies to mobile/small screens */

/* Container styling */
#container {
    width: calc(100% - 20px);
    padding:7.5px;
    margin-top:10px;
}

#sidebar-content {
    width: calc(100% - 20px);
}

#main-menu li {
    margin-bottom:15px;
    display:inline-block;
}

/* Skip to content button */

a {
    font-weight: bold;
    color: var(--link);
    letter-spacing: 0px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease; 
    }


  .expand:hover {
    letter-spacing: 5px; 
    }

  .sprites {
    display: none;
    visibility: hidden;
  }
  
  
/* The following CSS ONLY applies to desktop/big screens */

@media screen and (min-width: 800px) {
    #container {
        max-width:950px;
        width:90%;
        margin:25px auto;
        display:flex;
        gap:20px;
        } 
  }

    #sidebar {
        flex: 1 1 calc(25% - 20px);
        margin-top:10px;
    }
    
    /* Remove or comment out this block if you don't want a sticky sidebar */
    #sidebar-content {
        position:sticky;
        top:10px;
    }
    
    /* Make menu links into a column */

    #main-menu li {
        display:block;
        margin:0;
    }

    #main-menu li a {
        display:block;
        border-bottom:1px solid;
    }

    main {
        flex: 1 1 calc(75% - 30px);
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    main section {
        margin:0;
    }
    
    #main-footer {
        flex: 1 1 calc(100% - 40px);
    }
   
  .sprites {
    display: block;
  }
} 

    /* Defining grid blocks */

    .full { flex: 1 1 calc(100% - 40px);}
    .half { flex: 1 1 calc(50% - 40px); }
    .third { flex: 1 1 calc(33% - 40px); }
    .twothirds { flex: 1 1 calc(66% - 40px); }
    .quarter { flex: 1 1 calc(25% - 40px); }
    .threequarter { flex: 1 1 calc(75% - 40px); }
}