html,html[data-theme=light]{
    --page-img:url(images/index-bg.jpg);
    --bg-color:#e6f4f5ad;
    --pg-color:#d0d6d4;
    --txt:#474747;
    --pagebrdr:#0000;
    --link:#3642e9;
    --link-vst:#432ad3;
    --link-hover:#8ecdf7;
    --backlight:#18e4f3;
    --shadow:#5c5c5c;
    --box-brder:#128088 --header-txt-stroke: #f5f5f5;
    --header-grad:linear-gradient(#2398a0 .5%,var(--bg-color) 35%, var(--bg-color) 60%,#0000 100%);
    --intro-bg:#b3b9f3;
    --intro-shdw:#383131dc;
    --widget-bg:url(images/fabricc.JPG);
    --box-brder:#128088;
    --col-hov:#0fbfccd8;
    --crnt-tble:#a09f9fbb;
    --divider:url(images/divider.png)
}
html[data-theme=dark]{
    --page-img:url(images/index-bgDM.jpg);
    --bg-color:#374041ad;
    --pg-color:#001818;
    --txt:#cfcfcf;
    --pagebrdr:#0000;
    --link:#82e9fc;
    --link-vst:#76e4f7;
    --link-hover:#304e7c;
    --backlight:#18e4f3;
    --shadow:#5c5c5c;
    --box-brder:#128088;
    --header-grad:linear-gradient(#2398a0 .5%,var(--bg-color) 35%, var(--bg-color) 60%,#0000 100%);
    --header-txt-stroke:#f5f5f5;
    --intro-bg:#b3b9f3;
    --intro-shdw:#383131dc;
    --widget-bg:url(images/fabricc.JPG);
    --box-brder:#128088;
    --col-hov:#0fbfccd8;
    --crnt-tble:#a09f9fbb;
    --divider:url(images/divider-darkmode.png)
}
@media (prefers-color-scheme:dark){
    html,html[data-theme=dark]{
        --page-img:url(images/index-bgDM.jpg);
        --bg-color:#374041ad;
        --pg-color:#001818;
        --txt:#cfcfcf;
        --pagebrdr:#0000;
        --link:#82e9fc;
        --link-vst:#76e4f7;
        --link-hover:#304e7c;
        --backlight:#18e4f3;
        --shadow:#5c5c5c;
        --box-brder:#128088;
        --header-grad:linear-gradient(#2398a0 .5%,var(--bg-color) 35%, var(--bg-color) 60%,#0000 100%);
        --header-txt-stroke:#f5f5f5;
        --intro-bg:#b3b9f3;
        --intro-shdw:#383131dc;
        --widget-bg:url(images/fabricc.JPG);
        --box-brder:#128088;
        --col-hov:#0fbfccd8;
        --crnt-tble:#a09f9fbb;
        --divider:url(images/divider-darkmode.png)
    }
    html[data-theme=light]{
        --page-img:url(images/index-bg.jpg);
        --bg-color:#e6f4f5ad;
        --pg-color:#d0d6d4;
        --txt:#474747;
        --pagebrdr:#0000;
        --link:#3642e9;
        --link-vst:#432ad3;
        --link-hover:#8ecdf7;
        --backlight:#18e4f3;
        --shadow:#5c5c5c;
        --box-brder:#128088 --header-txt-stroke: #f5f5f5;
        --header-grad:linear-gradient(#2398a0 .5%,var(--bg-color) 35%, var(--bg-color) 60%,#0000 100%);
        --intro-bg:#b3b9f3;
        --intro-shdw:#383131dc;
        --widget-bg:url(images/fabricc.JPG);
        --box-brder:#128088;
        --col-hov:#0fbfccd8;
        --crnt-tble:#a09f9fbb;
        --divider:url(images/divider.png)
    }
}
@font-face{
    font-family:DOS;
    src:url(/fonts/Px437_DOS-V_re_ANK24.ttf) format("truetype")
}
@font-face{
    font-family:Segmented;
    src:url(/fonts/DS-DIGIT.TTF) format("truetype")
}
::selection{
    background:#6770aa;
    text-shadow:#01000f 0 0 2px;
    color:#f8f8f8
}
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:.95em;
    max-width:1100px;
    color:var(--txt);
    margin-bottom:25px
}
#page{
    filter:drop-shadow(.7px .7px 5px var(--pagebrdr)) drop-shadow(-.7px .7px 5px var(--pagebrdr)) drop-shadow(.7px -.7px 5px var(--pagebrdr)) drop-shadow(-.7px -.7px 5px var(--pagebrdr)) drop-shadow(3px 4px 5px var(--pagebrdr));
    height:fit-content
}
h1,h2,h3,h4,h5{
    font-family:DOS,'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif
}
h1{
    font-family:DOS;
    margin:1px;
    font-size:2.1875em;
    margin-bottom:-15px;
    text-align:left;
    display:inline-block;
    padding-left:10px;
    transition:1s ease-in-out
}
h4{
    font-family:DOS;
    margin-bottom:-38px;
    padding-top:7px;
    font-size:1.5em;
    padding-left:10px;
    margin-top:0;
    height:54px;
    position:sticky;
    top:0;
    background:linear-gradient(#2398a09f 30%,#0000 80%)
}
h3{
    padding-left:10px
}
h2{
    font-size:1.3em;
    margin-bottom:-8px;
    margin-top:2px
}
h5{
    font-size:1.2em;
    margin:7px 0 15px 2px
}
.cf>div{
    display:inline-block;
    padding-left:3px;
    padding-right:3px;
    padding-bottom:1px;
    vertical-align:middle
}
#computer{
    z-index:2;
    position:relative;
    left:260px;
    top:-66px;
    margin:-44px;
    padding:0;
    max-width:11.4%
}
mark{
    background:0 0;
    color:currentColor;
    font-weight:700;
    text-decoration-line:underline;
    text-decoration-style:dashed
}
.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
}
.flex{
    display:flex;
    flex-wrap:wrap
}
aside{
    padding:0
}
#header{
    width:100%;
    border-radius:0;
    margin-top:40px;
    background:var(--header-grad);
    height:20px;
    padding:20px 0 50px 0;
    margin-bottom:6px
}
#navbar{
    position:relative;
    display:inline-block;
    height:6px;
    margin-top:5px;
    padding-left:18px;
    font-size:1.0625em;
    text-align:right;
    max-width:500px;
    justify-content:space-evenly
}
#theme{
    position:relative;
    display:inline-block;
    left:387px
}
#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
}
#divider{
    height:7px;
    max-width:100%;
    margin-top:-2px;
    border-bottom:25px solid transparent;
    padding:0;
    border-image:var(--divider) 140 round
}
#left,main{
    position:relative;
    box-sizing:border-box
}
main{
    order:1;
    width:calc(66% - 9px);
    box-shadow:0 0 3px 3px var(--bg-color);
    background-color:var(--bg-color);
    padding:5px
}
.freako{
    width:calc(10% - 4.5px);
    order:3;
    max-height:403px;
    margin-left:9px;
    overflow:hidden;
    position:relative;
    mask:linear-gradient(transparent 0,#000 5%,#000 50%,#000 95%,transparent 100%)
}
.freakoinner{
    border:none;
    width:100px;
    height:403px;
    background-color:transparent;
    color:#fff;
    overflow:hidden
}
.marquee{
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-end
}
.marqueecont{
    animation:marquee 15s 0s linear normal infinite;
    position:relative;
    margin-top:356px;
    margin-bottom:7px
}
.marqueecont:hover{
    animation-play-state:paused
}
.marqueecont a:hover{
    filter:drop-shadow(1px 1px 0 var(--link-hover)) drop-shadow(-1px 1px 0 var(--link-hover)) drop-shadow(1px -1px 0 var(--link-hover)) drop-shadow(-1px -1px 0 var(--link-hover));
    background:0 0
}
@keyframes marquee{
    0%{
        bottom:-1rem
    }
    100%{
        bottom:calc(100% + 1rem)
    }
}
#left{
    margin-right:9px;
    width:calc(24% - 4.5px);
    order:1;
    z-index:2;
    position:relative
}
.widget{
    background-color:#2a2933;
    text-align:center;
    display:block;
    width:85%;
    background-image:var(--widget-bg);
    background-size:cover;
    box-shadow:0 0 3px 3px #2a2933;
    font-family:Segmented;
    font-size:1.5em;
    margin:5px auto 10px auto;
    padding:0 10px;
    color:var(--backlight)
}
#clock-pixel{
    -webkit-filter:sepia(1) hue-rotate(-13deg) brightness(1.1);
    filter:sepia(4) saturate(500%) hue-rotate(130deg) drop-shadow(0 0 3px var(--backlight));
    border-radius:35%;
    margin-left:2px
}
.widget #clock,.widget #fecha{
    display:inline-block;
    filter:drop-shadow(0 0 3px var(--backlight))
}
#clocksyou{
    display:flex;
    box-shadow:0 0 3px 3px var(--bg-color);
    border-radius:0;
    margin-bottom:10px;
    padding:5px 0 5px 0;
    background-color:var(--bg-color)
}
#sidepanel{
    box-shadow:0 0 3px 3px var(--bg-color);
    border-radius:0;
    display:block;
    padding:5px;
    background-color:var(--bg-color)
}
#pseudo-footer{
    width:100%;
    margin-bottom:2px
}
#ringclique{
    padding-top:0;
    text-align:left;
    display:inline-block;
    font-size:1.104em
}
#stamp-info{
    display:inline-block;
    text-align:right;
    margin-left:8%
}
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)
}
#buttons{
    text-align:center;
    max-width:100%;
    margin-top:5px
}
@keyframes martwo{
    0%{
        right:-1rem
    }
    100%{
        right:calc(100% + 1rem)
    }
}
@keyframes fadeInOpacity{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
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:not(#left.box){
    overflow-y:scroll;
    border:2px solid var(--box-brder);
    overflow-y:scroll
}
.box p{
    padding:0 10px
}
@media only screen and (max-width:900px){
    #flex{
        flex-wrap:wrap
    }
    #left,.freako,main{
        width:calc(100% - 10px);
        margin:auto
    }
    .freako{
        max-height:73px;
        mask:linear-gradient(90deg,transparent 0,#000 5%,#000 50%,#000 95%,transparent 100%);
        padding:10px 0 10px 0
    }
    .freakoinner{
        width:100%;
        max-height:73px;
        padding-top:24px
    }
    .marquee,.marqueecont{
        height:73px;
        display:flex;
        animation:marq 20s linear infinite;
        margin:0
    }
    @keyframes marq{
        0%{
            left:1rem;
            transform:translate(100%,0)
        }
        100%{
            right:calc(100% + 1rem);
            transform:translate(0,0)
        }
    }
    #ringclique{
        margin:0;
        margin-top:16px;
        padding-top:5px
    }
    #clocksyou{
        order:2
    }
    #computer{
        z-index:2;
        position:relative;
        left:215px;
        top:91px;
        margin:0;
        padding:0;
        max-width:25.4%;
        margin-top:-133px
    }
    #theme{
        left:5px;
        bottom:90px
    }
    #left{
        order:0!important
    }
    main{
        order:3;
        margin-top:10px;
        margin-bottom:-23px
    }
    #sidepanel{
        order:4
    }
    main .box{
        width:calc(100% - 15px)
    }
    .widget{
        width:calc(94% - 15px)
    }
    #pseudo-footer{
        bottom:0
    }
    #stamp-info{
        float: right;
    }
    #navbar ul{
        flex-wrap:wrap
    }
    #navbar{
        margin-top:12px
    }
    #divider{
        margin-top:-1px;
        border-bottom:20px solid transparent
    }
    #header{
        margin-bottom:22px;
        order:1;
        background:linear-gradient(#2398a0 .5%,#e6f4f5ad 50%,#0000 100%)
    }
    aside{
        width:100%
    }
    body{
        overflow-x:hidden
    }
    #left,main{
        width:calc(100%)
    }
    .aside{
        max-width:100%;
        margin-right:0
    }
    .aside{
        width:100%
    }
    h1{
        color:#474747
    }
}