/* ------------------------------------------------------------ */
/*                          Defaults                            */
/* ------------------------------------------------------------ */
:root {
    --root-font-size: 16px;
    font-size: var(--root-font-size);
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}


/* ------------------------------------------------------------ */
/*                          Loader                              */
/* ------------------------------------------------------------ */
.loading {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background: #312c2b;
    user-select: none;
    z-index: 100;
}

    #loading_image {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        display: flex;
        justify-content: center;
        pointer-events: none;
    }

    #loading_text {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        display: flex;
        align-self: flex-start;
        justify-content: center;
        font-family: 'Sansita Swashed', cursive;
        font-size: 3rem;
        color: antiquewhite;
    }

    .loading.fade {
        animation-name: load-fade-out;
        animation-duration: 2000ms;
    }

        @keyframes load-fade-out {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

    .loading.hide {
        display: none;
    }


/* ----------------------------------------------------------------------- */
/*                             Header + Navbar                             */
/* ----------------------------------------------------------------------- */
.header {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(4, 25%);
    align-items: flex-end;
}

    .header_menu {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        display: grid;
        height: 3rem;
        top: 0;
        position: sticky;
        grid-template-columns: auto 2.5rem;
        grid-template-rows: 100%;
        background: transparent;
        align-self: flex-start;
        align-items: flex-start;
        user-select: none;
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        transition: all 300ms ease-in-out;
        z-index: 15;
    }

        .header_menu.toggle {
            background: #000000;
            transition: all 300ms ease-in-out;
        }

        #header_menu_list {
            grid-row: 1;
            display: grid;
            width: 100%;
            height: 100%;
            grid-auto-flow: column;
            opacity: 0;
            user-select: none;
            pointer-events: none;
            transition: opacity 300ms ease-in-out;
        }

            #header_menu_list.toggle {
                opacity: 1;
                pointer-events: all;
                transition: opacity 300ms ease-in-out;
            }        

            #header_menu_list li {
                height: 100%;
                display: grid;
                grid-template-columns: auto;
                grid-template-rows: 100%;
                list-style-type: none;
                transition: all 300ms ease-in-out;
                cursor: pointer;
            }

                #header_menu_list li:hover {
                    background: var(--color-bg);
                    transition: all 300ms ease-in-out;
                }

                .header_menu_list_name {
                    grid-column: 1;
                    grid-row: 1;
                    align-self: center;
                    justify-self: end;
                    font-family: "Grenze", serif;
                    font-size: 1.75rem;
                    color: var(--color-text);
                    text-decoration: none;
                    transition: all 300ms ease-in-out;
                    pointer-events: none;
                }

                    .header_menu_list_name:visited {
                        color: var(--color-text);
                    }

                    .ionicon {
                        grid-column: 2;
                        grid-row: 1;
                        width: 1.25rem;
                        justify-self: start;
                        align-self: center;
                        color: var(--color-text);
                        transition: all 350ms ease-in-out;
                    }

                #header_menu_list li:hover 
                    > .header_menu_list_name {
                        text-decoration-line: underline;
                        text-decoration-style: solid;
                        animation-name: menu-highlight;
                        animation-fill-mode: forwards;
                        animation-duration: 350ms;
                        animation-timing-function: ease-in-out;
                        transition: all 350ms ease-in-out;
                }

                    @keyframes menu-highlight {
                        0% {
                            text-decoration-color: var(--color-accent-primary);
                            text-decoration-thickness: 0.06rem;
                        }
                        65% {
                            text-decoration-color: var(--color-accent-primary);
                            text-decoration-thickness: 0.18rem;
                        }
                        100% {
                            text-decoration-color: var(--color-accent-secondary);
                            text-decoration-thickness: 0.30rem;
                        }
                    }

                #header_menu_list li:hover 
                    > .ionicon {
                        animation-name: icon-highlight;
                        animation-fill-mode: forwards;
                        animation-duration: 350ms;
                        animation-timing-function: ease-in-out;
                }

                    @keyframes icon-highlight {
                        0% {
                        }
                        65% {
                            color: var(--color-accent-primary)
                        }
                        100% {
                            color: var(--color-accent-secondary)
                        }
                    }

        .header_menu_toggle {
            grid-column: 2;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 100%;
            background: transparent;
            align-items: center;
            cursor: pointer;
            transition: background 300ms ease-in-out;
        }

            .header_menu_toggle.resume-hover {
                background: var(--color-bg);
                transition: background 300ms ease-in-out;
            }

            #header_menu_toggle_stroke1 {
                grid-column: 1;
                grid-row: 1;
                width: 1.25rem;
                height: 1.25rem;
                border-left: var(--color-accent-primary) solid 0.30rem;
                border-bottom: transparent solid 0.30rem;
                transform: rotate(45deg);
                transition: all 300ms ease-in-out;
                z-index: 1;
            }

                #header_menu_toggle_stroke1.toggle {
                    border-bottom: transparent solid 0rem;
                    transform: rotate(135deg);
                    height: 2rem;
                    margin-top: 1rem;
                    transition: all 550ms ease-in-out;
                }

            #header_menu_toggle_stroke2 {
                grid-column: 1;
                grid-row: 1;
                width: 1.25rem;
                height: 1.25rem;
                border-left: var(--color-accent-secondary) solid 0.30rem;
                border-top: transparent solid 0.30rem;
                transform: rotate(-45deg);
                transition: all 550ms ease-in-out;
                z-index: 0;
            }

                #header_menu_toggle_stroke2.toggle {
                    border-top: transparent solid 0rem;
                    transform: rotate(-135deg);
                    height: 2rem;
                    margin-bottom: 0.5rem;
                    transition: all 300ms ease-in-out;
                }
body {
    --color-bg: #312c2b;
    --color-accent-primary: rgb(187, 199, 21);
    --color-accent-secondary: rgb(42, 184, 124);
    --color-text: #cdcdcd;
    --text-accent-primary: rgb(16, 106, 210);
    background: var(--color-bg);
    font-family: 'Raleway', sans-serif;
    color: #000000;
}

body a {
    text-decoration: none;
    color: #000000;
}

h1, h2, h3, h4 {
    display: unset;
    font-size: unset;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: unset;
}

h2 {
    font-size: 5.5mm;
}

h3 {
    font-size: 4.5mm;
}

h4 {
    font-size: 3.5mm;
}


::selection {
    background: var(--color-text);
    color: var(--color-bg);
}

@media print {
    .header {
        display: none;
    }
}

@page {
    size: A4;
}

.container {
    display: grid;
    background: var(--color-bg);
    animation-name: fade-in;
    animation-duration: 2000ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

    @keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .Resume {
        width: 210mm;
        height: 297mm;
        background: #ffffff;
        display: grid;
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        grid-template-columns: 100%;
        grid-template-rows: 25mm auto;
        padding: 10mm 15mm 10mm 15mm;
    }

        .Resume__header {
            grid-row: 1 / 2;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 45% 25% 20%;
            justify-items: center;
        }

            #full-name {
                grid-row: 1 / 2;
                font-size: 10mm;
                color: var(--text-accent-primary);
                font-weight: 400;
            }

            .Resume__header__contact {
                grid-row: 2 / 3;
                display: flex;
                column-gap: 5mm;
                flex-direction: row;
                font-size: 3.5mm;
                align-items: center;
            }
                .Resume__header__contact__item {
                    display: flex;
                    column-gap: 1mm;

                }
                    .Resume__header__contact .ionicon {
                        grid-column: unset;
                        grid-row: unset;
                        width: 3mm;
                        justify-self: unset;
                        align-self: unset;
                        color: var(--text-accent-primary);
                        fill: var(--text-accent-primary);
                        transition: unset;
                    }
            
            #header-location {
                grid-row: 3 / -1;
                font-size: 3mm;
                align-self: flex-start;
            }

        .Resume__sections {
            grid-row: 2 / -1;
            display: grid;
            grid-template-columns: 100%;
            grid-auto-rows: max-content;
            row-gap: 5mm;
        }

            #external-url-icon {
                display: inline-flex;
                fill: var(--text-accent-primary);
            }
                #external-url-icon svg {
                    width: 3.5mm;
                    height: 3.5mm;
                    align-self: center;
                    pointer-events: none;
                }

            .Resume__section {
                display: grid;
                grid-template-rows: 10mm auto;
            }

                .Resume__section__item {
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: 10mm auto;
                    row-gap: 2.5mm;
                    padding-bottom: 4mm;
                }
                
                #projects .Resume__section__item {
                    display: grid;
                    grid-template-rows: 10mm 6mm;
                }

                    .Resume__section__item__header {
                        grid-column: 1 / -1;
                        grid-row: 1 / 2;
                        display: grid;
                        grid-template-columns: 100%;
                        grid-template-rows: 65% 35%;
                    }
    
                        .Resume__section__item__header__name {
                            grid-column: 1 / 2;
                            grid-row: 1 / 2;
                            display: flex;
                            column-gap: 0.5mm;
                            color: var(--text-accent-primary);
                            font-weight: 400;
                            align-self: center;
                        }

                        .Resume__section__item__header__title {
                            grid-column: 1 / 2;
                            grid-row: 2 / -1;
                            display: inline-flex;
                            column-gap: 0.5mm;
                            font-style: italic;
                            font-weight: 400;
                            align-self: baseline;
                        }

                        .Resume__section__item__header__links {
                            grid-column: 1 / -1;
                            grid-row: 2 / 3;
                            display: inline-flex;
                            column-gap: 0.5mm;
                            align-self: baseline;
                            z-index: 2;
                        }

                            .Resume__section__item__header__links a {
                                font-size: 3.75mm;
                                font-family: 'Space Mono', monospace;
                            }

                        .Resume__section__item__header__date {
                            grid-column: 1 / -1;
                            grid-row: 1 / 2;
                            display: flex;
                            text-align: end;
                            align-self: center;
                            justify-self: flex-end;
                        }

                        .Resume__section__item__header__location {
                            grid-column: 1 / -1;
                            grid-row: 2 / -1;
                            display: flex;
                            text-align: end;
                            align-self: baseline;
                            justify-self: flex-end;
                        }                        

                    .Resume__section__item__summary {
                        grid-row: 2 / 3;
                        display: flex;
                        align-items: flex-end;
                        font-size: 4mm;
                    }

                        .Resume__section__item__summary__objectives {
                            font-style: italic;
                            font-weight: 400;
                        }

                    #skills .Resume__section__item {
                        grid-column: 1 / 2;
                        grid-row: 3 / 4;
                        display: grid;
                        grid-template-columns: 100%;
                        grid-template-rows: repeat(3, 1fr);
                        row-gap: 1.5mm;
                        font-size: 3.75mm;
                    }

                        .Resume__section__item__stack {
                            display: grid;
                            grid-template-columns: 25mm auto;
                            grid-template-rows: 100%;
                        }
                            
                            .Resume__section__item__stack__name {
                                display: flex;
                                justify-self: flex-start;
                            }
                            
                            .Resume__section__item__stack__container {
                                grid-column: 2 / -1;
                                display: flex;
                                column-gap: 5mm;
                            }
                                .Resume__section__item__stack li {
                                    list-style: none;
                                }

                    .Resume__section__item__list {
                        grid-column: 1 / -1;
                        grid-row: 2 / -1;
                    }

                    #projects .Resume__section__item__list {
                        grid-column: 1 / -1;
                        grid-row: 4 / -1;
                    }

                        .Resume__section__item__list li {
                            list-style-type: circle;
                            list-style-position: inside;
                            font-size: 3.75mm;
                            line-height: 5.75mm;
                        }

                            .Resume__section__item__list__item__container {
                                display: inline-flex;
                            }

/* Cover letter template */
    
    .Resume__letter__block {
        display: flex;
        flex-direction: column;
        font-size: 0.75rem;
    }

    .Resume__letter__body,
    .Resume__letter__footer {
        display: flex;
        flex-direction: column;
        row-gap: 5mm;
        padding-top: 10mm;
        line-height: 1.75;
        font-size: 3.75mm;
    }

        .Resume__letter__body a {
            color: var(--text-accent-primary);
        }

        .Resume__letter__body__date {
            font-style: italic;
        }

        .Resume__letter__body__title {
            font-weight: 600;
            padding-bottom: 1rem;
        }

        .Resume__letter__body__proj__name {
            font-style: italic;
        }

/* ----------------------------------------------------------------- */
/*              Landscape view - 3840x2160, high-res                 */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-width: 5000px) {
    
    :root {
        --root-font-size: 34px;
    }
}


/* ----------------------------------------------------------------- */
/*            Landscape view - 2560x1600 plus, high-res              */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-width: 2800px)
    and (min-height: 1600px) {

    :root {
        --root-font-size: 21px;
    }
}


/* ----------------------------------------------------------------- */
/*            Landscape view - 2560x1440 plus, high-res              */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-width: 2800px) {

    :root {
        --root-font-size: 21px;
    }

}


/* ----------------------------------------------------------------- */
/*            Landscape view - 1920x1080 standard                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-width: 2400px) {

    :root {
        --root-font-size: 18px;
    }
}


/* ----------------------------------------------------------------- */
/*            Landscape view - 1920x1080 standard                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-width: 2000px) {

    :root {
        --root-font-size: 16px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - under 1920x1080                   */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 1850px) {

    :root {
        --root-font-size: 15px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - under 1920x1080                   */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 1650px) {

    :root {
        --root-font-size: 14px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - tablets, notebooks                */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 1500px) {

    :root {
        --root-font-size: 13px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - tablets, notebooks                */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 1350px) {

    :root {
        --root-font-size: 12px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - mobile devices                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 1200px) {

    :root {
        --root-font-size: 12px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - mobile devices                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 1100px) {

    :root {
        --root-font-size: 11px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - mobile devices                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 1000px) {

    :root {
        --root-font-size: 10px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - mobile devices                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 900px) {

    :root {
        --root-font-size: 9px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - mobile devices                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 750px) {

    :root {
        --root-font-size: 8px;
    }
}


/* ----------------------------------------------------------------- */
/*                Landscape view - mobile devices                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-width: 600px) {

    :root {
        --root-font-size: 7px;
    }
}






/* ----------------------------------------------------------------- */
/*            Portrait view - 3840x2160, high-res                    */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-height: 5000px) {
    
    :root {
        --root-font-size: 34px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view - 2560x1600 plus, high-res               */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (min-width: 1600px)
    and (max-height: 2800px) {

    :root {
        --root-font-size: 21px;
    }
}


/* ----------------------------------------------------------------- */
/*              Portrait view - 2560x1440 plus, high-res             */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-height : 2800px) {

    :root {
        --root-font-size: 21px;
    }

}


/* ----------------------------------------------------------------- */
/*            Portrait view - 1920x1080 standard                     */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-height: 2000px) {

    :root {
        --root-font-size: 16px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view - under 1920x1080                        */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 1700px) {

    :root {
        --root-font-size: 14px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view - tablets, notebooks                     */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 1500px) {

    :root {
        --root-font-size: 13px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view - tablets, notebooks                     */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 1350px) {

    :root {
        --root-font-size: 12px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view -  mobile devices                        */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 1200px) {

    :root {
        --root-font-size: 12px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view -  mobile devices                        */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 1100px) {

    :root {
        --root-font-size: 11px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view -  mobile devices                        */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 1000px) {

    :root {
        --root-font-size: 10px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view -  mobile devices                        */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 750px) {

    :root {
        --root-font-size: 9px;
    }
}


/* ----------------------------------------------------------------- */
/*            Portrait view -  mobile devices                        */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    /* and (-webkit-min-device-pixel-ratio: 1.5) */
    and (max-height: 625px) {

    :root {
        --root-font-size: 8px;
    }
}