:root {
    --bg-color: rgba(255, 255, 255, 1);
    --text-color: rgb(43, 43, 43);
    --accent-color: #cde7fa;
    --action-color: rgb(73, 73, 202);
}

a {
    text-decoration: none;
}

a:hover {
    color: var(--accent-color);
}

a:visited {
    color: var(--text-color);
}

html {
    font-size: 1.2vmax;
}

body {
    color: var(--text-color);
    background-color: #d8d8d8d8;
    margin: 0px;
    display: flex;
    justify-content: center;
}

.print {
    display: none !important;
}

.main {
    width: 100vw;
    max-width: 1920px;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    background-color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.header {
    background-color: var(--bg-color);
    display: grid;
    padding: 15px;
    grid-template-columns: calc(50% - 36px) 72px auto;
    grid-template-rows: auto minmax(50px, 65px);
    row-gap: 3.5vh;
    justify-content: space-around;
    border-bottom: 1px;
    align-items: center;
}

.content {
    flex: 1;
    background-color: var(--bg-color);
    overflow: scroll;
    max-width: 100vw;
}

.footer {
    background-color: var(--bg-color);
    height: fit-content;
    overflow: hidden;
    display: flex;
    font-size: 0.8em;
    align-items: baseline;
}

section {
    margin-top: 12vh;
}

section:first-child {
    margin-top: 5vh;
}

.actions {
    flex: 5;
    display: flex;
    list-style: none;
    justify-content: space-evenly;
    align-items: baseline;
}

.perso {
    grid-row: 1;
    display: flex;
    gap: 5vw;
    align-items: center;
    justify-content: center;
    grid-column: 1 /3;
    border: solid;
}

.hero-image {
    grid-column: 2;
    height: 89px;
    max-width: 72px;
    border-radius: 44px;
    overflow: clip;
}

.hero-image img {
    height: 120px;
    width: 90px;
    position: relative;
    top: -15px;
    left: -8px;
}

.tag-line {
    max-width: 67%;
    font-style: italic;
    height: fit-content;
    font-size: 0.9rem;
    margin-left: 2vw;
    margin-top: 2vh;
}

.about {
    width: 90vw;
    margin: 5vw;
    display: grid;
    column-gap: 2em;
    row-gap: 2em;
    grid-auto-rows: auto;
}

#summary {
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    flex-shrink: 1;
    flex-basis: 60vw;
    flex-grow: 1;
}


#summary::before {
    content: '« '
}

#summary::after {
    content: '» '
}

#portrait {
    border-radius: 5px;
    image-rendering: smooth;
    justify-self: center;
    /*! margin-right: 1em; */
    margin-top: 1em;
}

.object-card {
    border: solid;
    width: fit-content;
    font-size: 0.9rem;
}

.object-card h1,
h2,
h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    border-bottom: solid 1px;
    text-wrap: nowrap;
    padding: 0.9vh 0.5vh 0.5vh 0.5vh;
    margin: 0 0 1.2vh 0;
    ;
    align-self: end;
}

.object-card ul {
    display: flex;
    flex-direction: row;
    gap: 9px;
    list-style-type: disc;
    justify-content: center;

    padding: 0px 10px 0px 10px;
    list-style-position: outside;
    margin: 0.6em;
}

.left {
    justify-self: end;
}

.right {
    justify-self: start;
    grid-column: 3;
}

.header ul {
    list-style-position: inside;
}

.content .object-card {
    margin: 5vw;
    display: grid;
    grid-template-columns: 3em 13em minmax(6em, 54em) 11em;
    padding: 0 0 0.5vh 0;
    order: 3;
    align-content: start;
}

.content h2 {
    font-size: 0.9em;
    grid-column: 3;
    /*! align-self: end; */
    word-wrap: break-word;
    white-space: break-spaces;
}


.content h3 {
    /*! font-size: x-small; */
    grid-column: 4;
    justify-self: center;
    /*! align-self: end; */
}

#skills .object-card {
    border: none;
    grid-template-columns: auto;
    margin-top: 1em;
}

.object-card #description {
    grid-column: 2 / 5;
    font-size: 1em;
    margin: 1vh;
}

#positions #skills {
    grid-column: 2 / 4;
    justify-content: start;
    font-size: 0.9em;
    flex-wrap: wrap;
    list-style-position: inside;
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 1vh;
    margin: 0 0 1vh 1vh;
}

#description ul {
    display: block;
    margin: 0;
    line-height: 1.5em;
}

.content .object-card h1 {
    grid-column: 1 / 3;
}

#education #description {
    margin-top: 0;
}

.section-header {
    font-size: 1.3rem;
    margin: 0 0 3.5em 2vw;
    border-bottom: solid;
    width: calc(50% - 1em);
    display: flex;
    justify-content: space-between;
}

.section-header::after {
    content: '▼';
    position: relative;
    top: 1.5em;
    left: 0.5em;
}

#skills .skills-tag {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;


}

.skills-tag :is(h1, h2, h3, h4, h5) {
    border-radius: 1em;
    width: fit-content;
    background-color: #cde7fa;
}

.skills-tag h1 {
    border-radius: 2em;
    padding: 1.5em;
}

#skills .skills-tag h2 {
    border-radius: 2em;
    padding: 1em;
    font-weight: normal;
}

#skills .skills-tag h3 {
    border-radius: 1em;
    padding: 0.5em;
    font-size: smaller;
    font-weight: normal;
}


#skills .skills-tag h4 {
    border-radius: 1em;
    padding: 0.5em;
    font-size: x-small;
    font-weight: normal;
}

.civil {
    grid-template-columns: 0.5em auto 4.6em 5.7em !important;
    margin: 0 !important;
    align-items: baseline;
    /*! grid-auto-rows: max-content; */
    /*! height: fit-content; */
    width: auto;
}

.civil h1,
.language h1 {
    grid-column: 1 / 5 !important;
}

.language div {
    align-self: baseline;
}

.object-card .lang-name {
    grid-column: 2;
    font-weight: bold;
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
    margin: 0em 0 0.7em 0;
}

.lang-name:after {
    content: ':';
    margin: 0 0.5em 0 0.2em;
}

.object-card .lang-name:nth-of-type(1) {
    /*! margin-top: 0.7em !important; */
}

.object-card .lang-grade {
    grid-column: 3;
    font-family: verdana;
}

.object-card .lang-desc {
    grid-column: 4;
    font-size: 0.8em;
    margin-bottom: 0.7rem;
}

.hobbies {
    grid-template-columns: 0.5em 4em 4em minmax(40em, 100%) !important;
    margin: 0 !important;
    align-self: start;
}

.hobbies h1 {
    grid-column: 1 / 5 !important;
}

.hobbies .description {
    grid-column: 2 / 5;
}

.about .object-card {
    grid-row: 2;
}

#li-logo {
    content: url("LI-In-Bug.png") / "Linkedin";
    height: 2.2em;
    width: 2.2em;
    display: flex;
}

#calendar-icon::after {
    content: '🗓';
    display:inline-flex;
    font-size:2.5em;
      color: var(--action-color);
    position: relative;
    top: -0.08em;
}

#print-icon::after {
    content: "🖶" / "Drucken";
  font-size: 2.7em;
  color: var(--action-color);
}

@media (max-width: 500px) {
    html {
        font-size: 1.3vh
    }

    .header {
        background-color: var(--bg-color);
        display: flex;
        border-bottom: solid;
        padding: 1vh 0 1vh 0;
        max-width: 100vw;

    }

    .left {
        flex-shrink: 1;
        padding-left: 3vw !important;
    }

    .right {
        flex-grow: 1;
        flex-shrink: 1;
        padding-right: 3vw !important;
    }

    .header h1 {
        font-size: 1.26rem;
    }

    .header .right h1 {
        font-weight: normal !important;
        ;
    }

    .header ul {
        margin: 0 0 1.5vw 1.5vw;
        padding: 0;
        justify-content: start;
    }

    .hero-image,
    .tag-line {
        display: none;

    }

    .header .object-card {
        border: none;
        justify-items: end;
        flex-shrink: 1;
    }

    .about {
        display: flex;
        flex-direction: column;
        gap: 3vw;
        grid-template-columns:
            25vw 63vw;
        grid-template-rows: 25vw auto;
        align-content: start;
        align-items: start;
        justify-content: center;
    }

    .about #portrait {
        border-radius: 100%;
        height: 25vw;
        width: 25vw;
        margin: 0;
        grid-column: 2;
        align-self: center;
        order: 1;
    }

    .about #summary {
        grid-column: 1 / 3;
        grid-row: 2;
        order: 2;
    }

    .about .civil {
        border: none;
        gap: 1vw;
        align-self: center;
        display: flex;
        order: 1;
    }

    .about .civil h1 {
        display: none;
    }

    .about .civil .lang-desc {
        padding-right: 4vw;
    }

    .about .hobbies {
        grid-template-columns: 89vw;
        border: none;
        display: flex;
        gap: 3vw;
    }

    .about .hobbies ul {
        flex-direction: column
    }

    .about .hobbies h1 {
        align-self: start;
        padding: 0;
    }

    section {
        margin-top: 5vh;
    }

    section:first-child {
        margin-top: 3vh;
    }

    .content .object-card {
        border: none;
        grid-template-columns: 0 16em auto 11em;
        width: auto;
    }

    .content .object-card h1 {
        align-self: start;
        grid-column: 1 / 4;
        margin-bottom: 0;
        padding-top: 1vw;
    }

    .content h2 {
        margin: 0;
        grid-column: 1 / 5;
        grid-row: 1;
        font-weight: normal;
        padding-top: 0;
        border: 0;
        padding-bottom: 0;
    }

    .content h3 {
        margin: 0;
        align-self: end;
        grid-row: 1 / 3;
    }

    #positions #skills {
        grid-column: 1 / 5;
        padding-bottom: 1.2vh;
    }

    #education #description {
        padding: 2vw 0 2vw 2vw;
        margin: 0;
    }

    .language {
        grid-template-columns: 0 6em 3em auto !important;
        ;
        align-content: start;
    }

    #education .lang-desc,
    #education .lang-grade,
    #education .lang-name {
        border-bottom: dotted 1px;
        align-self: end;
        margin-bottom: 0.5rem;
        padding-bottom: 0.2rem;
    }

    .language .lang-name {
        margin-left: 2vw;
        justify-content: space-between;
    }

    .language .lang-name:after {
        left: -0.3em;
        position: relative;
    }

    .language .lang-name:first-of-type {
        margin-top: 1vh;
    }

    .language .lang-grade {
        margin-left: 0.5em;
        font-weight: bold;
    }
}

@media print {
    :root {
        --bg-color: white;
    }

    html {
        font-size: 8pt;
    }

    @page {
        size: A4 portrait;
    }

    .main {
        display: block;
    }

    section {
        margin-top: 1.2cm;
    }

    .hobbies {
        display: block !important;
    }

    .object-card {
        break-inside: avoid;
    }

    .section--header {
        break-after: avoid;
    }

    .header {
        display: none;
    }

    .footer {
        display: none;
    }

    .print {
        display: grid !important;
        margin: 2vw;
        padding: 0 !important;
        gap: 0 !important;
        justify-content: space-between !important;
        grid-template-rows: auto !important;
    }


    .print .title {
        grid-column: 1 / 4;
        font-size: 3rem;
        display: flex;
        align-items: end;
        border-bottom: solid 1px;
        margin: 0.5em 0 0 0;
        justify-content: space-evenly;
        padding-bottom: 0.4em;
    }


    .print .contacts {
        grid-column: 1 / 4;
        border-bottom: solid;
        font-size: 0.9em;
    }

    .print .contacts ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;
    }

    .print .title h1 {
        font-size: 1em;
        margin: 0;
    }

    .print .title h2 {
        font-size: 0.6em;
        border: 0;
        margin: 0;
    }

    .print .title h2:before {
        content: '&=';
        padding: 0 1em 0 1em;
        font-weight: normal;

    }
    
    #skills h1 {
        border-bottom:solid 1px;
        margin-bottom: 0em;
        font-weight: normal;
        width: auto;
    }

    #skills h1:after {
        content:'';
    }


    .print li {
        font-size: 1.3rem;
        display: flex;
        align-items: center;
    }

    .print li img {
        width:1em !important;
        height:1em;
        margin-right: 10px;
    }
}