:root {
    --b: white; /* container bgs */
    --bw: 3px; /* border width */
    --bc: #34f2ff; /* border color */
    --bcc: #34f2ff; /* border color outset */
    --h: #dbfcff; /* header bgs */
    --pink: #e74492;
    --bt: solid;
    --color:#000;
}

* {
    box-sizing: border-box;
    scrollbar-color:#e74492 #fff;
    scrollbar-width:thin;
    cursor:url('/arrow.png'), pointer;
}

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

::-webkit-scrollbar-thumb{
    background: #e74492;
    border: 3.5px var(--bt) #FFFFFF;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover{
    background: #ed75ae;
}

::-webkit-scrollbar-track{
    background: #FFFFFF;
    border-radius: 0px;
    box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}

::selection {
    background: #34f2ff;
    color:white;
}
 
::-moz-selection {
    background: #34f2ff;
    color:white;
}

a{
    text-decoration: none;
    color:#e74492;
    text-shadow: 2px 2px 1px #34f2ff;
    transition:0.3s;
}

a:hover{
    
    transition:0.3s;
    letter-spacing:1.5px;
}

@font-face{
    font-family:'Legacy';
    src:url(/fonts/LegacySansStd-Medium.otf);
}

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

@font-face{
    font-family:'Orbitron';
    src:url(/fonts/Orbitron.ttf);
}

@font-face{
    font-family:'YTTD';
    src:url(/fonts/mplus-1m-regular.ttf);
}

@font-face{
    font-family:'Yuzu';
    src:url(/fonts/Yuzu.ttf);
}

body {
    background-color:#fff;
    color: #000;
    font-family: 'Pixel Operator';
    font-size:20px;
/*    background-image:url('/images/dot.png');*/
/*    background-image:url('https://files.catbox.moe/f4dw63.jpeg');*/
    animation:fadeEffect 0.5s;
}

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

p{
    line-height:100%;
}

a{
    text-decoration: none;
    color:#e74492;
    text-shadow: 2px 2px 1px #34f2ff;
    transition:0.3s;
}

a:hover{
    letter-spacing: 2px;
}

header{
    color:#e74492;
    font-family: 'Orbitron';
    font-size:20px;
}

#wrapper{
    max-width:1100px;
    margin:15px auto;
    animation:fadeEffect 0.5s;
}

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

#miku{
    max-width:100%;
    height:auto;
    outline: var(--bw) var(--bt) var(--bc);
    background-color:var(--h);
    box-sizing: border-box;
    z-index:1;
    position:relative;
}

#miku img{
    width:100%;
    height:auto;
    margin-left:-120px;
    pointer-events: none;
    display:block;
    z-index:10;
    margin-bottom:var(--bw);
    position:relative;
}


.container {  
    max-width:100%;
    display: grid;
    grid-template-rows: 279px 306px 139px;
    grid-template-columns: 23% 1fr 23%;
    grid-auto-flow: row;
    gap:10px;
    grid-template-areas:
    "updates main jukebox"
    "links main chatbox"
    "stats banner chatbox";
    outline:var(--bw) var(--bt) var(--bc);
    padding:10px;
    box-sizing: border-box;
    background:var(--b);
}

.main { 
    grid-area: main; 
    border:var(--bw) var(--bt) var(--bc);
    box-sizing: border-box;
    height:662px;
    order:2;
    z-index:2;
}

.updates { 
    grid-area: updates; 
    border:var(--bw) var(--bt) var(--bc);
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    order:3;
    height:
}

.links {
    grid-area: links; 
    border:var(--bw) var(--bt) var(--bc);
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    order:1;
}

.stats { 
    grid-area: stats; 
    border:var(--bw) var(--bt) var(--bc);
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    order:4;
}

.jukebox { 
    grid-area: jukebox; 
    border:var(--bw) var(--bt) var(--bc);
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    order:5;
}

.chatbox { 
    grid-area: chatbox; 
    border:var(--bw) var(--bt) var(--bc);
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    order:6;
    z-index:2;
}

.banner{
    grid-area: banner;
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
    order:7;
    z-index:1;
}

.footer { 
    outline:var(--bw) var(--bt) var(--bc);
    overflow:auto;
    margin-top:var(--bw);
    background-color:var(--h);
    text-align:center;
    padding:2px;
}

.title{
    position: sticky;
    border-bottom:var(--bw) var(--bt) var(--bc);
    background-color:var(--h);
    padding:10px;
    text-align: center;
}

.inner{
    height:auto;
    padding:10px;
    overflow:auto;
    background-color:var(--bg);
}

.virtualdiva{
    display:flex;
    height: 306px;
    width: 1098px;
    padding: 75px;
    align-content: center;
    align-items: center;
    font-size:80px;
    font-weight:600;
    position:absolute;
    z-index:999999;
    text-align: right;
    font-family:'Orbitron';
    color:var(--pink);
    -webkit-text-stroke:1px white;
    animation: glowing 2s infinite;
    justify-content: flex-end;
    user-select: none;
}


@keyframes glowing {
  0% {text-shadow:0 0 .1em, 0 0 .1em;}
  
  50% {text-shadow:0 0 .3em, 0 0 .1em;}
  
  100%{text-shadow:0 0 .1em, 0 0 .1em;}
}


.lines {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999999999999999999999999999999999999999999999999999999999999;
    opacity: 0.05;
}

.lines:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
    background-size: 100% 4px;
    will-change: background, background-size; animation: scanlines 0.2s linear infinite;
}

@keyframes scanlines {
    from {
    background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%); background-size: 100% 4px; }
    to {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
    background-size: 100% 4px;
    }
}

.chatbox{
    width:100%;
    height:auto;
}

#musicplayer{
    background-color:var(--bg);
    padding:10px;
}
 
.songtitle{
    padding:5px;
    text-align:center;
}
 
.controls{
    font-size:18px !important;
    text-align:center;
    width:100%;
    margin-top:-4px;
    margin-bottom:-4px
}

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

.seeking, .volume{
    display:flex;
    justify-content: space-evenly;
    padding:10px 10px 0px 10px;
    background-color:var(--bg);
    color:var(--color);
}

.current-time{
    padding-right:5px;
    color:var(--color);
}

.total-duration{
    padding-left:5px;
    color:var(--color);
}

i.fas:hover{
    
}
 
i.fa-sharp.fa-pause,i.fa-sharp.fa-play,i.fa-sharp.fa-forward,i.fa-sharp.fa-backward{
    color:#e74492;
}

i.fa-sharp.fa-play, i.fa-sharp.fa-pause{
    font-size:30px !important;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background-color:var(--bg);
}

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

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000;
    background: #E74492;
    border-radius: 1px;
    border: 0px solid #000000;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #E74492;
    height: 10px;
    width: 10px;
    border-radius: 0px;
    background: #E74492;
    -webkit-appearance: none;
    margin-top: -4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #E74492;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000;
    background: #E74492;
    border-radius: 1px;
    border: 0px solid #000000;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #E74492;
    height: 10px;
    width: 10px;
    border-radius: 0px;
    background: #E74492;
}

ul{
    list-style:none;
}

ul li:before{
    content:"\25A0 ";
    color:#e74492;
    display:inline-block;
    width:1em;
    margin-left:-1.3em;
}

.mainheader{
    font-family:'Orbitron';
    text-align:center;
    color:#e74492;
    background:var(--h);
    padding:15px;
    box-sizing:border-box;
    padding:10px;
    margin-top:10px;
    border:var(--bw) var(--bt) var(--bc);
}

.mainheader:before{
    content:attr(data-header);
}

img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.update{
    background-color:var(--h);
    padding:5px;
    margin-bottom:10px;
}



button{
    border: var(--bw) var(--bt) var(--bc);
    outline: none;
    padding: 5px 8px;
    background-color: #dbfcff;
    font-family: 'Pixel Operator';
    font-size:16px;
    margin:2px 0px;
    transition:0.2s;
    color:#e74492;
}

button:hover{
    background-color: #e74492;
    color:white;
    transition:0.2s;
}

#s-m-t-tooltip{
    margin: 20px 0 0 20px;
    padding: 5px;
    max-width: 300px;
    background-color:var(--b);
    color:black;
    border: var(--bw) var(--bt) var(--bc);
    z-index: 9999;
}

.fa-sharp.fa-solid.fa-power-off{
    border:var(--bw) var(--bt) var(--bc);
    padding:20px;
    background-color:var(--h);
    border-radius:50%;
    margin:15px 10px 0px 10px;
    letter-spacing: normal;
    transition:0.3s;
}

.fa-sharp.fa-solid.fa-power-off:hover{
    background-color:var(--pink);
}

iframe{
    color:var(--color);
}

@media only screen and (max-width: 1000px) {
    #miku img{
        margin-left:0px;
    }
    
    .virtualdiva{
        display:none;
    }
    
    .container {  
        display:flex;
        flex-direction:column; 
    }
}