main {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: rgba(16,16,16,0.8);
}

main > header {
    display: flex;
    flex-direction: row;
    position: relative;
    margin: 2vh;
    padding-bottom: 1.5vh;
    border-bottom: 2px solid #69f;
}

main > header #logo {
    display: inline-block;
    height: 6vh;
    margin-right: 5vh;
}

main > header #title {
    display: inline-block;
    font-size: 4vh;
    font-style: italic;
    font-weight: bold;
    line-height: 6vh;
    flex-grow: 1;
}


main > article {
    padding: 0 2vh 0 2vh;
    position: absolute;
    right: 0;
}

main > footer {
    position: absolute;
    left: 2vh;
    right: 2vh;
    bottom: 2vh;
    text-align: right;
    padding-top: 1.5vh;
    border-top: 2px solid #69f;
}

main > footer div {
    display: inline-block;
    margin-left: 4vh;
}

main > footer div::before{
    display: inline-block;
    border-radius: 50%;
    vertical-align: -0.5vh;
    width: 3vh;
    height: 3vh;
    content: "";
    margin-right: 8px;
}
main > footer .back_key::before {
    content: "\1F519";
    margin-right: 8px;
}
main > footer .red_key::before {
    background-color: red;
}
main > footer .green_key::before {
    background-color: green;
}
main > footer .yellow_key::before {
    background-color: yellow;
}
main > footer .blue_key::before {
    background-color: blue;
}

main > #contents {
    margin: 2vh;
}

.hsplit {
    display: flex;
    box-sizing: border-box;
    padding: 2vh;
    width: 100vw;
}

.toggleConsoleBox{
    display: none !important;
}

#toggleConsoleButton{
    display: inline-block;
    box-sizing: border-box;
    padding-left: 2vh;
    padding-right: 2vh;
    margin-left:1vh;
    border: 2px solid #ccc;
    color: white;
    background: #444;
    font-size: 2.5vh;
    line-height: 6vh;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 5px;
}

#consoleBox {
    position: absolute;
    max-width: 60vw;
    box-sizing: border-box;
    background: rgba(0,0,0,0.6);
    border: 2px solid white;
    padding: 2vh;
    font-size: 2vh;
    color: white;
    flex-grow: 1;
    max-height: 68vh;
    margin-left: 4vh;
    right: 6vh;
    width: 100%;
    height: 100%;
    bottom: 10vh;
}

#consoleBox .title {
    position: absolute;
    left: 50%;
    top: -1.2vh;
    background: black;
    padding: 0 1vh 0 1vh;
    transform: translateX(-50%);
}

#consoleBox #console {
    overflow-y: scroll;
    overflow-wrap: break-word;
    margin: 0;
    scrollbar-width: 0;
    padding: 0;
    white-space: pre-wrap;
    max-height: 50vh;
}

#consoleBox #console div {
    padding: 0;
    margin: 0;
}

#consoleBox #console .Debug {
    display: none;
    color: #69c;
}

#consoleBox #console.log .Debug {
    display: block !important;
}

#consoleBox #console .Info {
    color: #fff;
}

#consoleBox #console .Warning {
    color: #ff4;
}

#consoleBox #console .Error {
    color: #f44;
}


#consoleBox #console::-webkit-scrollbar {
    width: 1vh;
}

#consoleBox #console::-webkit-scrollbar-thumb {
    background: white;
    border: none;
}

#playerBox {
    border: 2px solid white;
    background: #181818;
    padding: 1vh;
    min-width: 28vw;
    width: 26vw;
    height: 26vh;
    margin-left: 4vh;
    margin-right: 4vh;
    position: absolute;
    bottom: 10vh;
}


#playerBox video {
    width: 100%;
    height: 100%;
}