:root {
    --pj-font-family: 'Lato', sans-serif;
    --pj-column-width: 8.33%;
    --pj-main-background-color: #e0d2c6;
    --pj-main-card-background-color: #f1e7d9;
    --pj-shadow-color: #c9bcaf;
    --pj-color-white: #ffffff;
    --pj-color-black: #000000;
    --pj-color-blue: #0025ff;
    --pj-nav-link-inactive-color: #a0a3a3f6;
    --pj-dropdown-menu-inactive-color: #5f6060f6;
    --pj-tiny-font-size: 0.5em;
    --pj-script-font-size: 0.7em;
    --pj-footnote-font-size: 0.8em;
    --pj-small-font-size: 0.9em;
    --pj-normal-font-size: 1em;
    --pj-large-font-size: 1.2em;
    --pj-extra-large-font-size: 1.44em;
    --pj-huge-font-size: 2.488em;
    --pj-tiny-font-weight: 200;
    --pj-script-font-weight: 200;
    --pj-footnote-font-weight: 200;
    --pj-footnote-font-weight-bold: 700;
    --pj-small-font-weight: 400;
    --pj-normal-font-weight: 400;
    --pj-normal-font-weight-bold: 700;
    --pj-large-font-weight: 400;
    --pj-large-font-weight-bold: 700;
    --pj-extra-large-font-weight: 400;
    --pj-extra-large-font-weight-bold: 700;
    --pj-huge-font-weight: 700;

    --pj-main-card-width: 380px;
    --pj-main-card-width-mobile: 90%;
    --pj-header-height: calc(1em + 30px);
    --pj-margin-mobil: 5%;
}

* {
    box-sizing: border-box;
}

[class*="pj-col-"] {
    float: left;
    width: 100%;
    min-height: 1px;
}
.pj-row::after {
    content: "";
    clear: both;
    display: table;
}
h1 {
    display: block;
    font-family: var(--pj-font-family);
    font-size: var(--pj-extra-large-font-size);
    font-weight: var(--pj-extra-large-font-weight);
    text-align: center;
    padding-top: calc(var(--pj-header-height));
}
h1::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px'><rect width='10' height='10' style='fill:rgb(0,48,255' /></svg>");
    padding-right: 4px;
    vertical-align: baseline;
}
h1 ~ p {
    display: block;
    font-family: var(--pj-font-family);
    font-size: var(--pj-normal-font-size);
    font-weight: var(--pj-normal-font-weight);
    text-align: left;
    margin-left: var(--pj-margin-mobil);
    margin-right: var(--pj-margin-mobil);
}
a {
    color: var(--pj-color-black);
}
.pj-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 2px !important;
    height: var(--pj-header-height) !important;
    background-color: var(--pj-color-white) !important;
    position: fixed;
}
.pj-nav-name-and-profession {
    font-family:var(--pj-font-family);
    margin-top: auto;
    margin-bottom: auto;
}
.pj-nav-name-and-profession table tr {
    vertical-align: baseline;
}
.pj-nav-name {
    font-size:var(--pj-small-font-size);
    font-weight:var(--pj-small-font-weight);
    margin-right: 5px;
    margin-top: auto;
    margin-bottom: auto;
}
.pj-nav-name::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8px' height='8px'><rect width='8' height='8' style='fill:rgb(0,48,255' /></svg>");
    height: 8px;
    width: 8px;
    padding-right: 4px;
    vertical-align: baseline;
}
.pj-nav-profession {
    font-size:var(--pj-script-font-size);
    font-weight: var(--pj-script-font-weight);
    margin-top: auto;
    margin-bottom: auto;
    text-transform: uppercase;
}
.pj-dropdown-menu {
    font-family: var(--pj-font-family);
    font-weight: var(--pj-normal-font-weight);
    font-size: var(--pj-normal-font-size);
    margin-top: auto;
    margin-bottom: auto;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}
.pj-dropdown-menu-button {
    background-color: var(--pj-color-white);
    color: var(--pj-nav-link-inactive-color);
    margin-top: auto;
    margin-bottom: auto;
    font-size: var(--pj-normal-font-size);
    border: none;
    cursor: pointer;
}
.pj-dropdown-menu-content {
    display: none;
    position: fixed;
    top: var(--pj-header-height);
    left: 0px;
    width: 100%;
    justify-content: end;
    background-color: var(--pj-main-background-color);
    opacity: 95%;
    z-index: 1;
}
.pj-dropdown-menu-content-show {
    display: block;
}
.pj-dropdown-menu-content a {
    color: var(--pj-dropdown-menu-inactive-color);
    padding: 12px 16px;
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: var(--pj-large-font-size);
    font-weight: var(--pj-large-font-weight);
    font-family: var(--pj-font-family);
}
.pj-dropdown-menu-content-active {
    color: var(--pj-color-black) !important;
}
.pj-dropdown-menu-content-active a {
    color: var(--pj-color-black) !important;
}
.pj-dropdown-menu:hover .pj-dropdown-menu-button {
    color: var(--pj-color-black);
}
.pj-nav-wrapper {
    display: none;
}
.pj-nav-link-wrapper {
    padding: 8px;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}
.pj-nav-link-wrapper:hover {
    border-bottom: solid 1px var(--pj-color-black);
}
.pj-nav-link-wrapper a {
    color: var(--pj-nav-link-inactive-color);
    text-decoration: none;
    transition: color 0.5s;
}
.pj-nav-link-wrapper a:hover {
    color: var(--pj-color-black);
}
.pj-nav-link-active {
    border-bottom: 1px solid var(--pj-color-black);
}
.pj-nav-link-active a {
    color: var(--pj-color-black) !important;
}

.pj-main-card {
    width: var(--pj-main-card-width-mobile);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--pj-header-height) + 10px);
    box-shadow: -10px 10px 10px var(--pj-shadow-color); 
}
.pj-main-card-bottom-offset {
    margin-top: 5px;
}
.pj-main-card-line-separator {
    display:none;
}
.pj-main-card-picture {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--pj-main-card-background-color);
}
.pj-main-card-picture-format {
    max-width: 200px;
    height: auto;
    display:block;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}
.pj-main-card-name {
    font-family: var(--pj-font-family);
    font-size: var(--pj-extra-large-font-size);
    font-weight: var(--pj-extra-large-font-weight-bold);
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--pj-main-card-background-color);
    text-align: center;
}
.pj-main-card-profession {
    font-family: var(--pj-font-family);
    font-size: var(--pj-large-font-size);
    font-weight: var(--pj-large-font-weight);
    background-color: var(--pj-main-card-background-color);
    text-transform: uppercase;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}
.pj-main-card-social-media {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--pj-color-white);
}
.pj-main-card-social-media-picture-format {
    margin-left: auto;
    margin-right: auto;
    display:block;
    padding-top: 10px;
    padding-bottom: 10px;
}
.pj-welcome {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    font-family: var(--pj-font-family);
}
.pj-welcome-greetings {
    font-weight: 700;
    font-size: 2em;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}
.pj-welcome h2 {
    font-size: var(--pj-large-font-size);
    font-weight: var(--pj-large-font-weight);
    text-align: left;
    margin: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pj-welcome p {
    font-weight: var(--pj-normal-font-weight);
    font-size: var(--pj-normal-font-size);
    text-align: left;
    padding-top: 5px;
    padding-bottom: 100px;
}
.pj-index-page-background {
    height: 100%;
    background: linear-gradient(180deg, 
    var(--pj-main-background-color) 350px, var(--pj-color-white) 350px);
    margin: 0px;
}
.pj-page-background {
    height: 100%;
    background: var(--pj-main-background-color);
    margin: 0px;
}

.pj-main-buttons-line {
    display: none;
}
.pj-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px !important;
    background-color: var(--pj-color-white);
    width: 100%;
    position: fixed;
    bottom: 0px;
}
.pj-resume-description {
    display: flex;
    justify-content: space-between;
    vertical-align: baseline;
    padding: 20px;
    margin-left: var(--pj-margin-mobil);
    margin-right: var(--pj-margin-mobil);
}
.pj-resume-description div p {
    font-family: var(--pj-font-family);
    font-size: var(--pj-large-font-size);
    font-weight: var(--pj-large-font-weight-bold);
    color: var(--pj-color-black);
    padding: 0px;
    margin: 0px;
}
.pj-resume-items {
    margin-left: var(--pj-margin-mobil);
    margin-right: var(--pj-margin-mobil);
    margin-bottom: 100px;
}
.pj-resume-item {
    display: block;
    font-family: var(--pj-font-family);
    font-size: var(--pj-normal-font-size);
    font-weight: var(--pj-normal-font-weight);
    color: var(--pj-color-black);
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--pj-color-white);
    box-shadow: -10px 10px 10px var(--pj-shadow-color);
    margin-bottom: 20px;
}
.pj-resume-item h2 {
    color: var(--pj-color-blue);
    font-size: var(--pj-large-font-size);
    font-weight: var(--pj-large-font-weight-bold);
    margin: 0px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.pj-resume-item p {
    margin: 0px;
    padding-bottom: 0.5em;
}
.pj-contact-box {
    display: block;
    font-family: var(--pj-font-family);
    font-size: var(--pj-normal-font-size);
    font-weight: var(--pj-normal-font-weight);
    color: var(--pj-color-black);
    background-color: var(--pj-color-white);
    box-shadow: -10px 10px 10px var(--pj-shadow-color);
    margin: 2%;
}

.pj-main-button {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    font-family: var(--pj-font-family);
    font-size: var(--pj-normal-font-size);
    font-weight: var(--pj-normal-font-weight-bold);
    text-decoration: none;
    text-transform: uppercase;
    color: var(--pj-color-black);
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    vertical-align: text-bottom;
}

.pj-main-button:hover {
    background-color: var(--pj-color-blue);
    color: var(--pj-color-white);
}

.pj-main-button-link {
    text-decoration: none;
}
.pj-project-item {
    display: block;
    text-align: left;
    margin-left: var(--pj-margin-mobil);
    margin-right: var(--pj-margin-mobil);
    margin-bottom: 10px;
    background-color: var(--pj-color-white);
    box-shadow: -10px 10px 10px var(--pj-shadow-color);
}
.pj-project-item h2 {
    font-family: var(--pj-font-family);
    font-size: var(--pj-normal-font-size);
    font-weight: var(--pj-normal-font-weight-bold);
    color: var(--pj-color-blue);
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-left: 10px solid var(--pj-color-blue);
}
.pj-project-item p {
    font-family: var(--pj-font-family);
    font-size: var(--pj-normal-font-size);
    font-weight: var(--pj-normal-font-weight);
    color: var(--pj-color-black);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}
.pj-project-item-image {
    display: none;
}
.pj-project-item-image-svg {
    display: none;
}
.pj-project-items-end {
    display: block;
    padding-top: 100px;
}
.pj-contact-box {
    font-family: var(--pj-font-family);
    font-size: var(--pj-normal-font-size);
    font-weight: var(--pj-normal-font-weight);
    text-align: center;
}
.pj-contact-box p {
    padding: 20px;
}
.pj-contact-box a {
    padding: 20px;
    display: none;
    text-decoration: none;
}

.pj-footer-copyright {
    font-family: var(--pj-font-family);
    font-size: var(--pj-footnote-font-size);
    font-weight: var(--pj-footnote-font-weight);
    margin-top: auto;
    margin-bottom: auto;
}
.pj-footer-bold {
    font-family: var(--pj-font-family);
    font-size: var(--pj-footnote-font-size);
    font-weight: var(--pj-footnote-font-weight-bold);
    text-align: center;
}
.pj-footer-social-media-picture-format {
    margin-left: auto;
    margin-right: auto;
    display:block;
    background-color: var(--pj-color-black);
}
.pj-footer-email-address {
    font-family: var(--pj-font-family);
    font-size: var(--pj-footnote-font-size);
    font-weight: var(--pj-footnote-font-weight);
    color: var(--pj-color-black);
    display: none;
    text-decoration: none;
    text-align: center;
}

@media only screen and (hover: hover) and (pointer: fine) and (min-width: 799px) {
    :root {
        --pj-header-height: calc(1.44em + 50px);
    }
    h1 {
        font-size: var(--pj-huge-font-size);
        font-weight: var(--pj-huge-font-weight);
        padding-top: calc(var(--pj-header-height) + 10px);
        padding-bottom: 30px;
    }
    h1::before {
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px'><rect width='18' height='18' style='fill:rgb(0,48,255' /></svg>");
        padding-right: 8px;
    }
    h1 ~ p {
        padding-left: 20px;
        padding-right: 20px;    
        margin-left: 0px;
        margin-right: 0px;
    }
    .pj-col-1 {width: 8.33%;}
    .pj-col-2 {width: 16.66%;}
    .pj-col-3 {width: 25%;}
    .pj-col-4 {width: 33.33%;}
    .pj-col-5 {width: 41.66%;}
    .pj-col-6 {width: 50%;}
    .pj-col-7 {width: 58.33%;}
    .pj-col-8 {width: 66.66%;}
    .pj-col-9 {width: 75%;}
    .pj-col-10 {width: 83.33%;}
    .pj-col-11 {width: 91.66%;}
    .pj-col-12 {width: 100%;}
    .pj-index-page-background {
        background: linear-gradient(90deg, 
        var(--pj-main-background-color) 45%, var(--pj-color-white) 45%);
    }
    .pj-header {
        padding: 16px !important;
    }
    .pj-nav-wrapper {
        display: flex;
        font-family: var(--pj-font-family);
        font-size: var(--pj-normal-font-size);
        font-weight: var(--pj-normal-font-weight);
        margin-top: auto;
        margin-bottom: auto;
    }
    .pj-nav-name {
        font-size:var(--pj-extra-large-font-size);
        font-weight:var(--pj-extra-large-font-weight-bold);
        margin-right: 10px;
    }
    .pj-nav-name::before {
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15px' height='15px'><rect width='15' height='15' style='fill:rgb(0,48,255' /></svg>");
        height: 15px;
        width: 15px;
        padding-right: 8px;
        vertical-align: baseline;
    }    
    .pj-nav-profession {
        font-size:var(--pj-normal-font-size);
        font-weight: var(--pj-normal-font-weight);    }
    .pj-dropdown-menu {
        display: none;
    }
    .pj-main-card {
        width: var(--pj-main-card-width);
        margin-top: 130px;
        margin-right: 0px;
    }
    .pj-main-card-picture {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .pj-main-card-profession {
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .pj-main-card-bottom-offset {
        margin-top: 100px;
    }
    .pj-main-card-line-separator {
        width: var(--pj-main-card-width);
        height: 40px;
        display:block;
        margin-left: auto;
        margin-right: auto;
        background-color: var(--pj-main-card-background-color);
    }
    .pj-welcome {
        margin-left: 20px;
        padding-top: 180px;
    }
    .pj-welcome h2 {
        font-size: var(--pj-extra-large-font-size);
        font-weight: var(--pj-extra-large-font-weight);
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .pj-welcome p {
        padding-top: 20px;
    }
    .pj-welcome-greetings {
        font-size: 5em;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    .pj-main-buttons-line {
        display: flex;
        flex-direction: row;
        width: inherit;
        justify-content: space-around;
    }
    .pj-resume-description {
        margin-left: 0px;
        margin-right: 0px;
    }
    .pj-resume-description div p {
        font-size: var(--pj-extra-large-font-size);
        font-weight: var(--pj-extra-large-font-weight-bold);
    }
    .pj-resume-items {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 100px;
    }
    .pj-resume-item {
        padding-left: 40px;
        padding-right: 5px;
    }
    .pj-project-item {
        height: 250px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .pj-project-item h2 {
        margin-top: 0px;
        font-size: var(--pj-large-font-size);
        font-weight: var(--pj-large-font-weight-bold);
    }
    .pj-project-item-image {
        display: block;
        height: 250px;
        width: 200px;
        object-fit: cover;
        object-position: center;
        overflow: hidden;
        background-color: var(--pj-color-white);
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 20px;
    }
    .pj-project-item-image-svg {
        display: block;
        height: 250px;
        width: 200px;
        object-fit: contain;
        object-position: center;
        overflow: hidden;
    }    
    .pj-contact-box {
        margin: 0px;
    }    
}