body{
            background-image: URL("./images/purple\ check.gif");
        }

        #mainbox1{
            border-style:inset;
            border-color:#9533c3;
            border-radius:20px;
            margin: auto;
            background-image: url("./images/HD-wallpaper-dark-skater-fantasy-pattern-skate-splash-emo-fantasy-3d-square-dark-new-skater.jpg");
            background-position: center;
            background-size: auto;
            width:1200px;
            margin-top: 50px;
        }

        #header1{
            border-style:inset;
            border-color: #9533c3;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            height:150px;
            margin-top:0px;
            margin-bottom:0px;
            margin: auto;
            background-image: url("./images/bat\ bg\ 1.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        #indexleft{
            width: 242px;
            border-style: inset;
            border-color: #9533c3;
            background-image: url("./images/grey\ stars.jpg");
            order: 1;
        }

        #indexcentre{
            width: 701px;
            border-style: inset;
            border-color: #9533c3;
            order: 2;
        }

        #indexright{
            width: 242px;
            border-style: inset;
            border-color: #9533c3;
            background-image: url("./images/grey\ stars.jpg");
            order: 3;
        }

        #footer1{
            border-style:inset;
            border-color: #9533c3;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            height:80px;
            margin-top:0px;
            margin-bottom:0px;
            margin-right: auto;
            margin-left: auto;
            background-image: url("./images/bat\ bg\ 1.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            clear:left;
        }

        
        h1{
            color: #9533c3;
            font-family: "Rubik Burned", 'Courier New', Courier, monospace;
            border-top-style:double;
            border-bottom-style:double;
            border-left-style:double;
            border-right-style:double;
            border-left-width:15px;
            border-right-width:15px;
            padding: 14px 25px;
            background-color: black;
            text-align: center;
        }

        p{
            color:#9533c3;
            font-family: "Mystery Quest", 'Courier New', Courier, monospace;
            border-top-style:double;
            border-bottom-style:double;
            border-left-style:double;
            border-right-style:double;
            border-left-width:15px;
            border-right-width:15px;
            padding: 14px 25px;
            background-color: rgb(0, 0, 0);
        }

        #navigation1{
        color:#9533c3;
        font-family: "Mystery Quest", 'Courier New', Courier, monospace;
        width: 240px;
        border-style: inset;
        border-color: #9533c3;
        text-align: center;
        }

        #indexlink{
            color: #9533c3;
            background-color: #000000;
            padding: 14px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-style: inset;
            border-color: #9533c3;
            margin-bottom: 10px;
        }

        #imgfloatright1{
            float: right;
            margin-right: 15px;
            margin-top: 3px;
        }

        .blackborder{
            border-style: solid;
            border-width: 10px;
            border-image: url(./images/laceborderblack.png) 60 fill round;        
        }

        .greyborder{
            border-style: solid;
            border-width: 10px;
            border-image: url(./images/lacebordergrey.png) 60 fill round;
        }

        .purpleborder{
            border-style: solid;
            border-width: 10px;
            border-image: url(/images/laceborderpurple.png) 60 fill round;
        }

        #musicplayer{
                font-family:"Mystery Quest"; /* default font */
                background:rgb(0, 0, 0); /* background color of player */
                border:4px solid #9533c3; /* border around player */
                width:215px; /* 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:#9533c3; /* color of buttons */
                font-size:35px !important; /* size of buttons */
            }
 
            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:5px;
                color: #9533c3;
            }
 
            .now-playing, .track-info{
                background-color:#6e6e6e; /* background color of top two boxes */
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearances: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:#9533c3; /* 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:#9533c3; /* 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:#9533c3; /* 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:#9533c3; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }
        
        .flex{
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-items: stretch;
        }

        #divider1{
            border-style: inset;
            border-color: #9533c3;
            background-image: url(./images/background\ 1.png);
            height: 80px;
            margin: auto;
        }

        .FixedHeightContainer{
            width:345px; 
            padding:0px;
            background-color: #9533c3; 
            border-style: inset;
            border-color: #9533c3;
            margin: 10px;
        }

        .Content{
            height:224px;
            overflow:auto;
            background:black;
            color: #9533c3;
            font-family: "Mystery Quest", 'Courier New', Courier, monospace;
            padding: 5px;
        }

        h2{
            color:black;
            font-family: "Rubik Burned", 'Courier New', Courier, monospace;
            text-align: center;
        }
       
        /* Firefox */
        * {
            scrollbar-width: auto;
            scrollbar-color: #9533c3 #000000;
        }

        /* Chrome, Edge, and Safari */
        *::-webkit-scrollbar {
            width: 16px;
        }

        *::-webkit-scrollbar-track {
            background: #000000;
        }

        *::-webkit-scrollbar-thumb {
            background-color: #9533c3;
            border-radius: 10px;
            border: 3px inset #000000;
        }

        .flex1{
            display: flex;
        }

        .smallmargin{
            margin: 10px;
        }

        #creds{
            color:#9533c3;
            font-family: "Mystery Quest", 'Courier New', Courier, monospace;
            border-top-style:double;
            border-bottom-style:double;
            border-left-style:double;
            border-right-style:double;
            text-decoration: none;
            border-left-width:15px;
            border-right-width:15px;
            padding: 14px 25px;
            background-color: rgb(0, 0, 0);
        }