* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.resume-part {
    min-height: 100vh;
    position: relative;
}

.resume-part:not(:last-of-type) {
    border-bottom: 1px solid rgba(66, 133, 192, 0.4);
    padding-bottom: 3rem;
}

.resume-part:nth-of-type(2n) {
    background: hsl(35, 100%, 95%);
    color: rgb(20, 20, 20);
}

.resume-part:nth-of-type(2n + 1) {
    background: hsl(216, 100%, 95%);
    color: rgb(20, 20, 20);
}

.resume-part:first-of-type {
    background: rgba(200, 200, 210, 0.6);
    border: none;
    padding-bottom: 0;
}

.resume-part > * {
    margin: 0 auto;
    max-width: 1024px;
    padding: 3rem 0;
}

.resume-part > h2 {
    padding-inline: 2rem;
}

/*
 * Landing
 */

#home {
    --url: url(https://photone.djangojanny.net/api/photo/1920/1080.webp?blur=1&lightness=-10);
    align-items: center;
    background-color: rgba(0, 0, 0, 0);
    background-image: var(--url);
    background-position: center;
    background-size: cover;
    color: rgba(66, 133, 192, 1);
    display: flex;
    flex-direction: column;
    height: 60vh;
    justify-content: center;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    z-index: 1000;
}

@media screen and (max-aspect-ratio: 4/3) {
    #home {
        --url: url(https://photone.djangojanny.net/api/photo/1440/1080.webp?blur=1&lightness=-10);
    }
}

@media screen and (max-aspect-ratio: 1/1) {
    #home {
        --url: url(https://photone.djangojanny.net/api/photo/1080/1080.webp?blur=1&lightness=-10);
    }
}

@media screen and (max-aspect-ratio: 3/4) {
    #home {
        --url: url(https://photone.djangojanny.net/api/photo/1080/1440.webp?blur=1&lightness=-10);
    }
}

#home.landing h1 {
    font-family: var(--font-title), arial, serif;
    font-size: 5rem;
    font-weight: 100;
    text-align: center;
    text-shadow: white -13px 13px 0,
    white -12px 12px 0,
    white -11px 11px 0,
    white -10px 10px 0,
    white -9px 9px 0,
    white -8px 8px 0,
    white -7px 7px 0,
    white -6px 6px 0,
    white -5px 5px 0,
    white -4px 4px 0,
    white -3px 3px 0,
    white -2px 2px 0,
    white -1px 1px 0;
}

#home.landing p {
    font-size: 2rem;
    text-align: center;
    text-shadow: white -1px 1px,
    white -2px 2px;

}


@media screen and (max-width: 900px) {
    #home.landing h2 {
        font-size: 3rem;
    }

    #home.landing p {
        font-size: 1.5rem;
    }
}

/*
 * About me
 */
.avatar {
    padding: 2rem;
}

.avatar img {
    --height: 200px;

    aspect-ratio: 3/2;

    border-radius: calc(var(--height) / 10) calc(var(--height) / 10) calc(var(--height) / 10) calc(var(--height) / 10);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    display: block;
    height: var(--height);

    margin: 0 auto;
    object-fit: cover;
}

@media screen and (min-width: 900px) {
    .avatar {
        display: grid;
        gap: 1rem;
        grid-template-columns: min-content auto;
    }

    .avatar img {
        --height: 200px;
        align-self: center;
        aspect-ratio: 1 / 1;
        border-radius: calc(var(--height) / 2) calc(var(--height) / 2) calc(var(--height) / 2) calc(var(--height) / 10);
    }

    .avatar figcaption {
        text-align: left;
    }

    .avatar figcaption .big {
        display: block;
        font-size: 3.6em;
        line-height: 0.8em;
        margin: 0 auto;
    }

    .avatar figcaption .infoid {
        list-style: none;
        padding: 0;
    }


}

.languages {
    padding-left: 2rem;
}

.lang {
    display: block;
    padding-bottom: 0.5rem;
    position: relative;
}

.lang::before {
    display: block;
    height: auto;
    left: -2rem;
    position: absolute;
    width: 1.2rem;
}

.lang[data-lang="fr"]::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600' %3E%3Crect width='900' height='600' fill='%23ED2939'/%3E%3Crect width='600' height='600' fill='%23fff'/%3E%3Crect width='300' height='600' fill='%23002395'/%3E%3C/svg%3E%0A");
}

.lang[data-lang="en"]::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0 v30 h60 v-30 z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
    display: block;
    height: auto;
    width: 1.2rem;
}

.lang[data-lang="de"]::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cdesc%3EFlag of Germany%3C/desc%3E%3Crect id='black_stripe' width='5' height='3' y='0' x='0' fill='%23000'/%3E%3Crect id='red_stripe' width='5' height='2' y='1' x='0' fill='%23D00'/%3E%3Crect id='gold_stripe' width='5' height='1' y='2' x='0' fill='%23FFCE00'/%3E%3C/svg%3E%0A");
    display: block;
    height: auto;
    width: 1.2rem;
}

/*
 * Skills
 */
.skills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5rem;
    padding-inline: 2rem;
}

.skill {
    height: 10rem;
    margin: 0 auto;
    text-align: center;
    width: 10rem;
}

.skill img {
    height: 9rem;
    transition: all 0.25s;
}

.skill img:hover {
    transform: scale(1.25);
}

.skill figcaption {
    margin-top: 1rem;
}

/*
 * Experiences
 */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-items: left;
    padding: 0 2rem;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem .5rem;
}

.timeline-item:not(:last-of-type) {
    border-bottom: 1px solid rgba(66, 133, 192, 0.4);
    border-spacing: 40px;
    padding-bottom: 4rem;
}

img.timeline-item-logo {
    height: 50px;
    object-fit: contain;
    padding-right: .5rem;
    width: 50px;
}

span.timeline-item-logo {
    display: none;
}

.timeline-item-header {
    display: grid;
    gap: .5rem 0;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content auto;
    line-height: 1;
}

.timeline-item-logo {
    grid-area: 1 / 1 / 3 / 1;
}

.timeline-item-title {
    grid-area: 1 / 2 / 1 / 2;
}

.timeline-item-year {
    grid-area: 2 / 2 / 2 / 2;
}

@media screen and (min-width: 1200px) {
    .timeline-item {
        display: grid;
        gap: 0 .5rem;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: min-content;
        position: relative;
    }

    .timeline-withfooter {
        gap: 1.5rem .5rem;
        grid-template-rows: min-content auto;
    }

    .timeline-item-header {
        grid-area: 1 / 1 / 3 / 2;
    }

    .timeline-item-content {
        grid-area: 1 / 2 / 2 / 3;
    }

    .timeline-item-footer {
        grid-area: 2 / 2 / 3 / 3;
    }

    .timeline-item-logo {
        left: -80px;
        position: absolute;
        width: 50px;
    }
}

.timeline-item-content {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
}

.timeline-item-content p {
    margin-bottom: 0;
    margin-top: 0;
}

.timeline-item-title,
.timeline-item-role {
    font-family: "head", "arial", "sans-serif";
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}

.timeline-item-short {
    font-size: 0.9rem;
    font-style: italic;
}

.timeline-item-year {
    font-family: "head", "arial", "sans-serif";
}

.timeline-item-env {
    font-size: 0.8rem;
    font-style: italic;
}

.contact-form {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 2rem auto;
    max-width: 600px;
    padding: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    color: #333;
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-control {
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.75rem;
    transition: border-color 0.3s ease;
    width: 100%;
}

.form-control:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    outline: none;
}

.help-text {
    color: #666;
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.btn {
    background-color: #4a90e2;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #357abd;
}

.success-message {
    background-color: #4caf50;
    border-radius: 4px;
    color: white;
    margin-block: 1rem;
    margin-top: 1rem;
    padding: 1rem;
}

.error-message {
    background-color: #f44336;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-block: 1rem;
    margin-top: 1rem;
    padding: 1rem;
}

.help-text.hidden,
.resume-next.hidden {
    display: none;
}