@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

@font-face {
    font-family: "PetMe64";
    src: url("font/PetMe64.ttf");
}

:root {
    --bg-color: rgb(15, 26, 13);
    --border-color: rgb(51, 165, 51);
    --fg-color: rgb(72, 214, 72);

    --font-size: 1.8vmin;
}

* {
    padding: 0;
    margin: 0;
}

*::selection {
    background-color: var(--fg-color);
    color: var(--bg-color);
}

body {
    color: var(--fg-color);
    font-family: PetMe64, monospace;
    width: 100vw;
    height: 100vh;
    background-color: black;
    overflow: hidden;
}

main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 120vh;
    max-width: 80vw;
    aspect-ratio: 8 / 5;

    font-size: var(--font-size);
    background-color: var(--bg-color);
    /*border-radius: 50pt;*/
    box-shadow: 0 0 80pt var(--bg-color), 0 0 20pt var(--bg-color), 0 0 5pt var(--bg-color);
}

h1 {
    font-size: var(--font-size);
    font-weight: normal;
    text-align: center;
    margin: 2ex;
    margin-bottom: 3ex;
}

#botStatistics {
    text-align: center;
}


#login {
    position: absolute;
    top: 15ex;
    left: 3em;
    width: max-content;
}

#login label {
    font-size: var(--font-size);
    display: block;
}

#login input{
    background: none;
    border: none;
    border-bottom: solid;
    border-width: 2pt;
    border-color: var(--fg-color);
    outline: none;

    color: var(--fg-color);
    font-size: var(--font-size);
    font-family: PetMe64, monospace;
}

#login .key {
    width: 16em;   
    display: inline;

    padding: 0.5ex;
    margin-top: 3ex;    
}


.button{
    display: inline;
    padding: 0.7ex;
    border: solid !important;
    cursor: pointer;
    width: 3em;
}

#back{
    display: none;
    position: absolute;
    top: 2em;
    left: 2em;
    cursor: pointer;
}

#list{
    margin: 3em;
    margin-bottom: 1em;
    width: calc(100% - 6em);
    height: 50%;
    max-height: 50%;
    overflow-y: auto;
}

#list li{
    position: relative;
    display: block;
    padding: 0.5ex;
    cursor: pointer;
}

#list li:last-child{
    margin-bottom: 2em;
}

#list li:hover{
    background-color: var(--fg-color);
    color: var(--bg-color);
}

#list .song{
    cursor: default !important;
}

#sDropdown{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5000;
    color: var(--fg-color);
    font-size: 2.5vmin;
}

#list li:hover #sDropdown{
    display: block;
}

.songbutton{
    width: 1em;
    height: 1em;
    padding: 0.5ex;
    background-color: var(--bg-color);
}


#loginError{
    color: red;
    margin-top: 2ex;
}

#detailsPanel{
    display: none;
    width: calc(100% - 6em - 0.5ex);
    height: 20%;
    margin: 3em;
    margin-top: 1.5em;
    margin-bottom: 0;
    padding-left: 0.5ex;
}

#detailsPanel h2{
    font-size: var(--font-size);
    font-weight: normal;
    margin-bottom: 1ex;
    height: 1em;
}

#details{
    overflow-y: auto;
    line-height: 1.5em;    
    word-wrap: break-word;
    height: calc(100% - 2em);
}


#editorInfo{
    position: absolute;
    width: max-content;
    bottom: 1em;
    right: 1em;
}

#bg {
    position: relative;
    height: 100%;
    aspect-ratio: 8 / 5;
    max-width: 100vw;
    margin: auto;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--border-color);
    box-shadow: inset 0 0 15vmin black, inset 0 0 15vmin black, inset 0 0 15vmin black;
}

#bg:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    pointer-events: none;
    background:
        linear-gradient(to top, black, transparent 10vmin),
        linear-gradient(to right, black, transparent 10vmin),
        linear-gradient(to bottom, black, transparent 10vmin),
        linear-gradient(to left, black, transparent 10vmin);
    width: 100%;
    height: 100%;
}

#bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 120%;
    min-height: 120%;
    opacity: 30%;
}


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 1;
    background-size: 100% 10px, 4px 100%;
    pointer-events: none;
    opacity: 0.5;
}

#dirt{
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100vw;
    min-height: 100vh;
    opacity: 0.5;
    pointer-events: none;
}


@keyframes blinker {
    50% {
        opacity: 0;
    }
}


::-webkit-scrollbar {
    width: 1vh;
    height: 1vh;
}
/* Track */
::-webkit-scrollbar-track {
    background-color: var(--bg-color);
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--fg-color);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--bg-color);
}