/* ------------------------------------------------------------ */
/*                          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;
                }
/* ---------------------------------------------------------------------- */
/*                              Projects page                             */
/* ---------------------------------------------------------------------- */
::selection {
    background: var(--color-text);
    color: var(--color-bg);
}

html {
    height: 100%;
}

body {
    --color-bg: #312c2b;
    --color-accent-primary: rgb(187, 199, 21);
    --color-accent-secondary: rgb(42, 184, 124);
    --color-text: #cdcdcd;
    --color-faded: #cdcdcd40;
    background: var(--color-bg);
    height: 100%;
}

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

    100% {
        opacity: 1;
    }
}

.container {
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

.Projects {
    grid-column: 1;
    grid-row: 1;
    padding-top: 6rem;
    padding-left: 6rem;
    padding-right: 6rem;
    padding-bottom: 8rem;
    display: grid;
    align-self: center;
    grid-template-columns: 50% 50%;
    grid-template-rows: 70% 30%;
    row-gap: 1rem;
    font-family: 'Grenze';
    font-size: 1.35rem;
    color: var(--color-text);
}
    
    .Projects a {
        color: var(--color-text);
        text-decoration: none;
        cursor: pointer;
        transition: all 500ms;
    }
    
    .Projects a:visited {
        color: var(--color-text);
    }

    .Projects a:hover {
        background: var(--color-text);
        color: var(--color-bg);
        transition: all 500ms;
    }

    .Projects__description {
        grid-column: 1 / 2;
        grid-row: 1 / -1;
        height: calc(100% - 0.5rem*2);     /* stack gaps x3 - stack top padding */
        padding-right: 2rem;
        display: grid;
        grid-template-rows: 70% 30%;
        row-gap: 1rem;
    }
        
        #projects-description-top {
            grid-row: 1 / 2;
            display: grid;
            grid-template-rows: 5rem 1rem;
            row-gap: 0.5rem;
            height: 100%;
            align-content: flex-end;
            transition: all 700ms ease-in-out;
            overflow-x: hidden;
        }

            .Projects__description__title {
                grid-row: 1 / 2;
                height: 5rem;
                display: grid;
                grid-template-rows: 2rem auto;
            }

                #title-project-year-git {
                    display: flex;
                    column-gap: 0.25rem;
                    font-size: 1.5rem;
                    animation-name: fade-in;
                    animation-duration: 500ms;
                    animation-timing-function: ease-in-out;
                    animation-fill-mode: forwards;
                }

                    #title-project-year {
                        display: flex;
                        align-self: center;
                    }

                    #title-project-git {
                        display: flex;
                        align-self: baseline;
                    }

                    #title-project-git a:hover {
                        background: none;
                    }

                        #title-project-git-url {
                            width: 1.25rem;
                        }

                        #title-project-git-icon {
                            fill: var(--color-bg);
                            transition: all 1000ms ease-in-out;
                        }

                #title-text {
                    font-size: 2rem;
                    animation-name: fade-in;
                    animation-duration: 500ms;
                    animation-timing-function: ease-in-out;
                    animation-fill-mode: forwards;
                }
            
            #title-separator {
                grid-row: 2 / 3;
                border-width: 0.5rem;
                border-style: solid;
                border-color: var(--color-bg);
                background: var(--color-bg);
                transition: all 1000ms ease-in-out;
            }

            .Projects__description__stats {
                grid-row: 3 / 4;
                display: flex;
                padding-top: 0.5rem;
                row-gap: 0.5rem;
                flex-direction: column;
            }

            .Projects__description__content {
                padding-top: 1rem;
                display: grid;
                grid-auto-rows: auto;
                row-gap: 1rem;
            }

            .Projects__description__content__item,
            .Projects__description__stats__item {
                display: grid;
                grid-template-columns: 17% auto;
                grid-template-rows: 100%;
                animation-name: fade-in;
                animation-duration: 500ms;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
            }

            .Projects__description__stats__title {
                grid-column: 1 / 2;
            }

            #stats-stack-backend,
            #stats-stack-frontend,
            #stats-stack-tools {
                grid-column: 2 / -1;
                height: 2rem;
                display: flex;
                column-gap: 0.5rem;
            }

        #projects-description-bottom {
            grid-row: 2 / 3;
            align-self: flex-start;
            padding-top: 3rem;
        }

            .Projects__description__access {
                display: flex;
                column-gap: 2.5rem;
                justify-content: center;
            }

            .stack__button,
            .access__button  {
                background: var(--color-bg);
                border-color: var(--color-text);
                border-style: solid;
                border-width: 0.1rem;
                border-radius: 0.20rem;
                padding: 0.25rem 0.5rem 0.25rem 0.5rem;
                font-family: 'Space Mono', monospace;
                font-size: 0.95rem;
                color: var(--color-text);
                opacity: 1;
                cursor: pointer;
                pointer-events: all;
                user-select: none;
                transition: all 350ms;
                animation-name: fade-in;
                animation-duration: 500ms;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
            }

            .access__button {
                padding: 0.375rem 0.75rem 0.375rem 0.75rem;
                font-size: 1.275rem;
            }
                .access__button__language {
                    font-size: 1rem;
                }
              
                .stack__button:visited,
                .access__button:visited {
                    color: var(--color-text);
                }
                     
                .stack__button:hover,
                .access__button:hover {
                    background: var(--color-text);
                    border-color: var(--color-bg);
                    transition: all 350ms;
                }

    .Projects__demo {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        display: flex;
        border-radius: 0.35rem;
        padding-top: 1rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: flex-end;
        animation-name: fade-in;
        animation-duration: 500ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

        #demo-video {
            border-radius: inherit;
            display: inline-block;
            width: calc(16rem*3 + 1rem*2);      /* matches selector grid width */
        }

    
    .Projects__selector {
        grid-column: 2 / -1;
        grid-row: 2 / -1;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: calc(100% - 1.75rem*2) 1.75rem 1.75rem;
        width: calc(16rem*3 + 1rem*2);      /* images x3 + gap x2 */
        justify-self: flex-end;
        align-self: baseline;
    }
        .Projects__selector__scroller {
            background: none;
            border: none;
            color: var(--color-text);
            display: flex;
            align-self: center;
            width: 5rem;
            cursor: pointer;
            transition: all 300ms ease-in-out;
        }
            .Projects__selector__scroller.unavailable {
                color: var(--color-faded);
                cursor: unset;
                transition: all 300ms ease-in-out;
            }

            #scroller-left {
                grid-column: 1 / 2;
                grid-row: 3 / -1;
                padding-right: 0.25rem;
                flex-direction: row-reverse;
                justify-self: flex-end;
                align-self: flex-end;
            }

            #scroller-right {
                grid-column: 2 / 3;
                grid-row: 2 / 3;
                padding-left: 0.25rem;
                flex-direction: row;
                justify-self: flex-start;
                align-self: flex-start;
            }

            .Projects__selector__scroller__icon {
                display: inline-block;
                width: 2.5rem;
                height: 100%;
                pointer-events: none;
            }

        .Projects__selector__container {
            grid-column: 1 / -1;
            grid-row: 1 / 2;
            display: flex;
            column-gap: 1rem;
            padding-bottom: 1rem;   
            overflow: hidden;
            align-items: flex-start;
        }

            .Projects__selector__button__image__overlay {
                background: none;
                border-radius: 0.35rem;
                transition: all 300ms ease-in-out;
                user-select: none;
            }

            .Projects__selector__button__image {
                display: block;
                opacity: 1.0;
                width: 16rem;
                border-radius: 0.35rem;
                cursor: pointer;
                user-select: none;
                transition: all 300ms ease-in-out;
            }
/* ----------------------------------------------------------------- */
/*              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;
    }
}
/* ----------------------------------------------------------------- */
/*              Landscape view - 3840x2160, high-res                 */
/* ----------------------------------------------------------------- */
@media screen and (orientation: landscape) 
    /* and (-webkit-min-device-pixel-ratio: 1.5)  */
    and (max-width: 5000px) {

    #projects-description-top {
        padding-top: 3rem;
    }
}


/* ----------------------------------------------------------------- */
/*            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) {

    #projects-description-top {
        padding-top: 5rem;
    }
}


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

    #projects-description-top {
        padding-top: 3rem;
    }
}


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

    #projects-description-top {
        padding-top: 0rem;
    }
}


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

}


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

}


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

    #demo-video {
        width: calc(13rem*3 + 1rem*2);
    }

    .Projects__selector {
        width: calc(13rem*3 + 1rem*2);
    }

        .Projects__selector__button__image {
            width: 13rem;
        }
}


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

    .Projects {
        padding-top: 4rem;
        padding-left: 4rem;
        padding-right: 4rem;
        padding-bottom: 6rem;
        height: 100%;
    }

    .Projects__demo {
        padding-bottom: 2rem;
    }

    #demo-video {
        width: calc(18rem*2 + 1rem*2);
    }

    .Projects__selector {
        width: calc(18rem*2 + 1rem*2);
    }

        .Projects__selector__container {
            column-gap: 2rem;
        }

        .Projects__selector__button__image {
            width: 18rem;
        }
        
        #scroller-left {
            padding-right: 1rem;
            align-self: center;
        }

        #scroller-right {
            padding-left: 1rem;
            align-self: center;
        }

            .Projects__selector__scroller__icon {
                width: 4rem;
            }
}


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

    .Projects {
        row-gap: 0rem;
    }

        .Projects__description {
            grid-template-rows: 80% 20%;
            row-gap: 0rem;
        }    
    
}


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

    .Projects__description {
        grid-template-rows: 85% 25%;
        row-gap: 0rem;
    }    

        #projects-description-bottom {
            padding-top: 2rem;
        }
}


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

    .Projects__description {
        grid-template-rows: 90% 10%;
        row-gap: 0rem;
    }        
}


/* ----------------------------------------------------------------- */
/*                      Portrait view - general                      */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) {
    .Projects {
        height: 100%;
        padding-top: 12rem;
        padding-left: 6rem;
        padding-right: 6rem;
        padding-bottom: 12rem;
        grid-template-columns: 100%;
        grid-template-rows: 40% 40% 20%;
    }

        .Projects__description {
            width: calc(16rem*3 + 1rem*2);
            justify-self: center;
            grid-column: 1 / -1;
            grid-row: 1 / 2;
            grid-template-rows: 80% 20%;
            padding-right: 0rem;
        }

            #projects-description-bottom {
                padding-top: 2rem;
            }

        .Projects__demo {
            grid-column: 1 / -1;
            grid-row: 2 / 3;
            padding-top: 0rem;
            align-content: flex-end;
            justify-content: center;
        }

        .Projects__selector {
            grid-column: 1 / -1;
            grid-row: 3 / -1;
            justify-self: center;
        }

            .Projects__selector__scroller__icon {
                width: 4rem;
            }

            #scroller-left {
                align-self: baseline;
            }

            #scroller-right {
                align-self: baseline;
            }
}


/* ----------------------------------------------------------------- */
/*               Portrait view - tablet screens                  */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait)
    and (max-height: 1400px) {
    .Projects {
        padding-top: 4rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 4rem;
    }
    
        .Projects__description {
            grid-template-rows: 85% 15%;
            width: calc(20rem*3 + 1rem*2);
            row-gap: 0;
        }

            #projects-description-bottom {
                padding-top: 0rem;
                align-self: center;

            }

        #demo-video {
            width: calc(20rem*3 + 1rem*2);
        }

        .Projects__selector {
            /*          images    column gaps */
            width: calc(20rem*3 + 1rem*2);
        }

            .Projects__selector__button__image {
                width: 20rem;
            }
}


/* ----------------------------------------------------------------- */
/*               Portrait view - mobile, default                     */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait)
    and (max-height: 950px) {
    
    .Projects {
        padding-top: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 3rem;
        grid-template-rows: 50% 29% 21%;
        font-size: 1.7rem;
        row-gap: 1rem;
    }

        .Projects__description {
            grid-template-rows: 85% 15%;
            width: calc(18rem*2 + 1rem);
            height: 100%;
            row-gap: 0rem;
        }

            .Projects__description__stats {
                row-gap: 0;
                padding-top: 0;
            }

            #projects-description-top {
                grid-template-rows: 8rem 1rem;
                align-content: center;
            }

                #title-text {
                    font-size: 2.25rem;
                }

                #project-objectives {
                    font-style: italic;
                }

                    #content-objectives-title {
                        display: none;
                    }

                    #content-objectives {
                        grid-column: 1 / -1;
                        grid-row: 1 / -1;
                        text-align: center;
                    }

                .Projects__description__title {
                    height: 8rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: flex-start;
                }

                .Projects__description__stats__item {
                    display: none;
                }

                #content-description-title {
                    display: none;
                }

                #content-description {
                    grid-column: 1 / -1;
                }

            #projects-description-bottom {
                padding-top: 0rem;
                align-self: center;
            }

        .Projects__description__stats__title {
            display: none;
        }

        #stats-stack-backend,
        #stats-stack-frontend,
        #stats-stack-tools {
            grid-column: 1 / -1;
        }

            #demo-video {
                width: calc(18rem*2 + 1rem);
            }

        .Projects__selector {
            width: calc(18rem*2 + 1rem);
        }

            .Projects__selector__button__image {
                width: 18rem;
            }
}


/* ----------------------------------------------------------------- */
/*               Portrait view - mobile, wider                       */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    and (max-height: 950px)
    and (min-width: 400px) {

    .Projects__description {
        grid-template-rows: 85% 15%;
        width: calc(19rem*2 + 1rem);
        height: 100%;
        row-gap: 0rem;
    }

        #demo-video {
            width: calc(19rem*2 + 1rem);
        }

    .Projects__selector {
        width: calc(19rem*2 + 1rem);
    }

        .Projects__selector__button__image {
            width: 19rem;
        }
}



/* ----------------------------------------------------------------- */
/*                 Portrait view - mobile, smaller                   */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) 
    and (max-height: 700px) {
    .Projects {
        padding-top: 3rem;
        padding-bottom: 5rem;
        grid-template-rows: 47% 30% 23%;
    }

        .Projects__description {
            grid-template-rows: 80% 20%;
            width: calc(19rem*2 + 1rem);
        }

            .Projects__description__content {
                padding-top: 0rem;
            }

            #project-objectives {
                display: none;
            }

        #demo-video {
            width: calc(19rem*2 + 1rem);
        }
    
        .Projects__selector {
            width: calc(19rem*2 + 1rem);
        }
    
            .Projects__selector__button__image {
                width: 19rem;
            }
}