/*GLOBAL*/
    * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        box-sizing: border-box;
        text-decoration: none;
    }

    :root {
        --prRed: rgb(115, 29, 20);
        --prOr: rgb(242, 79, 9);
        --prOr10: rgb(255, 70, 0, 0.1);
        --scRed: rgb(128, 222, 255);
        --hBlk: rgb(7, 14, 19);
        --nBlk:rgb(10, 24, 31);
        --eBlk:  rgb(24, 48, 64);
        --nWht: rgb(227, 227, 227);
        --hWht: rgb(255, 255, 255);
        --hWht10: rgb(255, 255, 255, 0.1);
        --dropW: 0px 0px 25px rgba(255, 255, 255, 0.3);
        --dropO: 0px 0px 25px rgba(255, 70, 0, 0.6);
        --pPd: 1em 10%;
        --scPd: 10%;
        --ten: 0.626em;
        --twenty: 1.25em;
        --thirty: 2rem;
        --fifty: 3.125em;
        --hunnid: 6.25em;
    }
    
    body{
        background-color: var(--nBlk);
    }

    li{
        margin: 1em;
    }

    li::marker {
        color: var(--prOr);
        font-size: 2rem;
    }


/*TROUBLESHOOTING*/

    .tRF{
        background-color: red;
    }

    .tRO{
        border: 3px solid red;
    }

    .tAF{
        background-color: aqua;
    }

    .tAO{
        border: 3px solid aqua;
    }

/*STYLES*/

    /*TEXT*/
        
        h1{ font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 200;
            font-size: 5rem;
            color: var(--prOr);
            text-align: center;
            letter-spacing: 2.5rem;
        }
        
        

        h2{ font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal;
            font-size: 2.5rem;
            color: rgba(255, 255, 255, 1);
            text-align: center;
        }

        h3{ font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 700;
            font-size: 2.5rem;
            color: var(--prOr);
            text-align: center;
        }

        h4{
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-size: 1.8rem;
            color: rgba(255, 255, 255, 1);
        }

        p {
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 1);
            line-height: 1.4;
        }
    
    /*BUTTONS*/
    
        .button-container {
            display: flex;
            justify-content: center;
            background: transparent;
            width: 100%;
            padding: var(--pPd);
            gap: var(--fifty);
        }

        .button-container-L {
            display: flex;
            justify-content: flex-start;
            background: transparent;
            width: 100%;
            padding: var(--pPd) var(--pPd) var(--pPd) 0;
            gap: var(--fifty);
        }


        .PrBtn {
            display: grid;
            grid-template-columns: auto auto;
            align-items: center;
            justify-items: space-between;
            border: 2px solid var(--prOr);
            padding: 0.8em 1.2em;
            background: var(--prOr10);
            box-shadow: var(--dropOo);
            transition: 0.3s ease;
        }

        .ScBtn {
            display: grid;
            grid-template-columns: auto auto;
            align-items: center;
            justify-items: space-between;
            border: 2px solid var(--hWht);
            padding: 0.8em 1.2em;
            background: var(--hWht10);
            box-shadow: var(--dropWw);
            transition: 0.3s ease;
        }
        
        .PrLabel {
            grid-column: 1;
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-size: 1.8rem;
            color:  var(--prOr);
        }

        .PrIcon {
        grid-column: 2;
        fill:  var(--prOr);
        height: 1.6rem;
        margin-left: 1.5em;
        }

        .PrBtn:hover {
            box-shadow: var(--dropO);
            background: transparent;
        }


        .PrBtn:active {
            fill: var(--nWht);
            color: var(--nWht);
            border-color: var(--nWht);
            box-shadow: var(--dropO);
        }

        .PrBtn:active .PrIcon,
        .PrBtn:active .PrLabel {
            fill: var(--nWht);
            color: var(--nWht);
        }

        .ScLabel {
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-size: 1.8rem;
            color: var(--hWht);
        }

        .ScIcon {
            fill: var(--hWht);
            height: 1.6rem;
            margin-left: 1.5em;
        }

        .ScBtn:hover {
            box-shadow: var(--dropW);
            background: transparent;
        }


        .ScBtn.active {
            fill: var(--prOr);
            color: var(--prOr);
            border-color: var(--prOr);
            box-shadow: var(--drop);
            background: transparent;
        }

        

        .ScBtn.active .ScIcon,
        .ScBtn.active .ScLabel {
            fill: var(--prOr);
            color: var(--prOr);
        }

        
        /* Download rotate on hover */

        .downloadicon {
            transition: transform 0.25s ease-in-out;
        }
    
        .ScBtn:hover .downloadicon {
            transform: rotate(90deg);
        }

        @media screen and (max-width: 992px){ 
            .PrIcon, .ScIcon {
            height: 1em;
            }

            .PrBtn {
                padding: 0.6em 0.8em;
            }
    
            .ScBtn {
                padding: 0.6em 0.8em;
            }

            .PrLabel, .ScLabel {
            font-size: 1.4rem;
            }
        

            h1{ 
                font-size: 3rem;
                letter-spacing: 1.5rem;
            }
            

            h2{ font-size: 2rem;
            }


            h3{ 
                font-size: 2rem;

            }

            h4{
                font-size: 1.4rem;
            }

            p {
                font-size: 1.2rem;
            }

            .button-container {
                gap: var(--thirty);
            }
        }

        @media screen and (max-width: 768px){ 
            .PrIcon, .ScIcon {
            height: 0.8em;
            }
            button {
            margin: 0.2em;
            padding: 0.1em 0.3em;
            }

            .PrLabel, .ScLabel {
            font-size: 1rem;
            }

            .PrBtn {
                padding: 0.4em 0.6em;
            }
    
            .ScBtn {
                padding: 0.4em 0.6em;
            }
        

            h1{ 
                font-size: 2rem;
                font-weight: 300;
                letter-spacing: 1rem;
            }
            

            h2{ font-size: 1.6rem;
            }


            h3{ 
                font-size: 1.8rem;

            }

            h4{
                font-size: 1.2rem;
            }

            p {
                font-size: 1rem;
            }

            .button-container {
                gap: var(--twenty);
            }
        }

        @media screen and (max-width: 400px){
            h1{ 
                font-size: 1.6rem;
                font-weight: 300;
                letter-spacing: 0.8rem;
            }

            h2{ font-size: 1.5rem;
            }


            h3{ 
                font-size: 1.6rem;

            }

            h4{
                font-size: 1rem;
            }

        }    



/*HEADER*/
    .header {
        display: grid;
        grid-template-columns: 2fr 2fr 6fr;
        align-items: center;
        gap: var(--ten);
        margin: none;
        
    }

    .header-skin{
        background-color: var(--eBlk);
        padding:var(--pPd);
    }

    .logo {
        grid-column: 1;
    }

    .img {
        height: 3em;
    }

    .img:hover {
        filter: drop-shadow(var(--dropW));
    }

    /* HAMBURGER */
        .hamburger-menu {
            grid-column: 3;
            cursor: pointer;
            justify-self: end;
            display: none;
        }

        /*The following class breaks when seperating skin and structure for OCCSS, due to how JS is set up*/
        .line {
            width: 30px;
            height: 3px;
            background-color: var(--hWht);
            margin: 8px 0;
            transition: transform 0.3s, opacity 0.3s;
        }

        .open .line:nth-child(1) {
            transform: translateY(10px) rotate(45deg);
        }

        .open .line:nth-child(2) {
            opacity: 0;
        }

        .open .line:nth-child(3) {
            transform: translateY(-12px) rotate(-45deg);
        }

    /*NAV*/
        .nav {
            grid-column: 3;
            display: grid;
            grid-template-columns: repeat(4, auto);
        }

        .nav a {
            text-decoration: none;
        }

        .nav a:hover {
            color: var(--prOr);
            text-shadow: var(--dropO);
        }

        .navItem {
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-size: 1.5rem;
            color: var(--hWht);
            text-align: end;
        }

/*HERO*/
    .hero{
        width: 100%;
        position: relative;
        padding-top: 56.25%;
        overflow: visible;
    }


    @media screen and (max-width: 768px){
        .hero-container h4{
            text-align: center;
        }

        .hero-container h1{
            margin: 0;
        }

    }

    .showreel{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;  
    }

    .showreel-skin{
        opacity: 0.15; 
    }

    .hero-container{
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 2em;
        width: 100%;
    }

/*CARDS*/
    .card-container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fifty);
        margin: 5% 10%;
    }

    .mgt{
        margin-top: 8em;
    }

    @media screen and (max-width: 1024px){
        .card-container{
            display: flex;
            flex-direction: column;
            align-items: center;
            row-gap: var(--thirty);
            width: 60%;
        }
    }

    
    .card-container h3, .card-container h1{
        grid-row: 1;
        grid-column: 1/4;
        text-align: center;
        margin-bottom: var(--ten);
    }
    
    .card{
        grid-row: 2;    
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        row-gap: var(--thirty);
        position: relative;
        overflow: visible;
        padding-bottom: 5em;
    }

    

    .gif{
        max-width: 100%;
        box-sizing: border-box;
    }

    .card p,
    .card button {
        opacity: 1;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        box-sizing: border-box;
    }

    .card img, 
    .card h2 {
        transition: transform 0.3s ease;
    }

    .card:hover img, 
    .card:hover h2 {
        transform: translateY(-20px);
        transition: transform 0.3s ease;
    }
    
    .card:hover p,
    .card:hover button {
        opacity: 1;
        transform: translateY(-40);
        transition: 0.3s ease;
    }

    

    /*The media query below is there so that the <p> text is not hidden on touchscreen devices or in browsers that do not support hover effects.*/
    @media (hover: hover) {
        .card p,
        .card button {
        opacity: 0;
        }

 
    }

/*SECTIONS*/

    section{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*The 2 classes below serve the purpose of being able to put Images on the right or left of a section*/
    .sectL{
        display: grid;
        grid-template-columns: 1fr 2fr;
        margin: 0% 10% 3em 10%;
        height: fit-content;
        align-items: center;
        column-gap: 4em;
    }

    .sectR{
        display: grid;
        grid-template-columns: 2fr 1fr;
        margin: 0% 10% 3em 10%;
        height: fit-content;
    }

    .sect-abt{
        display: flex;
        width: 100%;
        height: fit-content;
        margin: 0% 10% 3em 10%;
        align-items: flex-start;
    }

    .sect-1{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        margin: 0% 10% 3em 10%;
        align-items: flex-start;
    }


    .sect{
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0% 10% 3em 10%;
        height: fit-content;
        column-gap: 3em;
        align-items: start;
        justify-content: left;
    }

    .sect-3{
        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        margin: 0% 10% 3em 10%;
        height: fit-content;
        column-gap: 4em;
        align-items: center;
    }

    .sect-3-e{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0% 10% 3em 10%;
        height: fit-content;
        column-gap: 4em;
        align-items: start;
    }

    .sect-3-ec{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0% 10% 3em 10%;
        height: fit-content;
        column-gap: 4em;
        align-items: center;
    }

    .sect-brand{
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 3fr ;
        margin: 0% 10% 3em 10%;
        height: fit-content;
        column-gap: 4em;
        align-items: center;
    }

    /*only on large desktop monitors do these display nicely, on smaler screens the image and text are set to stack vertically*/
    @media screen and (max-width: 1220px) {
        .sectL, .sectR, .sect-3, .sect-3-e, .sect-brand, .sect {
            display: flex;
            flex-direction: column;
            row-gap: 1em;
        }
        
        .slider-slick-mini{
            width: 100%;
            height: auto;
            justify-self: center;
            padding-bottom: var(--scPd);
        }


        .sect-abt{
            display: flex;
            flex-direction: column;
            row-gap: 1em;
            padding-top: 3em;
        }
        .aboutImg{
            display: flex;
            justify-content: flex-start;
            padding-left: 3em;
            padding-right: 3em;
        }
        .aboutImg img{
            width: 100%;
        }
    }


    .sect-skin{
        background-color: var(--eBlk);
    }

    .txt-area{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        padding: 3em;
        row-gap: 1.5em;
        background-color: var(--eBlk);
    }

    

    .priv{
        padding: var(--scPd);
        margin: var(--pPd);
    }

    /*ABOUT*/
    .aboutImg img{
        height: 100%;
        object-fit: cover;
    }

    .aboutImg{
        display: flex;
        justify-content: flex-start;
        height: fit-content;
    }

    .aboutCard{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        padding: 5% 10% 5% 10%;
        row-gap: 1em;
    }

    .aboutBtn{
        display: flex;
        align-items: flex-start;
        width: 100%;
        padding-top: 1em;
    }
    .aboutBtn button{
        margin-right: var(--thirty);
        margin-bottom: var(--twenty);
    }

    @media screen and (max-width: 768px) {
        .sect-abt{
            display: flex;
            width: 100%;
            height: fit-content;
            margin: 0% 0% 0% 0%;
            align-items: flex-start;
        }

        .aboutBtn{
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            width: 100%;
        }

        .hero-container h1{
            font-size: 2.5rem;
        }

        .hero-container h2{
            font-size: 1.8rem;
        }

        .hero-container{
            row-gap: 0.5em;
        }
    }

/*PORTFOLIO PAGE*/
    .vid{
        width: 100%;
        height: auto;
    }

    .YTplayer{
        aspect-ratio: 16/9;
        width: 100%;
    }


    .h1{
        margin-top: 5em;
        margin-bottom: 3.5em;
        margin-left: 10%;
    }

    .h11{
        margin: 4em 10% 2em 10%;
    }

    .icons{
        width: 3.5em;
        height: auto;
    }
        
    .icons img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    @media screen and (max-width: 1220px) {
        .icons{
            width: 3em;
            height: auto;
        }

        
    }

    @media screen and (max-width: 768px){
        .icons{
            width: 2.5em;
            height: auto;
        }

        .h11{
            margin: 3em 10% 1.5em 10%;
        }
    }

    @media screen and (max-width: 400px){
        .icons{
            width: 2em;
            height: auto;
        }

        .h11{
            margin: 2em 10% 1em 10%;
        }
    }

    .slider-slick{
        width: 78vw;
        height: auto;
        justify-self: center;
    }

    .slider-slick-mini{
        width: 52.8vw;
        height: auto;
        justify-self: center;
    }


    .h1 h1, h3{
        text-align: left;
    }

    /*FILTER*/
        .fltrBtns{
            display: flex;
            flex-direction: row;
            width: 80%;
            height: fit-content;
            margin: 0% 10% 1.5em 10%;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        
        .fltrBtn {
            display: grid;
            grid-template-columns: auto; /* Single column initially */
            align-items: center;
            border: 2px solid var(--hWht);
            column-gap: 0.5em;
            padding: 0.8em 1.2em 0.8em 1.2em;
            margin-right: 2em;
            margin-bottom: 2em;
            background: var(--hWht10);
            box-shadow: var(--dropWw);
            transition: grid-template-columns 0.3s ease, padding 0.3s ease;
            position: relative; /* For positioning the SVG absolutely */
        }
        
        .fltrBtn svg {
            opacity: 0; /* Initially hidden */
            transform: translateX(-2em); /* Start off-screen */
            transition: opacity 0.3s ease, transform 0.3s ease;
            width: 1.5rem;
            height: auto;
            position: absolute; /* Take the SVG out of normal flow */
            right: 1.2em; /* Align to the right of the button */
            top: 50%; /* Center vertically */
            transform: translate(0, -50%); /* Combine off-screen and vertical centering */
            z-index: 1; /* Ensure it doesn’t overlap content */
        }
        
        .fltrBtn.active {
            grid-template-columns: auto auto; /* Expand to two columns when active */
            padding: 0.8em 3.4em 0.8em 1.2em;
        }
        
        .fltrBtn.active svg {
            opacity: 1; /* Fade in */
            transform: translate(0, -50%); /* Slide into place */
        }

        @media screen and (max-width: 768px){
            .fltrBtn {
                column-gap: 0.5em;
                padding: 0.5em 1em 0.5em 1em;
                margin-right: 1.5em;
                margin-bottom: 1.5em;
            }

            .fltrBtn.active {
                grid-template-columns: auto auto; /* Expand to two columns when active */
                padding: 0.5em 2.5em 0.5em 1em;
            }
        }
    
        @media screen and (max-width: 400px){
            .fltrBtn {
                column-gap: 0.5em;
                padding: 0.4em 0.8em 0.4em 0.8em;
                margin-right: 1.5em;
                margin-bottom: 1em;
            }

            .fltrBtn.active {
                grid-template-columns: auto auto; /* Expand to two columns when active */
                padding: 0.4em 2.5em 0.4em 0.8em;
            }
        }
        

        /* Default visibility */
        .project {
            display: block;
        }
        /* Hidden sections */
        .project.hidden {
            display: none;
        }

    /*blender*/

    .blend-img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .img-div{
        display: flex;
        align-items: flex-end;
    }


    .stack{
        display: flex;
        column-gap: 1em;
        justify-content: left;
        padding-top: 1em;
    }



    /*UE*/

    .iframe{
        width:100%;
        min-height: 500px;
    }

    .iframe2{
        width:100%;
        min-height: 80vh;
    }


    /*CV*/
    .CV{
        width: 80%;
        display: grid;
        grid-template-columns: 2fr 1fr 9fr;
        grid-template-rows: auto;
    }


    .time{
        display: flex;
        grid-column: 1;
        text-align: right;
        padding: 1em;
        align-items: center;
        justify-content: right;
    }

    .t-line{
        display: flex;
        grid-column: 2;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    

    .place{
        display: flex;
        flex-direction: column;
        grid-column: 3;
        padding: 1em;
        align-items: start;
        justify-content: center;
    }

    .p-place{
        margin-top: 0.5em;
    }

    .time-line{
        display: flex;
        left: 50%;
        height: 100%;
        width: 2px;
        background-color: var(--prOr);
    }

    .time-dot{
        display: flex;
        position: absolute;
        background-color: var(--prOr);
        height: 0.6em;
        width: 0.6em;
        z-index: 1;
        transition-duration: 250ms;
    }

    .t-line:nth-child(2) {
        height: 50%;
        align-self: flex-end;
    }

    .t-line:nth-child(2) .time-dot:nth-child(2) {
        align-self: start;
        height: 1em;
        width: 1em;
    }

    .t-line:hover .time-dot{
        transform: rotate(-45deg) scale(2);
        transition-duration: 250ms;
    }

    

/*FOOTER*/

    .footer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: var(--eBlk);
        padding: 1em 10%;
        width: 100%;
    }

    /*Made this to reset global <p> margins I defined above for the footer*/
    #p{
        color: var(--prOr);
        text-decoration: underline;
    }

    .social{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 4em;
        padding: 0;
        
    }

    footer svg:hover {
        filter: drop-shadow(0px 0px 10px rgba(255, 70, 0, 0.8));
    }

    footer svg {
        width: 4em;  
        height: auto;  
        padding: 0.8em;
    }

    @media screen and (max-width: 768px){
        .footer{
            flex-direction: column;
        }
        #p{
            padding: 1em;
        }
    }

/*GENERAL MEDIA QUERIES*/    

    @media screen and (max-width: 992px) {
        .header {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;
        }
        /*For Hamburger to show up on smaller screens*/
        .hamburger-menu {
            display: block;
        }
        /*Mobile dropdown nav styling*/
        .nav {
            grid-row: 2;
            display: none;
            grid-template-columns: 1fr;
            height: 60vh;
            padding-top: 2em;
        }
    }