:root {
    --accent:hsl(115, 100%, 50%);
}

body {
    margin:0;
    padding:0;
    background-color:black;
    overflow:hidden;
    color:white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
    background-color:var(--accent);
    color:black;
    text-align:center;
    position:absolute;
    width:100vw;
}

.window .header button {
    width:20px;
    height:20px;
    clear:none;
    float:left;
    border-top-left-radius:4px;
    background-color:black;
    margin:0;
    text-align:center;
    border:none;
    outline:none;
    color:var(--accent);
}

#bartog, input {
    background-color:black;
    border:1px solid var(--accent);
    color:var(--accent);
    outline:none;
}

.dragbar {
    width:calc(100% - 20px);
    background-color:var(--accent);
    height:20px;
    clear:none;
    float:right;
    border:none;
    margin:0;
    outline:none;
}

#splash {
    display:flex;
    align-items:center;
    justify-content: center;
    height:100vh;
}

#splash > div {
    width:400px;
    text-align:center;
}

h1 {
    font-size:50px;
}

.glow, .window {
    border:1px solid white;
    border-radius:8px;
    box-shadow:0 0 8px 3px var(--accent);
    margin:none;
    padding:none;
    background-color:black;
}

@keyframes load {
    0%, 12.5% {
        margin-left:0px;
        width:0px;
    }
    37.5% {
        margin-left:75px;
        width:150px;
    }
    62.5% {
        margin-left:225px;
        width:75px;
    }
    87.5%, 100% {
        margin-left:300px;
        width:0px;
    }
}

#loadcont {
    background-color:#444;
    border-radius:10px;
    height:20px;
    width:300px;
    margin-left:50px;
    padding:none;
}

#loadbar {
    background-color:var(--accent);
    border-radius:10px;
    height:20px;
    animation:load infinite 2s linear;
}

#bg {
    display:grid;
    grid-template-columns:repeat(12, auto);
    position:fixed;
    width:100vw;
    height:100vh;
    z-index:-1;
}

#bg div {
    background-color:black;
    margin:2px;
    height:8.333vw;
}

@keyframes subbg {
    from {
        top: -200vw;
    }
    to {
        top:100vw;
    }
}

#subbg {
    animation:subbg 5s linear infinite;
    position:absolute;
    z-index: -2;
    width:100vw;
    height:200vw;
    background-image:linear-gradient(-15deg, black, var(--accent), black);
}



#main > * {
    position:absolute;
}

#bar {
    width:fit-content;
    height:fit-content;
    bottom:10px;
    transform:translate(-50%, 0%);
    left:50vw;
    display:grid;
    grid-template-columns:repeat(6, auto);
    padding:5px;
}

#bar div:nth-child(n + 2) {
    border-left:1px solid var(--accent);
}

#bar span {
    display:none;
    transform:translate(-50%, -50%);
    left:50%;
    top:-20px;
    background-color:var(--accent);
    color:black;
    border-radius:5px;
    padding:4px;
}

#bar div {
    padding:10px;
}

#bar div:hover span {
    position:absolute;
    display:block;
}

#bar button {
    border:none;
    outline:none;
    background:none;
    cursor:pointer;
    height:40px;
    width:40px;
    cursor:pointer;
    z-index:999;
    position:relative;
}

#bar svg {
    width:100%;
    height:100%;
}

.window {
    width:600px;
    height:400px;
    resize:both;
    position:absolute;
    top:20vh;
    left:10vw;
    overflow:auto;
}

.window .header {
    height:20px;
    background-color:black;
    border:1px solid white;
    color:var(--accent);
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    padding:0;
    border:none;
    border-bottom:1px solid var(--accent);
}

#edit button, #edit textarea {
    color:white;
    border:1px solid var(--accent);
    background-color:black;
    resize:none;
    margin-left:5%;
}

textarea {
    width:90%;
    height:300px;
    resize:none;
}

#open button {
    border:1px solid var(--accent);
    outline:none;
    background-color:black;
    color:var(--accent);
}

#open button, #open li {
    cursor:pointer;
}

#open li:nth-child(n + 2) {
    border-top:1px solid var(--accent);
}

#field {
    width:100%;
    height:50px;
}

#field > * {
    position:absolute;
    clear:none;
    height:50px;
}

#player {
    border-radius:12px;
    width:5%;
    background-color:var(--accent);
}

#goal {
    border-radius:12px;
    width:20%;
    border:2px solid var(--accent);
    left:30%;
}