:root{
    --red: #e4513e;
    --yellow: #f6c035;
    --green: #cddc39;
    --blue: #42a5f5;
    --cyan: #56adc2;
    --magenta: #db5160;
    --white: #f5f5f5;
    --black: #5d6f71;
    --text: #a1b0b8;
    --background: #252525;
}

.data {
    display: none;
}

.red {
    color: var(--red) !important;
}

.yellow {
    color: var(--yellow) !important;
}

.green {
    color: var(--green) !important;
}

.blue {
    color: var(--blue) !important;
}

.cyan {
    color: var(--cyan) !important;
}

.magenta {
    color: var(--magenta) !important;
}

.white {
    color: var(--white) !important;
}

.black {
    color: var(--black) !important;
}

.bg-red {
    background-color: var(--red) !important;
}

.bg-yellow {
    background-color: var(--yellow) !important;
}

.bg-green {
    background-color: var(--green) !important;
}

.bg-blue {
    background-color: var(--blue) !important;
}

.bg-cyan {
    background-color: var(--cyan) !important;
}

.bg-magenta {
    background-color: var(--magenta) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.bg-black {
    background-color: var(--black) !important;
}

.window {
    background-color: var(--background);
    font-family: 'terminal';
    font-size: medium;
    box-shadow: 0 0 0 0 rgba(0,0,0,.3), 0 23px 38px 0 rgba(0,0,0,.43), 0 25px 65px 0 rgba(0,0,0,.1);
    border-radius: 10px;
    max-width: 55vw;
    max-height: 80vh;
    margin: auto;
    margin-top: 10vh;
    padding-bottom: 10px;
    min-width: 850px;
    padding: 8px;
}

.titlebar {
    padding: 10px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.titlebar .buttons {
    display: inline-block;
    position: absolute;
}

.titlebar span {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
}

.titlebar .title-text {
    display: inline-block;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    color: var(--white);
}

.terminal {
    padding: 5px;
    height: calc( 80vh - 100px);
    display: block;
    overflow: hidden scroll;
    color: var(--white);
    white-space: break-spaces;
}

.terminal::-webkit-scrollbar {
    width: 8px;
}

.terminal::-webkit-scrollbar-track {
    background: #363738;     
    border-radius: 5px;
}

.terminal::-webkit-scrollbar-thumb {
    background-color: #fefefe;
    border-radius: 20px;
}

.prompt {
    margin: 15px 0px 10px 0px;
    z-index: 1;
    color: var(--white);
}

.prompt > span {
    padding: 0px;
}

.prompt > .cursor {
    background-color: rgba(255, 255, 255,1);
    animation: cursor 0.5s infinite;
    padding: 1px 5px;
    margin-left: 2px;
    display: inline-block;
}

.line {
    color: var(--white);
    padding: 2px;
}

.terminal a{
    color: inherit;
}

.dp {
    width: 18em;
    margin: 15px;
    float: left;
    margin-right: 30px;
}

.palette-block {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 4px 0px;
    padding: 0px;
}


.table {
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

h3 {
    margin-left: 10px;
}

.table td {
    vertical-align: top;
    padding: 10px 0px;
}

body {
    background: linear-gradient(45deg, var(--black), var(--red), var(--magenta), var(--blue), var(--cyan));
    background-size: 400% 400%;
    animation: bg-animation 30s ease-in-out infinite;
}

.loading {
    width: 400px;
    max-width: 85vw;
    top: 50%;
    left: 50%;
    position: absolute;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.5);
    overflow: hidden;
    transform: translate(-50%, 0px);
}
.loading:after {
    content: '';
    display: block;
    width: 0%;
    height: 4px;
    background: #fff;
    transition: width 1s;
    animation: load 5s linear;
    animation-iteration-count: 1;
}

.loading.p60:after {
    width: 60%;
}

.loading.p80:after {
    width: 80%;
}

.loading.p100:after {
    width: 100%;
}

.loading.done:after{
    animation: none;
}

/* Highlighting */
span[class^="code"] {
    line-height: 24px;
}

.code-strong {
    font-weight: bold;
}

.code-meta {
    color: var(--white);
}

.code-attr, .code-section {
    color: var(--blue);
}

.code-bullet {
    color: var(--white);
}

.code-string {
    color: var(--magenta);
}

.code-comment, .code-link {
    color: var(--green);
}

.code-number, .code-code {
    color: var(--yellow);
}

/* Animations */
@keyframes bg-animation {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes cursor {
    0% {
        background-color: rgba(255, 255, 255,1); 
    }

    50% {
        background-color: rgba(255, 255, 255,0);
    }

    100% {
        background-color: rgba(255, 255, 255,1);
    }
}

@keyframes load {
    0% {
        width: 0;
    }
    10% {
        width: 5%;
    }
    20% {
        width: 10%;
    }
    30% {
        width: 15%;
    }
    40% {
        width: 25%;
    }
    50% {
        width: 30%;
    }
    60% {
        width: 35%;
    }
    70% {
        width: 40%;
    }
    80% {
        width: 45%;
    }
    90% {
        width: 50%;
    }
}

@font-face {
    font-family: terminal;
    src: url(../fonts/UbuntuMono.ttf);
}
@font-face {
    font-family: terminal;
    src: url(../fonts/UbuntuMono-bold.ttf);
    font-weight: bold;
}