html {
    overflow: hidden;
}

body {
    background-color: #EEE8AA;
}

#text {
    width: calc(100vw - 30px);
    height: 100vh;

    padding: 0.3rem;
    resize: none;

    position: absolute;
    top: 0px;
    left: 30px;

    box-sizing: border-box;
    background-color: #EEE8AA;

    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

    border: none;
    outline: none;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

#text::-webkit-scrollbar { 
    display: none;
}

#sidebar {
    width: 30px;
    height: 100vh;

    position: absolute;
    top: 0px;
    left: 0px;

    box-sizing: border-box;
    background-color: #1C1C1C;

    border: none;
    outline: none;

    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s;
    -webkit-animation: fadein 0.5s;
    -o-animation: fadein 0.5s;
}

#contentbar {
    height: calc(100vh - 90px);
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#contentbar::-webkit-scrollbar { 
    display: none;
}

.tab {
    width: 30px;
    height: 30px;

    text-align: center;
    line-height: 30px;

    background-color: transparent;
    background-repeat: no-repeat;

    color: #F2F2F2;
    font-family: sans-serif;
    font-size: 1rem;

    padding: none;
    margin: none;
    border: none;
    outline: none;

    cursor: pointer;
    overflow: hidden;

    transition: 0.2s;

    animation: fadein 0.2s;
    -moz-animation: fadein 0.2s;
    -webkit-animation: fadein 0.2s;
    -o-animation: fadein 0.2s;
}

.still {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
}

@keyframes fadein {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    } to {
        opacity:  1;
    }
}

.tab:hover {
    background-color: #2C2C2C;
}

.tab:active {
    background-color: #3C3C3C;
}

.selected {
    background-color: #3C3C3C;
}

.plus {
    position: absolute;
    left: 0px;
    bottom: 60px;

    background-image: url("plus.svg");
    background-size: 20px;
    background-position: center;
    background-origin: content-box;
}

.trash {
    position: absolute;
    left: 0px;
    bottom: 30px;

    background-image: url("trash.svg");
    background-size: 20px;
    background-position: center;
    background-origin: content-box;
}

.download {
    position: absolute;
    left: 0px;
    bottom: 0px;

    background-image: url("download.svg");
    background-size: 20px;
    background-position: center;
    background-origin: content-box;
}

#blocker {
    display: table;
    
    width: 100vw;
    height: 100vh;

    padding: 0.3rem;
    resize: none;

    position: absolute;
    top: 0px;
    left: 0px;

    opacity: 0;
    pointer-events: none;

    box-sizing: border-box;
    background-color: #1C1C1C;

    border: none;
    outline: none;

    text-align: center;

    z-index: 1;
}

#error {
    display: table-cell;
    vertical-align: middle;
}

#big {
    color: #F2F2F2;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 4rem;
}

#small {
    color: #F2F2F2;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 2.5rem;
}