/****** fonts ******/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/****** scrollbar ******/
::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-thumb{
    background:#f6d695;
    border-radius:0;
}

::-webkit-scrollbar-track{
    background:inherit;
    border-radius:0;
}

/****** select hightlight ******/
::selection{
    background:#f598b5;
}

::-moz-selection{
    background:#f598b5;
}

/****** body ******/
body {
    background-image:url();
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    /* default font color */
    font-family:"Arial"; /*default font */
    font-size:20px; /* default font size */
    padding:10px;
}

/****** links ******/
a{
    text-decoration:none;
    transition:0.3s;
}

a:hover{
    cursor:help;
    transition:0.3s;
    text-shadow:-1px 0 #f6d695, 0 1px #f6d695, 1px 0 #f6d695, 0 -1px #f6d695;
}

/****** wrappers ******/
#wrapper{
    max-width:900px; /* width of entire page - can be changed but i don't recommend anything bigger than 1000! got to make sure the page fits on the screen */
    max-height:100%;
    width:fit-content;
    height:fit-content;
    animation:fadeEffect 1s;
    margin:auto;
}

@keyframes fadeEffect{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

#mainwrapper{
    margin-top:20px; /* space between containers */
    display:flex;
    gap:20px; /* space between containers */
    justify-content:space-between;
}

/****** main containers ******/
#header{
    width:100%; /* automatically resizes header image to the size of the wrapper (in this case 900px) */
}

#header img{
    max-width:100%;
    max-height:100%;
    display:block;
    border:4px solid #f598b5; /* border around header */
    object-fit:cover;
    box-sizing:border-box;
}

#title{
    /* color of title */
    font-size:70px; /* font size of title */
    text-align:center;
    font-family:"Montserrat"; /* font of title */
    width:100%;
    animation:pop 1s ease-in-out infinite alternate;
}

@keyframes pop{
    from{
        transform:scale(0.95);
    }
    50%{
        transform:scale(1);
    }
    to{
        transform:scale(0.95);
    }
}

#main{
    width:70%; /* width of main container - should add up to 100 when added to #sidebar width */
    max-height:800px; /* you can make this taller if you'd like */
    float:left;
    border:4px solid #f598b5; /* border of main container */
    padding:10px;
    overflow:auto;
    /* background color of main container */
}

#sidebar{
    width:30%; /* width of sidebar - should add up to 100 when added to #main width */
    float:left;
    display:flex;
    flex-direction:column;
    gap:20px; /* space between containers */
    position:relative;
}

/****** sidebar containers ******/
.subtitle{
    text-align:center;
    font-family:"Montserrat"; /* font of subtitle */
    font-size:35px; /* font size of subtitle */
    margin-top:-15px; /* should be about half of the subtitle font size */
    width:100%;
    position:absolute;
    animation:pop 1s ease-in-out infinite alternate;
}

.updates{
    border:4px solid #f598b5;
    padding:10px;
    height:100px;
    overflow:auto;
}

.music{
    border:4px solid #f598b5;
    padding:10px;
    text-align:center;
}

.links{
    border:4px solid #f598b5;
    padding:10px;
    text-align:center;
}

.box{
    border:4px solid #f598b5;
    padding:10px;
    text-align:center;
}

.banner{
    max-width:100%;
    max-height:100%;
}

/****** music player ******/
#musicplayer{
    width:100%;
}

.songtitle{
    padding:5px;
    display:block;
}

.controls{
    font-size:25px; /* size of controls */
    text-align:center;
    width:100%;
}

.controls td{
    padding:8px 5px 0 5px;
}

.seeking{
    display:flex;
    justify-content:space-evenly;
    padding:5px;
}

.current-time{
    padding-right:5px;
}

.total-duration{
    padding-left:5px;
}

i.fas:hover{
    cursor:help;
}

/*i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{*/
    /* color of controls */
/*}*/

input[type=range]{
    -webkit-appearance: none;
    width:100%;
    background-color:inherit;
}

input[type=range]:focus{
    outline:none;
}

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    cursor:help;
    background:#f598b5; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:15px; /* height of seeking circle */
    width:15px; /* width of seeking circle */
    border-radius:10px;
    background:#2f215b; /* color of seeker circle */
    cursor:help;
    -webkit-appearance:none;
    margin-top:-6px;
}

/* settings for firefox browsers */
input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    cursor:help;
    background:#f598b5; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
    height:15px; /* height of seeking circle */
    width:15px; /* width of seeking circle */
    border-radius:10px;
    background:#2f215b; /* color of seeker circle */
    cursor:help;
    border:none;
}

/****** mobile settings ******/
@media only screen and (max-width: 600px){
    #sidebar, #main{
        width:100%; /* makes all container 100% to fit screen */
    }

    #mainwrapper{
        flex-wrap:wrap;
    }

    .banner{
        max-width:60%; /* reduces image size of banners on mobile so they look nicer */
        margin:auto;
    }
}