* {
    margin: 0;
    border: none;
    outline: none;
    font-family:'Space Mono', 'Inconsolata', monospace, sans-serif;
    z-index: 1;
}

.bg-main {
    background-color: #272727;
}

body {
    background-color: #1e1e1e;
    z-index: -1;
    overflow-y: hidden;
}

.nav {
    background-color: #1e1e1e;
}

.editor {
    height: 99vh;
    width: auto;
}

.tabs {
    height: 2em;
    width: 50%;
    border: 1px solid #272727;
    margin-left: auto;
    margin-right: 10em;
}

.tab {
    border: 1px solid #363636;
    transition-duration: .22s;
    cursor: pointer;
}

.tab:hover {
    background-color: #2e2e2e;
    border: 1px solid #626262;
}

.text--small {
    font-size: 1rem;
    border-right: 1px solid #363636;
    white-space: nowrap;
}

iframe {
    background-color: white;
    margin: 0;
}

.run-pg {
    background-color: #4b7bff;
}

.run-pg:hover {
    background-color: #3564e7;
}

.font-weight-700 {
    font-weight: 700;
}

.font-weight-400 {
    font-weight: 400;
}


a {
    text-decoration: none;
    transition: color .2s;
}

a:hover {
    text-decoration: underline;
    color: #ff0051b4;
}

.text-highlight {
    color: #ff004f;
}

.font-size-small {
    font-size: .85vw;
}

.text-less {
    color: rgb(214, 214, 214);
}

.text-ni {
    color: rgb(85, 85, 85);
}

.cursor-pointer {
    cursor: pointer;
}

.hover-underline:hover {
    text-decoration: underline;
}

.github-link {
    top: 97vh;
    left: 15px;
}

.close {
    top: 0;
    right: 0;
    font-size: 1.4rem;
}

.close svg {
    transition: color .14s;
}

.close svg:hover {
    color: #ffffff;
}