html,html[data-theme="light"]{
    --page-img:url(/images/ferriswheel.png);
    --header-img:url(/dw/k9anddoggie.png);
    --bg-color:#e1e6ee;
    --pg-color:#d0d6d4;
    --txt:#474747;
    --link:#3642e9;
    --link-vst:#432ad3;
    --link-hover:#8ecdf7;
    --header-txt-stroke:#f5f5f5;
    --intro-bg:#2b2bfd;
    --intro-shdw:#383131dc;
    --col-hov:#0fbfccd8;
    --crnt-tble:#a09f9fbb;
    --light:#c9c9c9
}
html[data-theme="dark"]{
    --page-img:url(/images/dw-darkmode.jpg);
    --header-img:url(/dw/k9anddoggie.png);
    --bg-color:#2e2e2e;
    --pg-color:#161105;
    --txt:#cfcfcf;
    --link:#2984fc;
    --link-vst:#8adbfc;
    --link-hover:#8ecdf7;
    --header-txt-stroke:#2e2e2e;
    --intro-bg:#11117e;
    --intro-shdw:#beaaaadc;
    --col-hov:#0fbfccd8;
    --crnt-tble:#525252bb;
    --light:#c9c9c9
}
@media (prefers-color-scheme:dark){
    html,html[data-theme="dark"]{
        --page-img:url(/images/dw-darkmode.jpg);
        --header-img:url(/dw/k9anddoggie.png);
        --bg-color:#2e2e2e;
        --pg-color:#161105;
        --txt:#cfcfcf;
        --link:#2984fc;
        --link-vst:#8adbfc;
        --link-hover:#8ecdf7;
        --header-txt-stroke:#2e2e2e;
        --intro-bg:#11117e;
        --intro-shdw:#beaaaadc;
        --col-hov:#0fbfccd8;
        --crnt-tble:#525252bb;
        --light:#c9c9c9
    }
    html[data-theme="light"]{
        --page-img:url(/images/ferriswheel.png);
        --header-img:url(/dw/k9anddoggie.png);
        --bg-color:#e1e6ee;
        --pg-color:#d0d6d4;
        --txt:#474747;
        --link:#3642e9;
        --link-vst:#432ad3;
        --link-hover:#8ecdf7;
        --header-txt-stroke:#f5f5f5;
        --intro-bg:#2b2bfd;
        --intro-shdw:#383131dc;
        --col-hov:#0fbfccd8;
        --crnt-tble:#a09f9fbb;
        --light:#c9c9c9
    }
}
@font-face{
    font-family:DOS;
    src:url(/fonts/Px437_DOS-V_re_ANK24.ttf) format("truetype")
}
@font-face{
    font-family:DW;
    src:url(/fonts/Doctor-Who.ttf) format("truetype")
}
body{
    background-image:var(--page-img);
    background-size:cover;
    background-repeat:no-repeat;
    font-family:DOS,'Courier New',Courier,monospace;
    background-color:var(--pg-color);
    margin:0 auto;
    overflow-x:hidden;
    padding-left:10px;
    padding-right:10px;
    font-size:.9375em;
    max-width:990px;
    color:var(--txt);
    margin-bottom:25px;
    margin-top:-315px
}
*{
    cursor:url(/dw/dwcursor.png),auto!important
}
#page{
    position:relative;
    z-index:1;
    filter:drop-shadow(.7px .7px 0 var(--txt)) drop-shadow(-.7px .7px 0 var(--txt)) drop-shadow(.7px -.7px 0 var(--txt)) drop-shadow(-.7px -.7px 0 var(--txt)) drop-shadow(3px 4px 0 #716e9267)
}
h2,h3,h4{
    font-family:'DOS','Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;
    filter:drop-shadow(.5px .5px 0 var(--header-txt-stroke)) drop-shadow(-.5px .5px 0 var(--header-txt-stroke)) drop-shadow(.5px -.5px 0 var(--header-txt-stroke)) drop-shadow(-.5px -.5px 0 var(--header-txt-stroke))
}
h2{
    font-size:1.65em;
    display:inline-block;
    margin:1px 7px -2px 0
}
h3{
    font-size:1.5em;
    margin:-1px 7px 0 0;
    display:inline-block
}
.cf>div{
    display:inline-block;
    padding-left:3px;
    padding-right:3px;
    padding-bottom:1px;
    vertical-align:middle
}
summary{
    display:block;
    position:sticky;
    top:-10px;
    padding-top:10px;
    padding-left:25px;
    margin-left:-9px;
    background-color:var(--bg-color)
}
details summary::-webkit-details-marker{
    display:none
}
summary::before{
    content:"✕";
    position:absolute;
    top:14px;
    left:10px;
    color:var(--txt);
    transform:rotate(45deg);
    transform-origin:center;
    transition:0.2s transform ease
}
details[open]>summary:before{
    transform:rotate(0);
    transition:0.45s transform ease
}
details summary{
    z-index:10
}
#currentTable th{
    background-color:var(--crnt-tble)
}
#currentTable{
    width:100%;
    margin-top:8px;
    overflow-x:hidden
}
a:link{
    color:var(--link);
    font-weight:bolder
}
a:visited{
    color:var(--link-vst)
}
a:hover:not(#playerbox a){
    text-decoration:none;
    font-style:italic;
    background:var(--link-hvr)
}
mark{
    background:0 0;
    color:currentColor;
    font-family:'DW','Courier New',Courier,monospace;
    font-size:140%;
    margin-right:-3px;
    text-decoration-line:underline;
    text-decoration-style:dashed
}
#smallnote{
    font-family:DOS,'Courier New',Courier,monospace;
    text-decoration:none;
    font-size:.9375em;
    margin-left:-6px
}
span:not(#songTitle){
    background:0 0;
    color:currentColor;
    font-family:'DOS','Courier New',Courier,monospace;
    font-size:125%;
    margin-right:-3px;
    text-decoration-line:underline;
    text-decoration-style:dashed
}
#music-box{
    width:100%
}
#currentTable th{
    background-color:var(--crnt-tble)
}
#currentTable{
    width:100%;
    margin-top:8px;
    overflow-x:hidden
}
#namegif{
    z-index:3;
    position:relative;
    bottom:16.5%;
    max-width:60%;
    left:1.5%;
    margin-bottom:-55px;
    filter:drop-shadow(3px 3px var(--intro-shdw))
}
.player{
    width:max-content;
    height:30px;
    color:var(--txt);
    margin:auto;
    position:relative;
    left:50px;
    padding:3px
}
.player a:hover{
    text-decoration:none;
    background:#0000
}
#playerbox{
    width:calc(45% - 10px)
}
#titlez{
    width:calc(55% - 10px)
}
.flex{
    display:flex;
    flex-wrap:wrap;
    margin-top:18px
}
aside{
    padding:0
}
.aside,.bside{
    padding:0 10px 10px 10px;
    display:inline-block;
    margin-top:5px;
    overflow-y:hidden;
    position:relative;
    box-sizing:border-box;
    overflow-x:hidden;
    border:solid .7px;
    overflow-y:scroll;
    border-radius:2px;
    background-color:var(--bg-color)
}
.aside{
    width:calc(100% - 2.5px);
    order:2;
    border:solid .7px;
    position:relative;
    float:left;
    max-height:285px;
    margin-top:5px;
    margin-right:5px
}
#header{
    width:100%;
    border-radius:100px 0 0 0;
    margin-top:30px;
    background-color:#5e4e8c;
    height:200px;
    background-image:var(--header-img);
    background-size:100%;
    background-repeat:no-repeat;
    background-position-y:center;
    border-bottom:4px #3131312d inset
}
#header-txt{
    font-family:'DW';
    position:relative;
    top:86px;
    float:right;
    margin-right:4px;
    color:#626262;
    filter:drop-shadow(.5px .5px 0 var(--header-txt-stroke)) drop-shadow(-.5px .5px 0 var(--header-txt-stroke)) drop-shadow(.5px -.5px 0 var(--header-txt-stroke)) drop-shadow(-.5px -.5px 0 var(--header-txt-stroke));
    font-size:5.375em;
    mix-blend-mode:overlay
}
#theme{
    position:relative;
    display:inline-block;
    left:4px;
    color:var(--light);
    top:175px
}
#theme-toggle{
    font-family:DOS;
    color:var(--txt);
    background-color:var(--bg-color);
    height:20px;
    margin-top:5px;
    font-size:1.02em;
    text-align:center;
    max-width:96px
}
.linkz{
    max-width:100%;
    font-size:1.2em;
    background-color:var(--bg-color);
    height:4px;
    padding:10px;
    line-height:4px;
    padding-left:5px;
    margin-top:5px
}
#quizresults{
    max-width:100%
}
.bside{
    order:3;
    width:calc(100% - 2.5px);
    margin:5px 0 8px 0;
    height:fit-content
}
#section-title-int{
    background-color:var(--bg-color);
    width:fit-content;
    font-family:'DW';
    font-size:1.36em;
    position:relative;
    height:fit-content;
    margin-top:3px;
    padding:3px 15px 0 5px;
    line-height:25px;
    border-radius:0 100px 0 0;
    filter:drop-shadow(.5px .5px 0 var(--txt)) drop-shadow(-.5px .5px 0 var(--txt)) drop-shadow(.5px -.5px 0 var(--txt)) drop-shadow(-.5px -.5px 0 var(--txt))
}
#left,main{
    position:relative;
    box-sizing:border-box
}
#left-int,#main-int{
    background-color:var(--bg-color);
    padding:5px
}
#main-int{
    border-radius:0 0 100px 0
}
main{
    order:1;
    width:calc(72% - 4.5px)
}
#left{
    margin-right:9px;
    width:calc(28% - 4.5px);
    order:1;
    z-index:2;
    position:relative;
    top:13px
}
#section-title{
    background-color:var(--bg-color);
    width:fit-content;
    font-family:'DW';
    font-size:1.36em;
    position:relative;
    padding-left:5px;
    height:17px;
    width:20%;
    line-height:25px;
    padding-right:15px;
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)
}
#credit-note{
    position:fixed;
    color:var(--bg-color);
    font-size:.9em;
    letter-spacing: 8%;
    z-index:20;
    right:4px;
    bottom:1px;
    filter:drop-shadow(.5px .5px 0 var(--txt)) drop-shadow(-.5px .5px 0 var(--txt)) drop-shadow(.5px -.5px 0 var(--txt)) drop-shadow(-.5px -.5px 0 var(--txt))
}
#collection-box{
    margin-top:3px;
    margin-bottom:5px
}
a:hover{
    text-decoration:none;
    color:var(--link-hv);
    background:var(--link-hover)
}
a:link{
    text-decoration:underline dashed;
    color:var(--link);
    font-weight:bolder
}
a:visited{
    color:var(--link-vst)
}
#collection-box .zoomin:hover{
    transition:transform .2s;
    transform:scale(1.2)
}
.aside a:hover{
    filter:drop-shadow(1px 1px 0 #8ecabb) drop-shadow(-1px 1px 0 #8ecabb) drop-shadow(1px -1px 0 #8ecabb) drop-shadow(-1px -1px 0 #8ecabb);
    background-color:transparent
}
#intro{
    padding:7px;
    border:solid .7px;
    font-size:1.125em;
    max-width:100%;
    margin:0
}
#buttons{
    text-align:center;
    max-width:100%;
    margin-top:5px
}
#profileList{
    margin-top:-25px;
    margin-left:10px;
    width:78%
}
#scrobble-songname{
    animation:martwo 7s 0s linear normal infinite
}
@keyframes martwo{
    0%{
        right:-1rem;
        transform:translate(100%,0%)
    }
    100%{
        right:calc(100% + 1rem);
        transform:translate(0%,0%)
    }
}
.freako{
    width:100%;
    height:18px;
    padding-top:4px;
    margin-bottom:10px;
    background-color:var(--intro-bg)
}
.freakoinner{
    border:none;
    width:100%;
    height:18px;
    float:left;
    overflow:hidden
}
.marquee{
    display:flex;
    flex-flow:row nowrap;
    white-space:nowrap;
    justify-content:flex-end
}
.marqueecont{
    animation:marquee 15s 0s linear normal infinite;
    position:relative;
    color:var(--light);
    padding-left:5px
}
.marqueecont:hover{
    animation-play-state:paused
}
@keyframes marquee{
    0%{
        right:-1rem;
        transform:translate(100%,0%)
    }
    100%{
        right:calc(100% + 1rem);
        transform:translate(0%,0%)
    }
}
#profilePixel{
    height:17px;
    margin:0;
    margin-right:6px
}
#pride-box{
    width:100%
}
#aceStripe{
    width:100%;
    opacity:0;
    height:100%;
    mask-clip:content-box;
    background:linear-gradient(90deg,black 0%,black 25%,grey 25%,grey 50%,white 50%,white 75%,purple 75%,purple 100%)
}
#aceStripe:hover{
    opacity:1
}
#transbutton{
    display:none;
    font-family:DOS,'Times New Roman',Times,serif;
    margin-top:-4px;
    margin-bottom:6px;
    padding:4px;
    background-color:var(--txt);
    border:none;
    color:#fff;
    text-align:center;
    text-decoration:none;
    font-size:1.2em;
    cursor:pointer
}
#transyou{
    height:50%;
    position:absolute;
    right:-17px;
    top:2px;
    z-index:2;
    transition:1s ease
}
@keyframes fadeInOpacity{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
#avatar{
    margin-top:10px;
    border:solid 1px;
    margin-bottom:10px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:100%
}
#poster{
    position:relative
}
#angel{
    margin-bottom:-100%;
    padding-top:0!important;
    position:relative;
    top:-419px;
    left:409px;
    height:50%;
    width:15.5%;
    rotate:3.5deg
}
#back-bttn{
    padding:0!important;
    position:fixed;
    top:29px;
    left:40px;
    height:auto;
    width:8.5%;
    z-index:10
}
a #back-bttn:hover{
    filter:drop-shadow(1px 1px 3 #05fcbe) drop-shadow(-1px 1px 3 #8ecabb) drop-shadow(1px -1px 3 #8ecabb) drop-shadow(-1px -1px 3 #8ecabb)
}
footer{
    background-color:var(--bg-color);
    height:4px;
    max-width:calc(96% - 5px);
    padding:15px;
    line-height:4px;
    margin-top:5px;
    border:solid .7px;
    text-align:center
}
.box{
    border:2px solid var(--box-brder);
    overflow-y:scroll;
    padding:10px
}
@media only screen and (max-width:900px){
    #flex{
        flex-wrap:wrap
    }
    aside{
        width:100%
    }
    body{
        overflow-x:hidden;
        margin-top:-8px
    }
    #left,main{
        width:calc(100%)
    }
    main{
        order:1;
        margin-top:30px
    }
    #main-int,#header{
        border-radius:0
    }
    #poster,#angel{
        display:none
    }
    #header-txt{
        top:-22%;
        font-size:4.5em;
        mix-blend-mode:hard-light
    }
    .player{
        padding-right:5px
    }
    #titlez{
        width:calc(45% - 15px)
    }
    #credit-note{
        float:right
    }
    #playerbox{
        width:calc(55% - 15px);
        margin-left:-27px
    }
    .aside,.bside{
        max-width:100%;
        margin-right:0
    }
    #transbutton{
        display:inline
    }
    #transyou{
        opacity:1;
        height:130px;
        transition:opacity 1s ease
    }
    #transyou.fade{
        opacity:0
    }
    .aside{
        width:100%
    }
    #profileList{
        margin-top:-18px
    }
    #left{
        order:1;
        margin:0
    }
    #namegif{
        max-width:50%
    }
    #back-bttn{
        z-index:7;
        left:5px;
        float:left!important;
        width:22%
    }
}