@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Syne+Mono&display=swap');

html {
    background: image(url(images/dark\ night\ sky\ stars\ .gif));
    color: black;
    font-family: Saira Condensed, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
}

header {
    border: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%) 5px solid;
    grid-row: 1 / 2;
    grid-column: 1/ 3;
    font-family: Syne Mono, Saira Condensed, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #4759DE;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%);
    text-align: center;

}

nav {
    border: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%) 5px solid;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    background: #4759DE; 
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%); 
    padding: .25em;
}

main {
    border: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%) 5px solid;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
    background: #4759DE;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%);
    padding: .75em;
}

footer {
    border: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%) 5px solid;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    background: #4759DE;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%);
}

.box {
    max-width: 1000px;
    margin: 100px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px minmax(0,1fr);
    
}



ul {
    padding: 0;
}

ul li::marker {
    content: none;
}

footer ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    gap: 2em;
}

            #musicplayer{
                font-family: Syne Mono, Saira Condensed, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* default font */
                background:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%); /* background color of player */
                border:4px solid #0c1348; /* border around player */
                width: 185px; /* width of the player - make it 100% if you want it to fill your container */
                padding: 0;
                text-align:center; 
                display: flex;
                flex-direction:column;
                gap: 0;
                
            }
 
            .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: #0c1348; /* 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;
            }
 
            .now-playing, .track-info{
                background-color:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(71, 89, 222, 1) 100%); /* 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:#0c1348; /* 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:#0c1348; /* 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:#0c1348; /* 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:#0c1348; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }