@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

.md-header {
    background-color: var(--md-footer-bg-color);
}

.header-pdf-download-icon {
    font-size: 16pt;
}

.header-pdf-download-text {
    font-size: 12pt;
}

img[src$="#avatar"] {
    display: flex;
    margin-right: 1em;
    float: left;
    border-radius: 100%;
    max-width: 130px;
}

.language-flag {
    margin-bottom: -4px;
    max-width: 20px;
}

.timeline-list {
    margin-left: 0.5em;
    display: grid;
    grid-template-columns: 25px 1fr;
    width: 100%;
}

.timeline-bullet-point {
    margin-top: 5px;
}

.timeline-bullet-point-second {
    margin-top: 5px;
    margin-left: 2em;
}

.timeline-bullet-point-second-text {
    margin-left: 2em;
}

.timeline-bullet-point-third {
    margin-top: 5px;
    margin-left: 4em;
}

.timeline-bullet-point-third-text {
    margin-left: 4em;
}

.timeline-bold {
    font-weight: bold;
    display: contents;
}

.headline h1 {
    margin-top: -1em;
}

.about-contact {
    border: #008a10;
    display: grid;
    grid-template-columns: 1fr 288px;
}

.about-contact-short {
    border: #008a10;
    display: grid;
    grid-template-columns: 1fr 288px 230px;
}

.about {
    border: #00c3ff;
    padding-right: 0.5em;
}

.about h2 {
    margin-top: -1em;
}

.contact {
    border: #982aab;
}

.contact-short {
    border: #982aab;
    margin-top: 1.7em;
}

.contact h3 {
    margin-top: -1em;
}

.experience {
    margin-top: -2em;
}

.experience h3 {
    margin: 0;
}

.work {
    grid-column: 1 / 3;
    border-bottom: solid #a4a4a4;
}

.education-languages {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.education {
    margin-top: 1em;
    margin-right: 1em;
}

.education-title {
    font-size: 14pt;
}

.languages {
    margin-top: 3.7em;
    margin-left: 1em;
}

.miscellaneous {
    border: #00541b;
}

.miscellaneous h2 {
    margin: 0;
    margin-top: -1em;
}

.miscellaneous.content {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

.miscellaneous.content h3 {
    margin: 0;
}

.skills {
    display: block;
    top: -1em;
    margin-right: 1em;
}

.publications {
    display: block;
    top: -1em;
}

.skills-header {
    justify-content: center;
    align-items: center;
    font-size: 24px;
    text-align: left;
    vertical-align: middle;
}

.skills-icon {
    margin-bottom: -5px;
}

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    src: url('../font-awesome/webfonts/fa-brands-400.ttf') format('truetype');
}

/* Base styles for skill bars */
@keyframes load {
    from {
        width: 0%
    }
}

@-webkit-keyframes load {
    from {
        width: 0%
    }
}

@-moz-keyframes load {
    from {
        width: 0%
    }
}

@-o-keyframes load {
    from {
        width: 0%
    }
}

.bar {
    background-color: #12192c;
    padding: 0px;
    border-radius: 20px;
    margin-bottom: 3px;
    font-size: 1px;
    color: rgb(44, 44, 44);
    font-weight: 0;
}

.bar::before {
    font-family: 'FontAwesome';
    background-color: #982aab;
    display: inline-block;
    padding: 5px 0 5px 10px;
    border-radius: inherit;
    animation: load 1s 0s;
    -webkit-animation: load 2s 0s;
    -moz-animation: load 2s 0s;
    -o-animation: load 2s 0s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* Python Programming */
.bar.python::before {
    color: rgb(161, 161, 161);
    background-color: #008a10;
    content: "";
    width: calc(80% - 10px);
}

.bar.fast-api::before {
    color: rgb(44, 44, 44);
    background-color: #008a10;
    content: "";
    width: calc(50% - 10px);
}

.bar.pydantic::before {
    color: rgb(44, 44, 44);
    background-color: #008a10;
    content: "";
    width: calc(70% - 10px);
}

.bar.typer::before {
    color: rgb(44, 44, 44);
    background-color: #008a10;
    content: "";
    width: calc(60% - 10px);
}

/* TypeScript Programming */
.bar.typescript::before {
    color: rgb(44, 44, 44);
    background-color: #1480e6;
    content: "";
    width: calc(70% - 10px);
}

.bar.nodejs::before {
    color: rgb(44, 44, 44);
    background-color: #00541b;
    content: "";
    width: calc(65% - 10px);
}

.bar.fastify::before {
    color: rgb(44, 44, 44);
    background-color: #bd0048;
    content: "";
    width: calc(60% - 10px);
}

.bar.angular::before {
    color: rgb(44, 44, 44);
    background-color: #e61414;
    content: "";
    width: calc(40% - 10px);
}

/* C# Programming */
.bar.csharp::before {
    color: rgb(161, 161, 161);
    background-color: #380052;
    content: "";
    width: calc(70% - 10px);
}

.bar.asp-dotnet::before {
    color: rgb(44, 44, 44);
    background-color: #380052;
    content: "";
    width: calc(80% - 10px);
}

.bar.ef-dotnet::before {
    color: rgb(44, 44, 44);
    background-color: #380052;
    content: "";
    width: calc(85% - 10px);
}

/* Markup Languages */
.bar.html5::before {
    color: rgb(44, 44, 44);
    background-color: #ffa200;
    content: "";
    width: calc(80% - 10px);
}

.bar.markdown::before {
    color: rgb(44, 44, 44);
    background-color: #00c3ff;
    content: "";
    width: calc(90% - 10px);
}

/* DevOps */
.bar.docker::before {
    color: rgb(44, 44, 44);
    background-color: #024481;
    content: "";
    width: calc(80% - 10px);
}

.bar.github::before {
    color: rgb(44, 44, 44);
    background-color: #a4a4a4;
    content: "";
    width: calc(70% - 10px);
}

.bar.rancher::before {
    color: rgb(44, 44, 44);
    background-color: #024481;
    content: "";
    width: calc(40% - 10px);
}

/* IT-Sec */
.bar.network-analysis::before {
    color: rgb(44, 44, 44);
    background-color: #bd0048;
    content: "";
    width: calc(50% - 10px);
}

.bar.cryptography::before {
    color: rgb(44, 44, 44);
    background-color: #bd0048;
    content: "";
    width: calc(40% - 10px);
}

.bar.protocol-security::before {
    color: rgb(44, 44, 44);
    background-color: #bd0048;
    content: "";
    width: calc(75% - 10px);
}