@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    --bg-color: #1e1e1e;
    --tag-color: #569cd6;
    --class-color: #8cdcfe;
    --arrows-color: #808073;
    --meta-color: #ce9178;
    --comments-color: #6a9955;
    --leters-color: #d4d4d4;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Inconsolata', monospace;
    color: var(--leters-color);
}

body {
    background-color: var(--bg-color);
    color: var(--leters-color);
    line-height: 20px;
}
.main__container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 30fr;
}
.main__container-numbers {
    padding: 0 .6em;
    text-align: end;
}

.arrows-color {
    color: var(--arrows-color);
}
.tag-color {
    color: var(--tag-color);
}
.class-color {
    color: var(--class-color);
}
.orange-color {
    color: var(--meta-color); 
}
.comment-color {
    color: var(--comments-color);
}
.customtab {
    padding-left: 3.5em;
}
.onetab {
    padding-left: 2em;
}
.twotab {
    padding-left: 4em;
}
.threetab {
    padding-left: 6em;
}
.linktoport {
    text-decoration: none;
    color: white;
    border: 1px solid rgba(255, 255, 255 ,.4);
    padding: .1em .6em;
    border-radius: 5px;
    font-size: 1.7rem;
}