:root {

    --kwa: #AE9C78;
    --kwa-light: #B9A887;
    --kwa-dark: #564C39;
    --kwa-dark-alt: #463e2e;
    --kwa-dark-sec: #3e3523;
    --text: #BABABA;
    --key: #F5DEB3;
    --key-alt: #FBCC74;
    --value: #BF6464;
    --value-text: #37DF39;
    --value-link: #0CFCEA;
    --value-link-alt: #85FFF6;
    --number: #7AD3E7;
    --comments: #D1BA87;
    --onair: #A90808;

}
::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: var(--kwa);
}

::-webkit-scrollbar-thumb {
    background: var(--kwa-dark-alt);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kwa-dark-sec);
}
::-webkit-scrollbar-corner {
/*
background-image: url(resources/corner.png);
background-repeat: no-repeat;
*/
background-color: var(--kwa-dark-alt);
}
html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--kwa-dark);
    background-color: var(--kwa-light);
    height: 100%;
    overflow: hidden;
}

.container-fluid {
    height: 100%;
    overflow: hidden;
}

.wrap {
    margin: 1em;
    width: calc(100vw - 2em);
    height: calc(100vh - 2em);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.onair{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: solid var(--onair) 1em;
}

.fulled {
    position: relative;
    margin: 1em;
    width: calc(100% - 2em);
    height: -webkit-fill-available;
    height: available;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.centered {
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.middled {
    display: contents;
}

.marged {
    display: flex;
    height: 100%;
    margin-left: 0;
    margin-right: 0;
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.section {
    
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.light {
    background-color: var(--kwa);
    overflow: hidden;
}

@media (min-width: 992px) {
    .fulled{
        height: calc(100% - 2em);
    }
}



.dark {
    background-color: var(--kwa-dark);
    height:100%;
    box-shadow: inset .5em .5em #00000033;
}


*, :after, :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}



pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
    
}

code, pre {
    font-family: monospace,monospace;
    font-size: 1em;
}

.code {
    font-family: Fira Mono,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
    text-align: left;
    display: grid;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: break-word;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    counter-reset: line;
    justify-content: left;
    padding-right: 1em;
}

.code {
    color: var(--text);
}
@media (max-width: 700px) {
    code, pre {
        font-size: .7em;
    }
    .section::after {
        content: '';
    }
    .section {
        /* width: auto;
        min-width: fit-content; */
        height: auto;
        min-height: auto;
    }
    .dark {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        overflow-y: auto;
        height: calc(100% - 12.2rem);
    }
    body{
        overflow-x: hidden;
        overflow-y: none;
    }
    .code {
        display: flow-root;
    }
}
.code-block {
    margin: 0;
    padding-right: 1em;
    height: 100%
}

.code-line {
    
    counter-increment: line;
    /* display: inline-table; */
    display: flex;
    flex-wrap: wrap;
    padding-left: 3ch;
    position: relative ;
    left:2ch;
    margin-right: auto;
    position:relative;
}

.code-line::before {
    content: counter(line) "\a●\a●\a●\a●\a●\a●\a●\a●\a●\a●";
    
    display: inline-block;
    width: 3ch;
    /* text-align: right; */
    margin-right: 0.5em;
    opacity: .5;
    position: absolute;
    width: 3ch;
    top: 0;
    bottom: 0;
    left: -1ch;
    overflow: hidden;
    text-align: right;
}
.code-line:after {
    opacity: .25;
    content: "¬";
}
.code-space {
    opacity: .25;
    display: table-cell;
    vertical-align: top;
    position: relative;
    white-space: pre;
}
.code-space::before {
    content: "··········";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

.code-line:after, .code-line:before, .code-space:before {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.code-line:hover {
    filter: brightness(120%);
}
.lvl1 {
    width: 1.1em;
}
.lvl2 {
    width: 2.2em;
}
.lvl3 {
    width: 3.3em;
}
.lvl4 {
    width: 4.4em;
}
.code-key{
    color: var(--key);
}
.code-key-alt{
    color: var(--key-alt);
}
.code-value{
    color: var(--value);
}
.code-value-text{
    color: var(--value-text);
}
.code-value-link, .code-value-mail{
    color: var(--value-link);
}
.code-value-link:hover, .code-value-mail:hover{
    color: var(--value-link-alt);
}
.code-number{
    color: var(--number);
}
.code-comments{
    opacity: 0.70;
    color: var(--comments);
}



#loop {
    /* position: absolute;
    top: 0; */
}
.enter-the-cv{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: var(--kwa);
    display:flex;
    align-items:center;
    justify-content:center;
}
.bt-enter{
    display:flex;
    flex-direction:column;
    font-family: "Fira Mono", Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(76, 37, 10);
    border:unset;
    background:unset;
    margin:0;
    padding:0;
    
}
.hide{
    display:none;
}