/* ------------------------------------------------------------ */
/*                          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;
                }
/* ----------------------------------------------------------------- */
/*                              Landing                              */
/* ----------------------------------------------------------------- */
html {
    height: 220%;
}

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

.container {        /* during initial loading screen */
    display: grid;
    height: 100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    animation-name: container-fade-in;
    animation-duration: 2000ms;
}

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

.Index {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    height: 100%;
    display: grid;
    background: var(--color-bg);
    grid-template-columns: 100%;
    grid-template-rows: auto;       /* allows row to grow with zooming effect */
    justify-items: center;
}

    .Index__cityscape {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        display: grid;
        width: 50%;
        height: 100%;      /* sizes the layered images */
        grid-template-columns: 100%;
        grid-template-rows: 100%;
        margin-top: 3rem;
        border: #ffffff double 0.24rem;
        padding: 3rem;
        background: #ffffff;
        justify-items: center;
        /* -------  x      y      blur   spread  colour -------- */
        box-shadow: 0.5rem 0.5rem 0.9rem 0.05rem rgba(0, 0, 0, 0.3);
        transition: all 250ms ease-in-out;
    }
        .Index__cityscape__layers {
            position: relative;
            width: 100%;        /* Fits images into parent div */
            grid-column: 1;
            grid-row: 1;
            align-self: flex-end;
            pointer-events: none;
        }
 
            #layer1 {
                z-index: 11;
            }

            #layer2 {
                z-index: 11;
            }

            #layer3 {
                z-index: 10;
            }

            #layer4 {
                z-index: 9;
            }
            #layer5 {
                z-index: 8;
            }
            
            #layer6 {
                z-index: 7;
            }

            #layer7 {
                z-index: 6;
            }
            
            #layer8 {
                z-index: 5;
            }

            #layer9 {
                z-index: 4;
            }

            #layer10 {
                z-index: 3;
            }

            #layer11 {
                filter: blur(0.06rem);
                z-index: 2;
            }

            #layer12 {
                filter: blur(0.12rem);
                z-index: 1;
            }

            #cityscape-bg {
                grid-column: 1;
                grid-row: 1;
                width: 100%;
                border: solid grey 0.06rem;
                box-shadow: 0.08rem 0.08rem 0.05rem rgb(0 0 0 / 30%) inset;
            }


/* --------------------------------------------------------------------- */
/*                            About section                              */
/* --------------------------------------------------------------------- */
::selection {
    background: var(--color-text);
    color: var(--color-bg);
}

.Index__about {
    grid-column: 1 / -1;
    grid-row: 2 / -1;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 85% 15%;
    width: 100%;
    height: 100%;
    padding: 5rem 6rem;
    font-family: 'Grenze', serif;
    color: var(--color-text);
}

    .Index__about__intro {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: 90%;
        display: grid;
        justify-self: center;
        grid-template-rows: 40% 60%;
    }

        #greet {
            grid-row: 1 / 2;
            display: flex;
            width: 100%;
            justify-self: center;
            justify-content: flex-end;
            align-items: flex-end;
            font-family: 'IBM Plex Mono', monospace;
            cursor: pointer;
        }          

            #address {
                display: flex;
                text-decoration: none;
                color: var(--color-text);
                font-size: 4rem;
            }   

                #alias {
                    color: var(--color-accent-secondary-dim);
                    animation-name: flicker-alias;
                    animation-duration: 3500ms;
                    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    animation-fill-mode: forwards;
                    animation-iteration-count: infinite;
                }

                @keyframes flicker-alias {
                    0% {
                        color: var(--color-accent-secondary);
                        filter: blur(0.175rem);
                    }

                    5% {
                        color: var(--color-accent-secondary-dim);
                        filter: blur(0.15rem);
                    }

                    10% {
                        color: var(--color-accent-secondary-dim);
                        filter: blur(0.20rem);
                    }

                    13% {
                        color: var(--color-accent-secondary);
                        filter: blur(0.175rem);
                    }

                    15% {
                        color: var(--color-accent-secondary-dim);
                        filter: blur(0.20rem);
                    }   
    
                    17% {
                        color: var(--color-accent-secondary);
                        filter: blur(0.175rem);
                    }
    
                    18% {
                        color: var(--color-accent-secondary-dim);
                        filter: blur(0.175rem);
                    }

                    20% {
                        color: var(--color-accent-secondary);
                        filter: blur(0.15rem);
                    }

                    25% {
                        color: var(--color-accent-secondary-dim);
                        filter: blur(0.125rem);
                    }

                    30% {
                        color: var(--color-accent-secondary);
                        filter: blur(0.135rem);
                    }
    
                    65% {
                        color: var(--color-accent-secondary);
                        filter: blur(0.165rem);
                    }
    
                    75% {
                        color: var(--color-accent-secondary-dim);
                        filter: blur(0.15rem);
                    }
    
                    100% {
                        color: var(--color-accent-secondary);
                        filter: blur(0.175rem);
                    }
                }

                #domain {
                    color: var(--color-text-faded);
                    filter: blur(0.175rem);
                    animation-name: flicker-project-intro;
                    animation-duration: 7500ms;
                    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    animation-fill-mode: forwards;
                    animation-direction: reverse;
                    animation-iteration-count: infinite;
                }

        .Index__about__intro__text {
            width: 60%;
            display: flex;
            font-family: 'Grenze', serif;
            font-size: 2.25rem;
            color: var(--color-text);
            align-items: center;
            justify-self: flex-end;
            text-align: right;
        }

    .Index__about__showcase {
        grid-column: 2 / -1;
        grid-row: 1 / 2;
        display: grid;
        grid-template-rows: 40% 60%;
        justify-items: center;
    }

        #project-intro {
            margin-left: 5%;
            align-self: flex-end;
            justify-self: flex-start;
            color: var(--color-text);
            font-size: 4rem;
            font-family: 'IBM Plex Mono', monospace;
            user-select: none;
            animation-name: flicker-project-intro;
            animation-duration: 7500ms;
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
        }

        @keyframes flicker-project-intro {
            0% {
                color: var(--color-text);
                filter: blur(0.23rem);
            }

            10% {
                color: var(--color-text-dim);
                filter: blur(0.25rem);
            }

            15% {
                color: var(--color-text);
                filter: blur(0.23rem);
            }

            90% {
                color: var(--color-text);
                filter: blur(0.2rem);
            }
    
            95% {
                color: var(--color-text-dim);
                filter: blur(0.23rem);
            }
            
            100% {
                color: var(--color-text);
                filter: blur(0.25rem);
            }
        }


        #latest-project-video {
            grid-row: 2 / 3;
            width: 90%;
            border-radius: 0.35rem;
            align-self: center;
            justify-self: center;
        }

    .Index__about__links {
        grid-column: 1 / -1;
        grid-row: 2 / -1;
        display: grid;
        grid-template-columns: 60% 40%;
        align-content: space-around;
        align-self: baseline;
        row-gap: 1.5rem;
    }

        .Index__about__links__button {
            display: flex;
            background: var(--color-bg);
            border-color: var(--color-text);
            border-style: solid;
            border-width: 0.1rem;
            border-radius: 0.20rem;
            font-family: 'IBM Plex Mono', monospace;
            padding: 0.375rem 0.75rem 0.375rem 0.75rem;
            font-size: 1.275rem;
            opacity: 1;
            cursor: pointer;
            pointer-events: all;
            transition: all 350ms;
            animation-name: fade-in;
            animation-duration: 500ms;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
        }
            
            #resume-link-button {
                justify-self: flex-end;
                margin-right: 5%;
            }

            #projects-link-button {
                justify-self: flex-start;
                margin-left: 5%;
            }

            .Index__about__links__button {
                color: var(--color-text);
                text-decoration: none;
                user-select: none;
            }
            
            .Index__about__links__button:visited {
                color: var(--color-text);
            }
                    
            .Index__about__links__button:hover {
                background: var(--color-text);
                border-color: var(--color-bg);
                color: var(--color-bg);
                transition: all 350ms;
            }
        
/* ----------------------------------------------------------------- */
/*              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) {
    
   
}


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

   
}


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

  

}


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

   
}


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

   
}


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

   
}


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

   
}


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

   
}


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

  
}


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

  
}


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

   
}


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

   
}


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

}


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

  
}





/* ----------------------------------------------------------------- */
/*            Portrait view - default                                */
/* ----------------------------------------------------------------- */
@media screen and (orientation: portrait) {
    html {
        height: 175%;
    }

    .Index {
        row-gap: 5rem;
    }

    .Index__cityscape {
        width: 80%;
        height: 80%;
        padding: 4rem;
        margin-top: 6rem;
    }

    .Index__about {
        width: 95%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 5rem 3rem;
        row-gap: 3rem;
        justify-content: flex-end;
    }

        .Index__about__intro {
            display: flex;
            flex-direction: column;
            width: 80%;
            row-gap: 2rem;
            align-self: flex-end;
            align-items: flex-end;
        }

            #greet {
                width: 90%;
                align-items: flex-end;
            }

            .Index__about__intro__text {
                width: 85%;
                justify-self: center;
                align-items: baseline;
            }

        .Index__about__showcase {
            display: flex;
            flex-direction: column;
            width: 100%;
            row-gap: 2rem;
            align-self: flex-start;
            align-items: flex-start;
        }

            #project-intro {
                margin: 0;
                align-self: flex-start;
            }

            #latest-project-video {
                align-self: baseline;
                width: 85%;
                border-radius: 0.5rem;
            }

        .Index__about__links {
            grid-column: 1 / -1;
            grid-row: 3 / 4;
            display: grid;
            grid-template-columns: 85% 15%;
            align-content: unset;
            align-self: unset;
            align-items: unset;
            justify-self: unset;
        }

            .Index__about__links__button {
                font-size: 2.5rem;
                padding: 0.75rem 1.25rem;
            }

            #projects-link-button {
                grid-column: 1 / 2;
                grid-row: 1 / -1;
                margin: 0;
                justify-self: flex-end;
                align-self: center;
            }

            #resume-link-button {
                grid-column: 2 / -1;
                grid-row: 1 / -1;
                margin: 0;
                justify-self: flex-end;
                align-self: center;
            }

            

        
   
}


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


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

   
}


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

  

}


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


}


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


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

   
}


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

 
}


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

    html {
        height: 200%;
    }

    .Index__cityscape {
        padding: 2rem;
        width: 90%;
        height: 85%;
    }

    .Index__about {
        padding: 3rem 1rem;
    }

        #address {
            font-size: 3.25rem;
        }

        #project-intro {
            font-size: 3.25rem;
        }

        .Index__about__links__button {
            font-size: 1.75rem;
        }
}


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


}


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

   
}