:root {
    --primary-color: #09B0D9;
    --body: #2D2D2C;
    --bg: #EEEEEE;
    --bg2: #5c5c5c;
    --medium-text: 12px;
}

.ai--center {align-items: center;}
.ai--fs {align-items: flex-start;}
.bg--white {background: #fff;}
.border--1 {border: solid 1px var(--body)}
.border--2 {border: solid 2px var(--body)}
.border-rad--1r {border-radius: 1rem;}
.border-rad--100p {border-radius: 100%;}
.dsp--0 {display: none !important;}
.dsp--flex {display: flex;}
.dsp--flex__down {display: flex;flex-direction: column;flex-shrink: 0;}
.dsp--flex__right {display: flex;flex-direction: row;}
.dsp--flex__wrap {display: flex;flex-wrap: wrap;}
.gap--5 {gap: 5px;}
.gap--20 {gap: 20px;}
.gap--3r {gap: 3rem;}
.ht--100p {height: 100%;}
.ht--100vh {height: 100vh;}
.ht--35 {height: 35px;}
.jc--center {justify-content: center;}
.jc--sb {justify-content: space-between;}
.left--0 {left: 0;}
.mg--0 {margin: 0px;}
.mg--1r-0 {margin: 1rem 0;}
.mg--3r-0 {margin: 3rem 0;}
.opacity--0 {opacity: 0;}
.overflow--s {overflow: scroll;}
.pd--0-0-0-4r {padding: 0 0 0 4rem;}
.pd--0-0-2r {padding: 0 0 2rem 0;}
.pd--0-4r {padding: 0 4rem;}
.pd--0-5 {padding: 0 5px;}
.pd--1r-0 {padding: 1rem 0;}
.pd--2r {padding: 2rem;}
.pd--2r-0, .pd--2r0 {padding: 2rem 0;}
.pd--2r-4r {padding: 2rem 4rem;}
.pd--5-10 {padding: 5px 10px;}
.pd--7r {padding: 7rem;}
.pd--42r {padding: 4.2rem}
.pos--a {position: absolute;}
.pos--f {position: fixed;}
.t-a--j{text-align: justify;}
.t-color--1 {color: var(--primary-color);}
.t-color--2 {color: var(--bg2);}
.t-dec--0 {text-decoration: none;}
.t-fs--1r {font-size: 1rem;}
.t-fs--2r {font-size: 2rem;}
.t-fs--7r {font-size: 7rem;}
.t-fs--12 {font-size: 12px;}
.t-fs--14 {font-size: 14px;}
.t-fs--18 {font-size: 18px;}
.t-fs--25r {font-size: 2.5rem;}
.t-fs--35r {font-size: 3.5rem;}
.t-fs--i {font-style: italic;}
.t-fw--700 {font-weight: 700;}
.t-lh--0 {line-height: 0;}
.t-lh--12r {line-height: 1.2rem;}
.t-lh--2r {line-height: 2rem;}
.t-ls--1 {letter-spacing: 1px;}
.t-trans--upper {text-transform: uppercase;}
.t-fw--200 {font-weight: 200;}
.t-fw--400 {font-weight: 400;}
.t-fw--600 {font-weight: 600;}
.top--0 {top: 0;}
.trans--5 {transition: 0.5s;}
.trans--8 {transition: 0.8s;}
.wd--100 {width: 100%;}
.wd--35 {width: 35px;}
.wd-max--100p {max-width: 100%;}
.wd-max--25vw {max-width: 25vw;}
.wd-max--600{max-width: 600px;}
.ws--nw {white-space: nowrap;}
.hov--pointer:hover {cursor: pointer;}
.m_dsp--1 {display: none;}

.project-element:hover span.project-number {
    color: var(--primary-color);
}

.project-element:hover h2 {
    color: var(--primary-color);
    border-image: linear-gradient(to right, #09B0D9 0%, #09B0D9 40%, transparent 40%) 1;
}

a {
    color: var(--body);
}

a:hover {
    cursor: pointer;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

a:focus-visible {
    outline-color:var(--primary-color);
}

a.close-modal{
    top:0!important;
    right:0!important;
    backdrop-filter: invert(1);
}

a#nav-button:hover i {
    opacity: 1;
}

a#nav-button i {
    opacity: 0;
    transition: 0.5s;
}

body {
    background-color: var(--bg);
    font-family: 'Be Vietnam Pro';
    font-size: var(--medium-text);
    background-image: url(/assets/img/nnnoise.svg);
}

body.filter-active span.hnivqx.active {
    color: var(--primary-color) !important;
}

body.filter-active span.hnivqx:not(.active) {
    text-decoration: line-through;
    touch-action: none;
    pointer-events: none;
}

body.in-CV div#profile-picture img {
    width: 200px;
    aspect-ratio: auto;
    border-radius: 100%;
}

body.in-CV .parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 3rem;
}

body.in-CV .div1 {
    grid-area: 1 / 1 / 2 / 2;
}

body.in-CV .div2 {
    grid-area: 1 / 4 / 2 / 5;
}

body.in-CV .div3 {
    grid-area: 2 / 1 / 3 / 2;
}

body.in-CV .div4 {
    grid-area: 2 / 2 / 3 / 3;
}

body.in-CV .div5 {
    grid-area: 2 / 3 / 3 / 4;
}

body.in-CV .div6 {
    grid-area: 2 / 4 / 3 / 5;
}

div.blocker{
    backdrop-filter: blur(2px);
}

div.condensed,
div.condensed p,
div.condensed ul,
div.condensed li {
    line-height: 1rem;
    margin: 0;
}

div.modal{
    border-radius:0px;
    padding:30px;
    letter-spacing:1px;
    max-width: 600px;
    box-shadow: none;
}

div.modal em{
    line-height: 1.55;
}

div.underlined {
    line-height: 2rem;
    border-bottom: 1px solid var(--body);
}

div#kontakt-header {
    border-bottom: solid 1px #2d2d2c;
    padding-bottom: 0.5rem;
}

div#kontakt-header img {
    width: 50px;
    border-radius: 100%;
}

div#menu p {
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    writing-mode: vertical-rl;
    margin: 0;
}

div#menu p span,
div#menu p a {
    margin-bottom: 1rem;
}

div#picker::before{
    content:"Filtr: ";
    color: var(--bg2);
    font-style: normal;
    font-weight: 700;
}

div#picker span {
    color: var(--bg2);
}

h1 {
    color: var(--body);
}

h1.decorated::before {
    content: " ";
    position: absolute;
    margin: -1rem 0;
    border-top: 3px solid var(--body);
    width: 4rem;
}

h1#main-title {
    font-size: min(12vw, 7rem);
    font-weight: 600;
}

h2 {
    color: var(--body);
}

h2.decorated2 {
    border-bottom: solid 1px;
    border-image: linear-gradient(to right, #2d2d2c 0%, #2d2d2c 40%, transparent 40%) 1;
    padding-bottom: 1.3rem;
    margin-bottom: 1.3rem;
}

h2.decorated::before {
    content: " ";
    position: absolute;
    margin: 2.5rem 0;
    border-bottom: 1px solid var(--body);
    width: 3rem;
}

h3 {
    color: var(--body);
}

i {
    font-size: var(--medium-text);
}

i.arrow-nav {
    opacity: 0.5;
    transition: 0.5s;
}

i.arrow-nav:hover {
    opacity: 1;
    cursor: pointer;
}

i.arrow-nav.disabled:hover{
    opacity: 0.5;
    cursor: default;
}

img#index-image-element {
    width: min(22vw, 300px);
}

li {
    color: var(--body);
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
    font-weight: 300;
    list-style-type: square;
    margin: 0;
}

li::marker {
    color: var(--bg2);
}

p {
    color: var(--body);
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
    font-weight: 300;
}

span {
    color: var(--body);
}

span:focus-visible {
    outline-color:var(--primary-color);
}

span.hnivqx:hover {
    cursor: pointer;
}

span#jmeno {
    cursor: crosshair;
}

span#jmeno:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

ul {
    padding-inline-start: 20px;
}

@media screen and (max-width: 999px) {
    .m_dsp--0 {display: none !important;}
    .m_dsp--1 {display: block;}
    .m_dsp--flex__down {flex-direction: column!important;}
    .m_jc--fs {justify-content: flex-start !important;}
    .m_pd--0{padding:0!important;}
    .m_pd--40-0{padding:40px 0!important;}
    .m_t-fs--25r{font-size: 2.5rem!important;}
    .m_t-lh--15r{line-height: 1.5rem!important;}
    .m_wd-max--u{max-width: unset!important;}
    .m_pd--0-0-0-40{padding: 0 0 0 40px!important;}


    body.in-CV div#profile-picture {
        display: none;
    }

    body.in-CV .parent {
        display: flex;
        flex-direction: column;
    }
}