:root{
    --uihighlight:#f67300;
    --quicknav-icons-hover:#0062ff;

    --placeholder-bg: var(--uihighlight);
    --body-text-color:#444444;
    --darkmode-uihighlight:#ffffef;


}

@font-face {
    font-family: 'Overpass';
    src: url(fonts/overpass.woff2);
}

html{
    scroll-behavior: smooth;
}
body {
    margin:0 auto;
    min-height: 100vh;
    scroll-behavior: smooth;
    background-color:rgb(250, 249, 238);
    background-color:#fffff8;
    color:var(--body-text-color);
    font-family:'Overpass', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:16px;
}

/* Default text styles */
h1{
    font-size: 3rem;
    font-weight: normal;
    margin: 0.4em 0em;
}
h2, .h2{
    font-size:1.5em;
    font-weight:bold;
 }

h3{
    font-size:1.3em;
}


li,p{
    font-size:1.1em;
}


a{
    color:var(--body-text-color);
    text-decoration: underline;

}
a:hover{
    color:var(--uihighlight);
}

blockquote,
figure{
    margin:0;
}



/* page section setup */

.intro-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
} 

.outro-section,
.intro-section{
    min-height:100vh;
}



.panels-section,
.site-section{
    padding:30px;
    max-width:1140px;
    margin:0 auto;
}
/* Scroll panels container  */
.panels-section{
    margin-left:auto;
    margin:0 auto;
}





/* Intro + outro Main site nav   */

.main-nav{
    padding:0;
    margin:0;
    list-style: none;
    margin:60px auto; 
    transition:all 0.2s ease-in-out 0.1s;
}


.main-nav li{
font-size:1.8em;
line-height:1.8;
font-weight: 300;
}
.main-nav .nav-link{
    display:inline-block;
    position:relative;
    z-index: 100;
    padding:2px 16px;
}



.main-nav a:hover{   
     transition:all 0.2s ease-in-out 0.1s;
     color:white;
     text-decoration: none;
}

.main-nav .nav-link::before {
    background: var(--uihighlight);
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    z-index: -1;
  }
  
  .main-nav .nav-link:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }


.main-nav li .nav-image-link:hover{
    transform:scale(1.1);
}




blockquote{
font-weight: bold;
font-size: 2.5em;
color: var(--uihighlight);
padding:15px;
text-align: center;
}
figcaption{
    text-align:center;
    width: 50%;
    margin:auto;
    margin-top:30px;

    position: relative;
}
figcaption::before{
    position: absolute;
    width:20%;
    height:3px;
    background-color:var(--uihighlight);
    content:"";
    top:-15px;
    left:40%;

}


.nav-image-link{
    display:inline-block;
    background-color:var(--placeholder-bg);
    width:100%;
    min-width:200px;
    max-width:240px;
    min-height:1em;
    max-height:3em;
    text-transform: uppercase;
    color:#ccc;
    box-sizing: border-box;
    margin:10px;
    border:1px solid #e8e8e8;   
    overflow:hidden;
    position:relative;
    bottom: -0.5em;

}
  
.nav-image-link img{
    width: 100%;
    height: auto;
    vertical-align: middle;
    padding: 0;
    margin: 0 auto;
}    



.hey-scrolldown-arrow {
	width: 0;
	height: 40px;
	border-width: 1px;
    border-style: solid;
    border-color:var(--uihighlight);
	position: relative;
	animation: scroll 1.5s infinite;
	-webkit-animation: scroll 1.5s infinite;
}
.hey-scrolldown-arrow::after {
		content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: -5px;
    width: 1px;
    height: 10px;
		
		/* // triangle */
    border-top-width: 10px;
    border-top-style:solid;
    border-top-color:var(--uihighlight);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
	}




@keyframes scroll {
	0% {
		height: 40px;
	}
	30% {
		height: 70px;
	}
	60% {
		height: 40px;
	}
}

@-webkit-keyframes scroll {
	0% {
		height: 40px;
	}
	30% {
		height: 70px;
	}
	60% {
		height: 40px;
	}
}



/*Scroll panel project structure setup

project-section
    > section info
        >project info 
            h3 + DESC
    > section-visuals
        > visuals-stack
            >IMGS + VIDEOS + TEXT

*/

.section-info{
    margin:0;
    padding:0;
    display:block;
    position: absolute;
    max-width: 250px;
}

.project-info{
    /*Block for title and content -*/
    display:block;
}
    

.section-visuals{
    padding-left:30%;
    max-width:65%;
    padding-right:5%;
    padding-bottom:60px;
}




/* Project visuals stack  - fade in, slide in from right on scroll trigger */


.visuals-stack img{
  /* default full width image with round corners */
    width:100%;
    border-radius: 40px;
}

.visuals-stack.no-round-corners img{
border-radius:0;
}


/* fake browser header frame */

 img.browser-frame{
    background-image:url("./images/Browsersbrowesertop.png");
    padding: 31px 0px 40px 0px;
    background-position: 0px 0px;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius:0px;
}

.visuals-stack video{
    width:100%;
    /* responsive video container */
}

.visuals-stack{
    /*scroll trigger class - default view*/
    opacity: 1;
    transform:translateX(0px);
    transition: all 0.3s ease-in-out 0.1s;
} 


.scrollmagic-init .visuals-stack{
    /* default scrollmagic view  on load*/
    opacity: 0;
    transition: all 0.2s ease-in-out 0.2s;
    transform:translateX(40px);
    padding-bottom:60px;
    overflow:hidden;
}

.scrollmagic-init .in-view{
    /*scroll trigger class - scrollmagic in view state*/
    opacity: 1;
    transform:translateX(0px);
    transition: all 0.3s ease-in-out 0.1s;
} 










/*Mini nav links */


.nav{

}

.nav-home{
   position:fixed;
    top:50px;
    left:50px;
    font-size:40px;
opacity: 0;
z-index: 1000;

}
.nav-mail{
    position:fixed;
     top:50px;
     right:50px;
     font-size:40px;
 opacity: 0;
 z-index: 1000;
 
 }


.nav-next{
    position:fixed;
     bottom:50px;
     right:50px;
     font-size:15px;
    opacity: 0;
    z-index: 1000;
 }
.back-link{
    width: 50px;
    display: block;
    height: 50%;
}
.mail-link{
    width: 50px;
    display: block;
    height: 50%;
}
.back-arrow{
    /* fill:var(--uihighlight); */
    width: 100%;
    height: auto;
    display: block;
}
.next-arrow{
    /* fill:var(--uihighlight); */
    width: 100%;
    height: auto;
    display: block;
}
.envelope{
        /* fill:var(--uihighlight); */
        width: 100%;
        height: auto;
        display: block;
}
.next-project-link{
    width: 50px;
    display: block;
    height: 50%;
    text-align:right;
    
}



.nav-scroll{
   position:fixed;
     bottom:50px;
     left:50%;
     font-size:15px;
    z-index: 1000;
}





.nav-home a:hover ,
.nav-mail a:hover,
.nav-next a:hover {
    color:var(--uihighlight);

}


.nav-home a:hover svg,
.nav-mail a:hover svg,
.nav-next a:hover svg{
    fill:var(--uihighlight)!important;
}


/* pinned titles spacer */
.stickyspacer{
    width:30%;
}
.stickyspacer .section-info{
    width:100%;
} 



/* content styles */

.columns{
column-rule-width: 2px;
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
list-style:none;
margin:0 auto;
padding:0;

}
.columns li{
padding:0;
margin-bottom:5px;
}




.loud{
    font-size: 1.4em;
    line-height: 1.3;
    margin-top: 0.5em;
}
 .louder{
    font-size: 3em;
    line-height: 1.3;
    font-weight:bold;
}



.scrollmagic-init .visuals-stack.in-view.iso-stack,
.iso-stack{
    overflow:visible;
    position:relative;
    margin-bottom:200px;
    height:40vh;
}

.iso-stack img.browser-frame{
    background-size:100% auto;
}

.iso-stack img{
    width:50%;
    position: absolute;
    padding-top:11px;
    padding-bottom: 0;
    box-shadow: 17px 11px 19px #2d2d2da8;
}


.iso-stack img:nth-child(4){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(-0%, 120%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(-0%, 120%);}
.iso-stack img:nth-child(3){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(30%, 60%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(30%, 60%);}
.iso-stack img:nth-child(2){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(70%, 30%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(70%, 30%);}
.iso-stack img:nth-child(1){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(100%, 0%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(100%, 0%);}






.iso-stack-quantized{
    height:90vh;
    overflow:visible!important;
}
.iso-stack-quantized img{
    width:50%;
    position: absolute;
    padding-top:11px;
    padding-bottom: 0;
    box-shadow: 17px 11px 19px #2d2d2da8;
    transform: rotateY(15deg) skew(0deg, 10deg);
}

.iso-stack-quantized img:nth-child(8){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(0%, 100%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(0%, 100%);}
.iso-stack-quantized img:nth-child(7){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(12.5%, 85%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(12.5%, 85%);}
.iso-stack-quantized img:nth-child(6){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(25%, 65%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(25%, 65%);}
.iso-stack-quantized img:nth-child(5){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(37.25%, 50%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(37.25%, 50%);}
.iso-stack-quantized img:nth-child(4){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(50%, 37%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(50%, 37%);}
.iso-stack-quantized img:nth-child(3){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(65.5%, 25%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(65.5%, 25%);}
.iso-stack-quantized img:nth-child(2){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(85%, 12%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(85%, 12%);}
.iso-stack-quantized img:nth-child(1){
    transform: rotateY(15deg) skew(0deg, 10deg) translate(100%, 0%);
    -webkit-transform: rotateY(15deg) skew(0deg, 10deg) translate(100%, 0%);}


.iso-stack-quantized img:nth-child(6){transform: rotateY(15deg) skew(0deg, 10deg) translate(25%, 75%); box-shadow:none;}



.important-links{
    text-align: center;
}



.important-links a {
margin-bottom:15px;
    display:block;
}

.important-links a:hover svg {
    fill:var(--uihighlight);
}

.important-links svg{
    margin-right:10px;
}


/*pagespecific overrides*/


.intro-large-header-image{
    width:auto;margin:0 auto;
    height:30vh;
}


.intro-with-image{
    display:flex;
    flex-direction:row;
}
.project-header-image{
    flex-basis:50%; 
    flex-shrink:1;
    display:flex;
    align-items: center;

}

.mobileintroimage{
    margin:0 auto;
    width:70%;
}


.intro-with-image .project-desc {
    padding: 0px 30px;
}


.sass-snippet{
    border-radius:5px;
    background-color:#acacac73;
    padding:10px;
}


/* Easy UI Darkmode switching */
@media (prefers-color-scheme: dark) {
    body{
    background-color:rgb(43 47 47);
    color:var(--darkmode-uihighlight);
    }
    a{
        color:rgb(246, 247, 241);

    }
    .next-project-link,
    .back-arrow,
    .next-arrow{
    fill:var(--darkmode-uihighlight);
    }

    a:hover{
        color:var(--darkmode-uihighlight);

    }



    .hey-scrolldown-arrow:after{
        border-top-color:var(--darkmode-uihighlight);

    }
    .hey-scrolldown-arrow{
        border-color:var(--darkmode-uihighlight);
    }

    .important-links svg{
        fill:var(--darkmode-uihighlight);
    }


}



@media  (max-width:900px) {
    body{
    }

 
    .section-info,
    .section-visuals{
        max-width:100%;
        width:100%;
        padding:0;
    }


    h1{
        font-size:2em;
    }
    p{
        font-size:1.1em;
    }

    
    .section-info{
        position:relative;
        padding-bottom:20px;
        display:block;
    }

    .visuals-stack {
        margin: 30px auto;
    }    

    .project-section{
        margin: 60px auto;
    }


    img.browser-frame{
        padding-top:4%;
    }


    .louder{
        font-size:2.5rem;
    }
    .loud{
        font-size:1.3rem;
    }
    .hey-scrolldown-arrow {
    display:none;
    }



    .columns{
        column-rule-width: 2px;
        column-count: 2;
        
    }
    .columns li{
        margin-bottom:12px;
    }
    .intro-with-image .project-desc{
        padding:30px 0px;
    }
    

.nav-home,
.nav-mail,
.nav-next,
.nav-scroll{
    position: relative;
    display:none;
}




blockquote{
    font-size: 1.5em;

}
figcaption{
    width:100%;
}


.intro-with-image{
    display:flex;
    flex-direction:column-reverse;
}

}


@media  (max-width:600px) {

p {
    line-height: 1.6;

}

    .visuals-stack img{
        border-radius:15px;

    }
    .columns{
        column-rule-width: 0px;
        column-count: 1;
        list-style: disc;
        padding-left:20px;
    }
    .columns li{
        margin-bottom:12px;

    }

    .main-nav li{
        font-size:1.4em;
        padding:30px 0px;
        text-align: center;
    }


    .visuals-stack{
        margin: 70px auto;
    }
    .project-section{
        margin: 100px auto;
    }

}