@font-face {
    font-family: "Legacy";
    src: url(/fonts/legacy.otf);
}

:root {
    --b: white; /* container bgs */
    --bw: 4px; /* border width */
    --bc: #4cd4de; /* border color */
    --h: #98e4a2; /* header bgs */
    --pink: #e74492;
    --bt: solid;
    --color: #000;
    --display: flex;
    --ibw: 4px;
    --font: "Trebuchet MS";
    --hfont: "Legacy";
    --size: 17px;
}

* {
    box-sizing: border-box;
    scrollbar-color: var(--orabge) #fff;
    scrollbar-width: thin;
    cursor: url("/cursors/cur1054.png"), pointer;
  
}

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

::-webkit-scrollbar-thumb {
    background: var(--bc);
    color: white;
    border: 3.5px var(--bt) #ffffff;
    border-radius: 0;
}

::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 0;
    box-shadow: inset 0 0 0 0 #f0f0f0;
}

::selection {
    background: var(--bc);
    color: white;
}



a:not(:has(img, div, button)) {
  
    
    color: #000000;
    
    text-shadow:
        rgb(255, 255, 255) 2px 0 0,
        rgb(255, 255, 255) 1.75517px 0.958851px 0,
        rgb(255, 255, 255) 1.0806px 1.68294px 0,
        rgb(255, 255, 255) 0.141474px 1.99499px 0,
        rgb(255, 255, 255) -0.832294px 1.81859px 0,
        rgb(255, 255, 255) -1.60229px 1.19694px 0,
        rgb(255, 255, 255) -1.97999px 0.28224px 0,
        rgb(255, 255, 255) -1.87291px -0.701566px 0,
        rgb(255, 255, 255) -1.30729px -1.51361px 0,
        rgb(255, 255, 255) -0.421592px -1.95506px 0,
        rgb(255, 255, 255) 0.567324px -1.91785px 0,
        rgb(255, 255, 255) 1.41734px -1.41108px 0,
        rgb(255, 255, 255) 1.92034px -0.558831px 0;

    transition: 0.1s;
}

a:not(:has(img, div, button)):hover {
    letter-spacing: 3px;
}

p {
    line-height: 110%;
}

summary {
    font-weight: bold;
}

body {
   
    background-color: #ffffff;
    color: #000;
    font-family: var(--font);
    font-size: var(--size);
    line-height: 110%;
    text-align: center;
    margin: 10px;
    animation: fadeEffect 0.5s;
}

.bg {
    background-image: url("graphics/loopbg.gif");
    background-attachment: fixed;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -999999999999999;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

header {
    color: solid #000000;
    font-family: Trebuchet MS;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: -2px;
    margin-bottom: 10px;
    text-shadow:
        rgb(255, 255, 255) 2px 0 0,
        rgb(255, 255, 255) 1.75517px 0.958851px 0,
        rgb(255, 255, 255) 1.0806px 1.68294px 0,
        rgb(255, 255, 255) 0.141474px 1.99499px 0,
        rgb(255, 255, 255) -0.832294px 1.81859px 0,
        rgb(255, 255, 255) -1.60229px 1.19694px 0,
        rgb(255, 255, 255) -1.97999px 0.28224px 0,
        rgb(255, 255, 255) -1.87291px -0.701566px 0,
        rgb(255, 255, 255) -1.30729px -1.51361px 0,
        rgb(255, 255, 255) -0.421592px -1.95506px 0,
        rgb(255, 255, 255) 0.567324px -1.91785px 0,
        rgb(255, 255, 255) 1.41734px -1.41108px 0,
        rgb(255, 255, 255) 1.92034px -0.558831px 0;
    line-height: 100%;
    text-align: center;
}

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

#miku {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    background-image: url(/graphics/lohrelogonormal.png);
    background-position: 50% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--h) solid #ffffff00;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    height: 320px;
    padding: 10px;
}


.homepagebg{
    background: white;
    
    background-size:contain;
    position: relative;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -999999999999999;
}



@keyframes moveItTop {
  from {background-position: top left;}
  to {background-position: top right;}
}

@keyframes moveItBottom {
  from {background-position: bottom right;}
  to {background-position: bottom left;}
}


.homepage {
    
   
    margin-left: -100px;
    color: red; 
    
    
}

.homepagetext00 {
    
    color: red;
    bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
    position: relative;
    
}

.container {
    
    box-shadow: 0 0 0 10px #ffffff, 0 0 10px 20px #00000077;
    border: 5px solid #000000;
    outline: 5px solid #ffffff;
    
    max-width: 100%;
    display: grid;
    grid-template-columns: 20% 1fr 20%;
    grid-auto-flow: row;
    gap: 10px;
    grid-template-areas:
        "updates main jukebox"
        "links main chatbox"
        "stats main chatbox";
    
    padding: 10px;
    box-sizing: border-box;
    background:rgb(240, 248, 255, 130);
    position: relative;
}

.main {
    
    grid-area: main;
    order: 2;
    z-index: 2;
    display: flex;
    flex-direction: column;
	overflow: hidden;
  
}

iframe.noScrolling{
 
  overflow: hidden;
}


.updates {
    grid-area: updates;
    overflow: auto;
    border: solid #000000;
    border-radius: 10px 10px 2 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 1083px;
    order: 3;
}

.links {
    grid-area: links;
    border: solid #000000;
    border-radius: 10px 10px 2 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    order: 1;
}

.stats {
    grid-area: stats;
    border: solid #000000;
    border-radius: 10px 10px 2px 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: fit-content;
    order: 4;
}

 #musicplayer {
     font-family: Trebuchet MS; /* default font */
     background-color: black;
     border: 2px solid #9f9f9f; /* border around player */
     width: 100%; /* 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;
     
 }

 .songtitle,
 .track-info,
 .now-playing {
     padding: 1px;
    
 }

 .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: #0d0d0d; /* color of buttons */
     font-size: 35px !important; /* size of buttons */
 }

 .volume-icon {
     font-size: 22px !important; /* size of volume icon */
 }

.seeking{
   color: #0d0d0d; 
}

 .volume {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 5px;
 }



 .now-playing {
     font-weight: normal;
 }

 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: 63px; /* thickness of seeking track */
     background: #000000; /* 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: #20983c; /* 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: #099b25; /* 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: #00e224; /* color of seeker square */
     border: none; /* removes weird border around seeker square in firefox */
 }

.banner img {
    border: 3px solid #000000;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding: 0.5p;
    
    width: 100%;
}

.footer {
    font-size: 14px;
   
    outline: solid #000000;
    border: white;
    overflow: auto;
 
	background-position: 0 0, 31px 31px;
	background-size: 32px 32px;
	background-color: #fffefe;	
    text-align: center;
    padding: 5px;
    margin-top: 23px;
}

.title {
    position: sticky;
    border: white;
    border-radius: 8px 8px 0 0;
	background: linear-gradient(135deg, #FFFFFF 25%, transparent 25%) -25px 0, linear-gradient(225deg, #FFFFFF 25%, transparent 25%) -25px 0, linear-gradient(315deg, #FFFFFF 25%, transparent 25%), linear-gradient(45deg, #FFFFFF 25%, transparent 25%);	
	background-size: 22px 22px;
    background-color: #D9D9E2;
    padding: 10px;
    text-align: center;
}

.inner {
    height: auto;
    padding: 10px;
    overflow: auto;
  
    border-top: solid #000000;
}

.inner2 {
    height: auto;
    padding: 10px;
    overflow: hidden;
  
    border-top: solid #000000;
}

.inner3 {
    height: 300px;
    width: 610px;
    overflow: auto;
    border-top: solid #000000;
}

.inner > table > tbody > tr > td > a {
    line-height: 102%;
    font-size: 25px;
    font-family: Trebuchet MS;
    font-weight: bold;
    
}

.inner > table > tbody > tr > td {
    display: flex;
    align-items: center;
}

.inner > table > tbody > tr {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

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

.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, 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, 0.5) 51%);
        background-size: 100% 4px;
    }

    to {
        background: linear-gradient(to bottom, rgba(0, 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: 17px !important;
    text-align: center;
    width: 100%;
}

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

.seeking,
.volume {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    background-color: var(--bg);
    color: var(--color);
}

.now-playing {
    font-weight: bold;
}

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

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

i.fa-pause,
i.fa-play,
i.fa-forward,
i.fa-backward {
    color: green;
}

i.fa-play,
i.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: 4px;
    box-shadow: 0 0 0 #000000;
    background: solid #000000;
    border-radius: 1px;
    border: 0 solid #000000;
}

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

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: var(--pink);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    box-shadow: 0 0 0 #000000;
    background: var(--pink);
    border-radius: 1px;
    border: 0 solid #000000;
}

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

ul {
    list-style: none;
    margin: 0;
    line-height: 110%;
}

ul li:before {
    content: "\25A0 ";
    color: var(--pink);
    display: inline-block;
    width: 1.3em;
    margin-left: -1.3em;
}

.update {
    
    box-shadow:0px 0px 7px;
    background: rgb(240, 248, 255, 130);    
    padding: 10px;

    margin-bottom: 10px;
    text-align: left;
}



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

input[type="text"]:focus {
    outline: nobne;
    box-shadow: none;
    border: none;
    font-family: var(--font);
}

input[type="text"]:focus:hover {
    outline: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

input[type="number"] {
    width: 150px;
    padding: 4px;
    color: black;
    border: var(--bw) var(--bt) var(--bc);
    outline: none;
}

.highlight {
    font-weight: bold;
}


form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


@media only screen and (max-width: 1000px) {
    .main {
        height: 900px;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .virtualdiva {
        display: block;
    }

    #miku {
        height: fit-content;
        background-image: none;
    }

    #c_widget {
        height: 501px !important;
    }
}