body{
    scrollbar-width:thin;
    /* background-color: rgb(0, 0, 0);
    filter: invert();
    backdrop-filter: invert(); */
}
div {
    scrollbar-width:thin;
}
hr {
    width: 90%;
    border-color: rgba(0, 2, 51, 0.251);
    filter: blur(0.5px);
}

[id^="container"] {
    border-color: black;
    border-width: 2px;
    border-style: dashed;
    padding: 5px;
    margin: 0%;
    float: left;
}
[id^="container"] .item{
    cursor: pointer;
}

/* CONTAINERS FOR LISTS OF ITEMS */
/* CONTAINERS FOR LISTS OF ITEMS */
/* CONTAINERS FOR LISTS OF ITEMS */
/* CONTAINERS FOR LISTS OF ITEMS */

#container-music {
    color: rgb(0, 0, 0);
    background-image: linear-gradient(290deg ,rgb(255, 153, 0) 0%, rgb(0, 126, 27) 35%, rgba(157, 168, 7, 0) 100%); 
    position: absolute;
    
    border-style: hidden;
    box-shadow: 
        0px 0px 10px rgb(0, 107, 32),
        20px 20px 100px rgba(107, 100, 0, 0.438);
    width: 300px;
    /* box-shadow: ; */
    height: 450px;
    overflow-y: scroll;
    scrollbar-width:thin;

    transform: rotate(3deg);
    left: 20px;

}
    #container-music .item {
        background-image: linear-gradient(90deg, rgba(208, 255, 0, 0.122) 0%, rgba(182, 0, 152, 0.5) 80%, rgba(143, 143, 0, 0) 100%);
        margin-bottom: 2px;
    }
    #container-music .year {
        height: max-content;
        font-family: 'Courier New', Courier, monospace;
        font-size: small;
    }
    #container-music .title {
        height: max-content;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: small;
    }
    #container-music .tags {
        height: max-content;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: small;
        float: right;
    }

/* css for contraption stuff */
#container-contraption {
    color: rgb(0, 0, 0);
    background-image: repeating-linear-gradient(40deg ,rgb(255, 68, 0), rgb(237, 203, 125) 0%, rgba(187, 195, 85, 0.614) 30%, rgba(157, 168, 7, 0) 30%); 
    width: 260px;
    height: 250px;

    border-style:hidden;
    box-shadow: 
        0px 0px 20px rgb(0, 7, 100),
        0px 0px 500px rgb(77, 0, 100);
    
    position:absolute;
    transform: rotate(15deg);
    overflow-y: scroll;
    overflow-x: visible;
    scrollbar-width:thin;

    left:485px;
    top: 150px;
    
}
    #container-contraption .item {
        background-image: linear-gradient(90deg, rgba(208, 255, 0, 0.122) 0%, rgba(182, 0, 152, 0.5) 80%, rgb(85, 0, 141) 100%);   
        margin-bottom: 2px;
        height: 1lh;
        overflow:hidden;
    }
    #container-contraption .year {
        height: max-content;
        font-family: 'Courier New', Courier, monospace;
        font-size: small;
    }
    #container-contraption .title {
        height: max-content;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: small;
        width: 500px;
        overflow: hidden;
        
    }
    #container-contraption .tags {
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: small;
        float: right;
        text-align: right;
        color: aliceblue;
        /* width: 100px; */
        
    }

#container-taglist {
    z-index: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: small;
    background-image: repeating-linear-gradient(-10deg, rgba(255, 0, 0, 0.432) 0%, rgba(30, 255, 0, 0.432) 40%, rgba(255, 102, 0, 0.774) 90%); 
    
    width: 95px;
    height: 150px;

    border-style:hidden;
    box-shadow: 
        0px 0px 30px rgb(0, 91, 107),
        20px 20px 100px rgb(255, 30, 0),
        20px 20px 400px 100px rgba(255, 174, 0, 0.397);
    
    position: absolute;
    left: 360px;
    transform: rotate(-20deg);
    
    overflow: scroll;
    scrollbar-width:thin;

    
}
    #container-taglist label {
        position: absolute;
        width: 100%;
        background-clip: text;
        color: rgb(0, 0, 0);
    }
    #container-taglist input {
        /* position: absolute; */
        /* width: 1%; */
        backdrop-filter: hue-rotate(180deg);
        margin-left: -5px;
    }

#container-externallinks {
    position: absolute;
    left: 800px;
    top: 40px;
    transform: rotate(-6deg);

    height: 200px;
    width: 120px;

    box-shadow: 
        inset 0px 0px 100px  rgba(191, 194, 0, 0.212),
        -900px 200px 100px 10px rgba(255, 182, 140, 0.534),
        0px 0px 1000px 50px rgb(0, 82, 102);
}

#container-other {
    position: absolute;
    left: 380px;
    top: 630px;
    transform: rotate(2deg);

    height: 200px;
    width: 170px;

    /* box-shadow: 
        inset 0px 0px 100px  rgba(191, 194, 0, 0.212),
        -900px 200px 100px 10px rgb(255, 182, 140),
        0px 0px 1000px 50px rgb(0, 82, 102); */
}

#container-video {
    position: absolute;
    left: 80px;
    top: 600px;
    transform: rotate(-7deg);

    box-shadow: 
        0px 0px 30px rgba(0, 91, 107, 0.61),
        20px -20px 100px rgba(0, 255, 213, 0.788),
        inset 20px -20px 100px rgba(0, 255, 128, 0.63),
        -20px -20px 400px 100px rgba(111, 0, 255, 0.397);

    height: 260px;
    width: 250px;
}

/* DROPDOWN STYLING */
/* DROPDOWN STYLING */
/* DROPDOWN STYLING */
/* DROPDOWN STYLING */

.dropdown {
    position: absolute;
}    

.info {
    border-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(180deg, rgba(250, 118, 18, 0.27) 0%, rgba(82, 53, 22, 0.385) 10%, rgba(250, 103, 18, 0.297) 20%);
    box-shadow: 0px 0px 30px rgb(179, 161, 0);

    filter: opacity(0.9);
    border-width: 2px;
    border-style: solid;

    min-width: 250px;
    width: 30%;
    max-width: 500px;

    backdrop-filter: blur(7px) hue-rotate(180deg);

    
} 
    .info .container {
        border-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.163);
        border-width: 0px;
        border-style: solid;
        width: 100%;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    }
    .info .indent {
        padding-left: 20px;
    }
    .info a {
        color: rgb(0, 39, 236);
    }
    .info a:visited {
        color: rgb(48, 59, 0);
    }


.tracklist {
    border-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(110deg, rgba(250, 18, 157, 0.27) 0%, rgba(239, 7, 123, 0.385) 10%, rgba(250, 18, 157, 0.27) 20%);
    box-shadow: 0px 0px 30px rgba(179, 0, 255, 0.527);
    
    backdrop-filter: blur(3px) url(#offset);

    position: absolute;
    
} 
    .tracklist .container {
        border-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.163);
        border-width: 0px;
        border-style: solid;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
        
        /* filter: blur(0.25px); */
        
    }
    .tracklist .indent {
        padding-left: 20px;
        
    }


/* OUTPUT STUFF */
/* OUTPUT STUFF */
/* OUTPUT STUFF */
/* OUTPUT STUFF */

#metadata {

    width: 500px;
    height: 150px;
    
    padding: 0px;
    margin: 0px;

    border-color: rgb(0, 0, 0);
    border-width: 1px;
    border-style: solid;
    box-shadow: 20px 20px 200px 4px rgb(42, 137, 245);

    background-color: rgba(0, 0, 0, 0.237);

    top: 430px;
    left: 370px;
    transform: rotate(-3deg);

    position: absolute;
    overflow-y: scroll;
    /* overflow-x: ; */
    /* white-space: nowrap; */
}
    #metadata #display {
        width: 100%;
        height: 100%;

        /* overflow-x:clip; */
    }
    #metadata .indent {
        padding-left: 20px;
    }
    #metadata button {
        cursor: pointer;
    }

    #metadata iframe {
        /* min-width: 400px; */
        width: 100%;
        height: 500px;
        background-color: white;
    }

#description {
    width: 300px;
    height: 260px;
    
    padding: 0px;
    margin: 0px;

    border-color: rgb(0, 0, 0);
    border-width: 1px;
    border-style: solid;

    background-color: rgba(0, 0, 0, 0.237);

    box-shadow: 20px 20px 200px 40px rgb(245, 191, 42);

    top: 586px;
    left: 630px;
    transform: rotate(-3deg);

    position: absolute;
    overflow-y: scroll;

}

/* OTHER BULLSHIT */

.testbox {
    backdrop-filter:  url(#offset);
    filter: opacity(0.5);
    position: absolute;
    /* transform:  rotate(10deg); */
    pointer-events: none;
}

#mousecoords {
    position: absolute;
    backdrop-filter: blur(1px);
    left: 360px;
    top: 270px;
    width: 100px;
    overflow-x: clip;
    background-color: rgba(127, 255, 212, 0.021);
    z-index: 10000;
    transform: rotate(10deg);
}

.dripMode{
    position: absolute;
    left: 290px;
    top: 500px;
    transform: rotate(-80deg);
}
.turboMode{
    position: absolute;
    left: 730px;
    top: 400px;
    transform: rotate(-3deg);
}
.crazyMode{
    position: absolute;
    left: 570px;
    top: 855px;
    transform: rotate(30deg);
}

.the88x31s {
    position: absolute;
    left: 780px;
    top:300px;
}
.the88x31s img {
    animation-name: buttonPulse;
    animation-duration: 0.1s;
   
    animation-iteration-count: infinite;   
} 
@keyframes buttonPulse {
    0% {width: 88px}
    50% {width: 88.4px}
    100% {width: 88px}
}
.larger {
    font-size: larger;
}