/* GENERAL */
.nav {
    position: relative;
    padding-top: 0px;
}
.nav hr {
    height: 1px;
    margin-bottom: 0px;
    margin-top: 5px;
}
.main {
    position: relative;
}
hr {
    width: 90%;
    border-color: rgba(0, 2, 51, 0.251);
    /* filter: blur(0.5px); */
}
body {
    overflow-x: auto;
}

#player {
    padding: 4px;
    visibility: hidden;
    position:absolute;
    /* height: 30px; */
    overflow-x: scroll;
    overflow-y: scroll;
}

/* CONTAINERS */
[id^="container"] {
    border-color: black;
    border-width: 2px;
    border-style: dashed;
    padding: 5px;
    margin: 0%;

    position: absolute;
    background-color: rgba(0, 0, 0, 0.05);
    /* -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); */
    overflow-y: scroll;
    scrollbar-width:thin;
}
#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%);  */
    
    border-style: hidden;
    box-shadow: 
        0px 0px 10px rgb(146, 201, 163),
        20px 20px 100px rgba(107, 100, 0, 0.438);
    background-image: linear-gradient(
        290deg ,
        rgb(255, 204, 127) 0%,
        rgba(2, 219, 49, 0.449) 50%, 
        rgba(225, 127, 255, 0.363) 75%,
        rgba(243, 255, 81, 0) 100%); 

    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width:thin;

    z-index: 1;

    /* transform: rotate(3deg); */
}

#container-contraption {
    color: rgb(0, 0, 0);
    background-image: repeating-linear-gradient(
        40deg ,
        rgb(255, 68, 0), 
        rgb(237, 203, 125) 0%, 
        rgba(188, 195, 85, 0.584) 30%, 
        rgba(157, 168, 7, 0) 30%); 


    border-style:hidden;
    box-shadow: 
        0px 0px 20px rgba(0, 7, 100, 0.258),
        0px 0px 500px rgba(77, 0, 100, 0.233);

    /* transform: rotate(15deg); */
    overflow-y: scroll;
    overflow-x: hidden;
}
#container-video {
    overflow-x: hidden;
    border-style: hidden;
    box-shadow: 
        0px 0px 20px rgba(0, 7, 100, 0.258),
        inset 0px 40px 70px 30px rgba(160, 207, 31, 0.66);
    background-image: repeating-linear-gradient(
        -10deg ,
        rgba(255, 0, 170, 0.401) 0%, 
        rgb(237, 203, 125) 10%, 
        rgba(188, 195, 85, 0.584) 30%, 
        rgba(255, 0, 170, 0.401) 40%); 
}
#container-other {
    overflow-x: hidden;
    border-style:hidden;
    

    box-shadow: 
        0px 0px 30px rgba(0, 91, 107, 0.61),
        20px -20px 100px rgba(94, 255, 0, 0.333),
        inset -100px 40px 100px rgba(146, 139, 9, 0.407),
        -20px -20px 400px 100px rgba(111, 0, 255, 0.16);

    background-image: repeating-linear-gradient(
        100deg ,
        rgba(1, 255, 230, 0.401) 0%, 
        rgba(76, 0, 217, 0.168) 2%, 
        rgba(255, 221, 0, 0.119) 3%, 
        rgba(255, 0, 170, 0.116) 10%); 

    
}
#container-buttons {
    overflow-x: hidden;
    border-style: hidden;
    
    background-color: rgba(0, 0, 0, 0);
}



#container-info {
    font-size: small;
    transform: translateX(-7px);
    background-color: rgba(240, 248, 255, 0.312);

    background-image: repeating-linear-gradient(
        3deg ,
        rgba(255, 136, 1, 0.082) 0%, 
        rgba(217, 0, 51, 0.053) 20%, 
        rgba(0, 76, 255, 0.058) 40%, 
        rgba(255, 136, 1, 0.082) 60%); 
    
}
#container-info button {
    font-size: smaller;
    padding: 1px;
    margin-left: 0px;
}



/* INFO */
#info-title{
    font-weight: bold;
}
#contributor-links {
    margin-left: 6px;
    padding-left: 4px;
    border-left-style: dotted;
    border-color: rgba(0, 0, 0, 0.305);
}
#info-description{
    margin-left: 6px;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
    /* width: 95%; */

    border-left-style: dotted;
    border-color: rgba(0, 0, 0, 0.305);
}

#info-contents-list {
    margin-left: 6px;
    padding-left: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
    /* width: 95%; */

    border-left-style: dotted;
    border-color: rgba(0, 0, 0, 0.305);   
}

/* ENTRIES */
.entry{
    /* width: px; */
    /* position: relative; */
    cursor: pointer;
}
.entry .year {
    height: max-content;
    font-family: 'Courier New', Courier, monospace;
    font-size: small;
}
/* .entry .title {

    z-index: 1;
} */
.entry .tags {
    float: right;
    right: 0px;
    position: absolute;
    height: max-content;
    font-family:Arial, Helvetica, sans-serif;
    font-size: small;
    z-index: 3;
}
.entry .links {
    position: absolute;
    left: 5px;
    visibility: hidden;
}
.entry .expert-mode {
    position: absolute;
    left: 5px;
    visibility: hidden;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: small;
    box-shadow: 0px 0px 5px inset rgba(119, 133, 255, 0.589);
}
.entry.selected .expert-mode:hover {
    background-color: rgba(0, 0, 0, 0.253);
}
.entry.selected {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.589);
}
.entry.selected .expert-mode {
    position: relative;
    visibility: visible;
    left: 5px;
}
.entry.selected .links{
    position: relative;
    visibility: visible;
    left: 5px;
}


[class^="tag-"] {
    margin-left: 4px;
    background-image: repeating-linear-gradient(
        70deg, rgba(192, 74, 255, 0) 0%, 
        rgba(255, 242, 0, 0) 20%, 
        rgba(13, 203, 255, 0.551) 80%, 
        rgba(18, 115, 250, 0) 100%);
    /* -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px); */
    box-shadow: 0px 0px 30px rgba(255, 52, 133, 0);
    border-style:groove;
    position: relative;
    border-color: rgba(240, 248, 255, 0.368);

    pointer-events: none;
}

/* DROPDOWN */
.dropdown {
    position: absolute;
    width: 240px;
    height: fit-content;
    border-style: solid;
    visibility: hidden;
    font-size: smaller;
    
    border-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(
        180deg, rgba(89, 133, 255, 0) 0%, 
        rgba(255, 90, 25, 0.212) 10%, 
        rgba(89, 133, 255, 0) 20%); 
    box-shadow: 0px 0px 30px rgb(179, 161, 0);

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

    font-family: Arial, Helvetica, sans-serif;


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

    
}
.date-dropdown {
    position: absolute;
    width: fit-content;
    height: fit-content;
    border-style: hidden;
    -webkit-backdrop-filter: blur(7px) hue-rotate(90deg);
    backdrop-filter: blur(7px) hue-rotate(90deg);
    visibility: hidden;
}
.contents-dropdown {
    position: absolute;
    width: fit-content;
    height: fit-content;
    border-style: hidden;
    -webkit-backdrop-filter: blur(5px) hue-rotate(90deg);
    backdrop-filter: blur(5px) hue-rotate(90deg);
    visibility: hidden;
    z-index: 10;
}
#options-menu {
    z-index: 1001;

    left: 200px;
    top: 40px;
    width: fit-content;
    height: fit-content;

    position: absolute;
    
    border-style:ridge;
    border-color: rgb(255, 185, 246);
    border-width: 1px;
    border-radius: 10px;

    box-shadow: 
        0px 1px 15px rgba(0, 0, 0, 0.666),
        0px 1px 10px rgba(255, 0, 187, 0.67),
        0px 1px 5px rgba(72, 0, 255, 0.444),
        0px 1px 30px rgba(0, 255, 30, 0.421);

    -webkit-backdrop-filter: blur(7px) hue-rotate(90deg);
    backdrop-filter: blur(7px) hue-rotate(90deg);
    visibility: hidden;
}
#player-info {
    visibility: hidden;
}

#contact-menu {
    z-index: 1001;

    left: 70px;
    top: 40px;
    width: fit-content;
    height: fit-content;

    position: absolute;
    
    border-style:ridge;
    border-color: rgb(255, 226, 185);
    border-width: 1px;
    border-radius: 10px;

    padding: 4px;

    box-shadow: 
        0px 1px 15px rgba(0, 0, 0, 0.666),
        0px 1px 10px rgba(246, 255, 0, 0.67),
        0px 1px 5px rgba(72, 0, 255, 0.444),
        0px 1px 30px rgba(0, 255, 30, 0.421);

    -webkit-backdrop-filter: blur(7px) hue-rotate(90deg);
    backdrop-filter: blur(7px) hue-rotate(90deg);
    visibility: hidden; 
}

/* OTHER BULLSHIT */
.indent {
    padding-left: 20px;
}
#spotlight {
    /* position: absolute; */
    top:300px;
    height: 70px;


    /* background-color: rgba(121, 121, 121, 0.256); */
    /* background-image: ''; */
    background-image: url(content/bare-branches/media/bare_branches_cover.png);
    background-size: contain;

    border-color: black;
    border-width: 2px;
    border-style: solid;

    box-shadow: 
        0px 0px 20px rgba(211, 190, 0, 0.625),
        0px 0px 50px rgba(0, 134, 211, 0.625),
        inset 0px 0px 20px pink,
        inset 0px 0px 50px pink;

    overflow-y: scroll;

    align-items: center;
}
#spotlight a {
    background-color: rgba(214, 142, 160, 0.496);
}
#spotlight span {
    background-color: rgba(255, 255, 255, 0.788);
    
}

#mousecoords {
    position:fixed;  
    z-index: 10000;      /* high quality code! */
    background-color: azure;
    float: right;
    right: 0px;
}
#spacer {
    position: absolute;
}

@media (min-width: 1300px) {
    #mousecoords {
        visibility: visible;
    }

    #spotlight {
        width: 1250px;
    }

    #container-info {
        width: 1250px;
        height: 140px;
        left: 5px;
    }

    

    #container-music {
        width: 300px;
        height: 440px;
        left: 5px;
        top: 155px;
    }

    #container-contraption {
        width: 300px;
        height: 350px;
        left: 330px;
        top: 155px;
    }

    #container-video {
        width: 300px;
        height: 365px;
        left: 645px;
        top: 170px;
    }

    #container-other {
        width: 275px;
        height: 260px;
        left: 967px;
        top: 160px;
    }

    #container-buttons {
        width: 100px;
        height: 110px;
        left: 980px;
        top: 440px;
    }

    /* #spotlight {
        top: 600px
    } */

}
@media (max-width: 1300px) {
    #mousecoords {
        visibility: visible;
    }

    #spotlight {
       width: 960px;
    }

    #container-info {
        width: 960px;
        height: 140px;
        left: 5px;
    }

    #container-music {
        width: 300px;
        height: 440px;
        left: 5px;
        top: 155px;
    }

    #container-contraption {
        width: 300px;
        height: 350px;
        left: 330px;
        top: 155px;
    }

    #container-video {
        width: 300px;
        height: 230px;
        left: 650px;
        top: 155px;
    }

    #container-other {
        width: 250px;
        height: 230px;
        left: 650px;
        top: 410px;
    }

    #container-buttons {
        width: 100px;
        height: 110px;
        left: 520px;
        top: 515px;
    }

}
@media (max-width: 1000px) {
    #mousecoords {
        visibility: visible;
    }

    #spotlight {
        width: 600px;
    }

    #container-info {
        width: 600px;
        height: 140px;
        left: 5px;
    }

    #container-music {
        width: 300px;
        height: 440px;
        left: 5px;
        top: 155px;
    }

    #container-contraption {
        width: 300px;
        height: 280px;
        left: 330px;
        top: 155px;
    }

    #container-video {
        width: 300px;
        height: 300px;
        left: 320px;
        top: 460px;
    }

    #container-other {
        width: 250px;
        height: 230px;
        left: 30px;
        top: 620px;
    }

    #container-buttons {
        width: 100px;
        height: 80px;
        left: 310px;
        top: 770px;
    }

}
@media (max-width: 650px) {
    #spacer {
        position: relative;
    }

    #options-menu {
        position: fixed;
    }
    #contact-menu {
        position: fixed;
    }

    .nav {
        position: fixed;
        z-index: 1000;
        /* -webkit-backdrop-filter: blur(10px); */
        /* backdrop-filter: blur(10px); */
        /* background-color: rgba(240, 248, 255, 0.312); */
        width: 100%;
    }
    .nav hr {
        visibility: hidden;
    }

    #mousecoords {
        visibility: hidden;
    }

    #spotlight {
        margin-right: 10px;
        overflow-x: scroll;
        overflow-y: scroll;
        scrollbar-width: none;
    }

    #container-info {

        width: 100%;
        height: 135px;
        /* padding: 0px; */
        padding-right: -100px;
        /* position: fixed; */
        z-index: 1000;
        /* top: 110px; */
        background-color: rgba(240, 248, 255, 0.312);

        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    #container-music {
        width: 100%;
        height: 440px;
        padding: 0px;
        top: 225px;
        left: 5px;
    }

    #container-contraption {
        width: 100%;
        height: 280px;
        padding: 0px;
        top: 690px;
        left: 5px;
    }

    #container-video {
        width: 100%;
        height: 300px;
        padding: 0px;
        top: 995px;
        left: 5px;
    }

    #container-other {
        width: 100%;
        height: 230px;
        top: 1310px;
        padding: 0px;
        left: 5px;
    }

    #container-buttons {
        width: 100%;
        /* height: 80px; */
        /* left: 310px; */
        top: 1545px;
        left: 5px;
    }
}

#link_containment_zone {
    width:100px;
    top: 1000px;
    float: right;
    z-index: 100000;
}
#link_containment_zone img {
    width: 100px;
}