/****** fonts ******/
@font-face{
  font-family: "Rubik Glitch", system-ui;
  font-weight: 400;
  font-style: normal;
}
    

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

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

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

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

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

/****** body ******/
body {
    background-color:#000000;
    background-image:url('http://dl8.glitter-graphics.net/pub/3764/3764208txopikbp44.gif');
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color:#ffffff; /* default font color */
    font-family:"Courier New"; /* default font */
    font-size:20px; /* default font size */
    padding:10px;
}

/****** links ******/
.lin{
    text-decoration:none;
    color:#f200e2;
    transition:0.3s;
    text-shadow:-1px 0 #f200aa, 0 1px #f200aa, 1px 0 #f200aa, 0 -1px #f200aa;
}

.lin:hover{
    cursor:help;
    transition:0.3s;
    color:#f200aa;
    text-shadow:-1px 0 #f200e2, 0 1px #f200e2, 1px 0 #f200e2, 0 -1px #f200e2;
}

/****** 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:5px solid #fc00c2; /* border around header */
    object-fit:cover;
    box-sizing:border-box;
}

#title{
    color:#000000; /* color of title */
    text-shadow:-1px 0 #00e7f7, 0 1px #00e7f7, 1px 0 #f700ce, 0 -1px #f700ce;
    font-size:70px; /* font size of title */
    text-align:center;
    font-family:"Rubik Glitch"; /* 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:5px solid #00f3f7; /* border of main container */
    padding:10px;
    overflow:auto;
    background-color:#000000; /* background color of main container */
}

#blin{
  background-color:#000000;
  justify-content: space-around;  /* Evenly spaces items with padding around them */
  align-items: center;
}

.blink {
  display: flex;
  white-space: nowrap;
  gap:10px;
  flex-direction: row;
  justify-content:space-around;
}

.blinkie{
  width: 150px;              /* Set your desired uniform width */
  height:auto;   
}

.blinkie-class img {
  width: 150px; /* Force the blinkies to a fixed, smaller width */
  height: auto;
}
.blinkies {

display:block;

text-align: center;

padding:0px;
padding-left: 0;
  margin-left: 0;

}

.blink{
    display: flex;
    flex-direction: row; /* arrange lists horizontally, from left to right */
    flex-wrap: wrap; /* if there is not enough horizontal space for both lists, display them one above the other anyway */
    gap: 1rem; /* or however much space you want between your lists */
    justify-content: space-around; /* or something else, depending on where you want to place your lists in the available horizontal space */
    align-items: flex-start; /* this align both lists to the top of the container */
}


img{border:0;}


#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:"Rubik Glitch"; /* 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;
    color:#000000; /* color of subtitle */
    text-shadow:-1px 0 #f700ce, 0 1px #f700ce, 1px 0 #00e7f7, 0 -1px #00e7f7;
    animation:pop 1s ease-in-out infinite alternate;
}

.updates{
    border:5px solid #f7000c;
    padding:10px;
    height:100px;
    overflow:auto;
    background-color:#000000;
}

.music{
    border:5px solid #a500f7;
    padding:10px;
    background-color:#000000;
    text-align:center;
}

.links{
    border:5px solid #ebf700;
    padding:10px;
    background-color:#000000;
    text-align:center;
}

.box{
    border:5px solid #00f700;
    padding:10px;
    background-color:#000000;
    text-align:center;
}

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

/****** music player ******/

#musicplayer{
    width:100%;
}

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

.controls{
    font-size:25px !important; /* 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.fa-pause, i.fa-play, i.fa-forward, i.fa-backward{
    color:#2f215b; /* 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:#05fff3; /* 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:#ffffff; /* 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:#ffffff; /* 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;
    }
}