/*

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░▒▒▒▒░░░▒▒▒▒░░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒░▒▒▒▒▒▒░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒░░░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒░░░░░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░▒░░░░░░░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒░▒▒▒░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒░░░░░▓▓
▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒░░░░░░▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
_______▒__________▒▒▒▒▒▒▒▒▒▒▒▒▒▒
______▒_______________▒▒▒▒▒▒▒▒
_____▒________________▒▒▒▒▒▒▒▒
____▒___________▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
___▒
__▒______▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
_▒______▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓
▒▒▒▒___▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓
▒▒▒▒__▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓▒▓
▒▒▒__▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▒▒


    
     ▓▓▓▓▓▓                        ▓▓▓▓▓▓          ▓▓▓▓▓▓▓▓                       ▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓▓▓▓▓▓▓        ▓▓▓▓▓▓▓▓▓▓▓   ▓▓▓▓▓▓▓▓        ▓▓▓    ▓▓▓     ▓▓▓▓▓▓▓▓▓▓▓     ▓▓▓        ▓▓▓
    ▓▓     ▓▓▓      ▓▓            ▓▓     ▓▓▓     ▓▓        ▓▓    ▓▓             ▓▓            ▓▓
    ▓▓      ▓▓▓     ▓▓            ▓▓      ▓▓▓    ▓▓        ▓▓    ▓▓            ▓▓             ▓▓
    ▓▓       ▓▓▓    ▓▓            ▓▓       ▓▓▓   ▓▓              ▓▓            ▓▓
    ▓▓        ▓▓    ▓▓            ▓▓        ▓▓    ▓▓▓            ▓▓            ▓▓
    ▓▓        ▓▓    ▓▓▓▓▓▓▓▓▓     ▓▓        ▓▓      ▓▓▓          ▓▓▓▓▓▓▓▓▓     ▓▓
    ▓▓        ▓▓    ▓▓            ▓▓        ▓▓        ▓▓▓▓       ▓▓            ▓▓
    ▓▓        ▓▓    ▓▓            ▓▓        ▓▓           ▓▓▓     ▓▓            ▓▓
    ▓▓       ▓▓▓    ▓▓            ▓▓       ▓▓▓             ▓▓    ▓▓            ▓▓
    ▓▓      ▓▓▓     ▓▓            ▓▓      ▓▓▓    ▓▓        ▓▓    ▓▓            ▓▓             ▓▓
    ▓▓     ▓▓▓      ▓▓            ▓▓     ▓▓▓     ▓▓        ▓▓    ▓▓             ▓▓            ▓▓
    ▓▓▓▓▓▓▓▓        ▓▓▓▓▓▓▓▓▓▓▓   ▓▓▓▓▓▓▓▓        ▓▓▓    ▓▓▓     ▓▓▓▓▓▓▓▓▓▓▓     ▓▓▓        ▓▓▓
     ▓▓▓▓▓▓                        ▓▓▓▓▓▓          ▓▓▓▓▓▓▓▓                       ▓▓▓▓▓▓▓▓▓▓▓▓
 
 computer text art from: https://fsymbols.com/text-art/#all_cats
 dedsec art by me
*/



/* inspired by Wrench, DedSec, and Watch Dogs (specifically 2) theme/UI */


/* Fonts I wanna use: Purpose Normal, SRG Marker, Funeral, Sewer Rat, Another Danger */

/* animations */
@keyframes wiggle {
    0% {transform: rotate(5deg)}
    50% {transform: rotate(15deg)}
    100% {transform: rotate(5deg)}
}

@keyframes wiggle-opposite {
    0% {transform: rotate(5deg)}
    50% {transform: rotate(-10deg)}
    100% {transform: rotate(5deg)}
}

:root {
    /* Dedsec greyscale color palette */
    --black-olive: #3C3E3C;
    --jet: #2F302F;
    --eerie-black: #202120;
    --night: #111111;
    /* and black */

    --widget-background: var(--night);
    --widget-text: var(--black-olive);

}

body {
    background-color: black; background-image: url("/images/dedsec/dither_it_gradient.png"); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed;
    font-family: 'Sewer Rat'; font-size: 48px; color: var(--black-olive);
}

#container-content {
    display: flex; flex-direction: column; position: relative; min-height: 100%; padding-bottom: 2.5rem;
}

#DEDSEC-STICKER {
    position: absolute; top: 33px; left: 666px; transform: rotate(12deg); -webkit-text-stroke: white 15px; font-family: 'Sewer Rat';
    animation: wiggle-opposite; animation-direction: normal; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0,1,0,1);
}

#DEDSEC {
    position: absolute; top: 33px; left: 666px; transform: rotate(12deg); font-family: 'Sewer Rat';
    animation: wiggle-opposite; animation-direction: revert; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0,1,0,1);
}

#block {
    display: block; background-color: var(--jet); border: 10px solid var(--night); width: 600px; height: 200px;
    position: absolute; top: 200px; left: 215px;
}

#chain {
    display: block; position: absolute; top: -13px; left: -1px;
}

#skull {
    display: block; position: absolute; top: 150px; left: 150px; width: 150px; height: 150px; transform: rotate(15deg);
    animation: wiggle; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0,1,0,1);
}

#eyeball {
    display: block; position: absolute; top: 350px; left: 775px; aspect-ratio: auto; width: 125px; transform: rotate(15deg);
    animation: wiggle; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0,1,0,1);
}

#fucked {position: absolute; width: 250px; height: auto; top: 500px; left: 1150px; }

#reaper {
    display: block; position: absolute; top: 700px; left: 950px; aspect-ratio: auto; width: 200px;
}

#showcase {
    display: grid; border: solid black 5px; background: var(--night); position: absolute; top: 1000px; left: 200px; overflow: auto;
    width: 900px; height: 650px; padding: 15px;
    list-style-type: none;
}

#computer-buddies {
    display: inline; aspect-ratio: auto; width: 500px;
    border-left: dashed black 5px; border-top: dashed black 5px; border-right: dashed var(--jet) 5px; border-bottom: dashed var(--jet) 5px;
}

/* */

footer {
    position: absolute; left: 0; top: 2000px;
    min-height: 2.5rem; width: 100%;
    border: solid black 5px; padding: 2px; margin-top: auto;
    font-size: 16px; color: var(--jet); text-align: center;
}












/* extra */