/* GENERAL DEFAULTS */
:root {
  --dark:#1c1c1c;
  --light:#FFFCF1;
  --neon:#E3FF43;
  --blue:#0177EB;
  --teal:#6EE9FF;
  --magenta:#E321E6;
  --pink:#EA81FA;
  --purple: #8800FF;
  --fontblack: 900;
  --fontextra: 800;
  --fontbold: 700;
  --fontsemi: 600;
  --fontmed: 500;
  --fontreg: 400;
  --fontlight: 300;
  --fontexlight: 200;
  --techy: "Space Mono", monospace;
  --classy: "Source Serif 4", serif;
}
* {
  box-sizing: border-box;
  scrollbar-color: #e3ff43a7 transparent;
}
@supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) { 
    html {
        scrollbar-gutter: stable;
    }
}
html {
  scroll-behavior: smooth;
}
body{
    margin:0;
    background-color: var(--dark);
    color:var(--light);
    font-family: var(--techy);
    scrollbar-gutter: stable;
}
h1,h2,h3,h4,p,span{
   font-optical-sizing: auto;
}
a{
    text-decoration: none;
      color:var(--fontlight);
}
.active {
    color:var(--neon);
    text-decoration: underline;
}
.intextlink {
    text-decoration: underline;
    color:var(--teal);
}

/*=============================================HOME CONTENT LAYOUT=============================================*/

.home-container {
    display: grid;
    grid-template-areas:
        "nav nav"
        "projects intro" 
        "projects contact"
        ;
    grid-template-columns: 2fr 1fr;
    width:100vw;
}
.projects, .intro, .contact {
    padding: 20px 30px;
}
.mainnav {
    height:7vh;
    grid-area: nav;
    border: solid 1px var(--light);
}
.project {
    height:93vh;
    grid-area: projects;
    overflow: auto; 
    border-right: solid 1px var(--light);
    border-left: solid 1px var(--light);
    border-bottom: solid 1px var(--light);
}
.intro {
    height:62vh;
    grid-area: intro;
    border-right: solid 1px var(--light);
    border-bottom: solid 1px var(--light);
}
.contact {
    height: 31vh;
	grid-area: contact;
    border-right: solid 1px var(--light);
    border-bottom: solid 1px var(--light); 
}
/*=============================================NAVIGATION=============================================*/
.mainnav nav{
    display:flex;
    align-items: center;
    width:100%;
    height:100%;
    padding: 0 30px;
}
.mainnav nav a {
    padding: 10px;
    margin: 0 5px 0 5px;
    font-weight: bold;
    font-size: clamp(14px, 1.1vw, 1.5vw);
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.mainnav a:hover{
    color: var(--magenta);
    background-color: var(--neon);
}


/*=============================================PROJECTS=============================================*/
.projects-container{
    margin-top: 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.projectfile{
    will-change: transform;
    margin: 15px;
    height:40vh;
    width:30vw;
    font-family: "Source Serif 4", serif;
    background-color: var(--light);
    clip-path: polygon(
        50% 0%, 
        100% 0%, 
        100% 100%,
        0% 100%,
        0% 8%, 
        45% 8%, 
        50% 0% 
    );
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.projectfile:hover {
    transform:rotate(-1deg);
    box-shadow:inset 30vw 0 var(--neon);
    
}
.projectfile:hover .project-label{
    background-color: var(--dark);
    color: var(--light); 
    border: solid 2px var(--magenta); 
}
.project-top {    
    display: flex;
    justify-content: flex-end;      
}
.project-label {
    padding: 7px 10px;
    width:11vw;
    color:white;
    font-size: clamp(8px, 0.75vw, 1.1vw);  
}
.int{
    background-color: var(--purple);  
}
.exp{
    background-color: var(--magenta);
}
.learn{
    background-color: var(--blue);
}

.project-main img{
    height: 37vh;
    width: 100%;
    object-fit: cover;
    filter: brightness(90%);
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.projectfile:hover .project-main img {
    filter: brightness(108%);
    zoom:106%;
    box-shadow: 10px 10px var(--neon); 
}
.project-title{
    margin:0;
    color:#1c1c1c;
    font-style: italic;
    font-size: clamp(2.2vw, 2.2vw, 5vw);
    font-weight: var(--fontexlight);
    padding: 3%;
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.projectfile:hover .project-title{
    color: var(--magenta);
    text-decoration: underline;
    font-weight: var(--fontreg);
}
.inprogress{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24vh;
    font-size: 2.8vw;
    font-weight: var(--fontexlight);
    font-style: italic;
    color: var(--dark);
    background-color: #cfcfcf;
}
/*=============================================INTRO=============================================*/
.intro-container {
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.intro h1, .intro p{
    padding: 0 3vw;
}
.intro h1{
    margin: 0;
    font-family: var(--classy);
    font-weight: var(--fontblack);
    font-size: clamp(60px, 3.8vw, 8vw);
    color:var(--neon);
}
.intro p{
    font-size: 1.8vh;
    line-height: 3.2vh;
}
.intro-container p:last-child {
    margin: 10px 0 0 0;
    padding-bottom: 3%;
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.intextlink-home {
    text-decoration: underline;
    color:var(--teal);
    font-family: var(--classy);
    font-weight: var(--fontreg);
    font-style: italic;
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.intextlink-home:hover{
    background-color: var(--neon);
    color: var(--magenta);
    font-weight: var(--fontsemi);
    padding: 10px;

}

/*=============================================CONTACT=============================================*/
.contact-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
}
.email, .socials{
      padding:0 28px;
      transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.icon{
    height: 62px;
    width: 62px;
    border: solid var(--light) 5px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#email {
    margin-top: -25px;
    width: 0;
    height: 0;
    border-left: solid transparent 30px ;
    border-right: solid transparent 30px ;
    border-top: solid var(--light) 30px ;
}
#youtube{
    width: 0;
    height: 0;
    border-top: solid transparent 10px;
    border-left: solid var(--light) 18px;
    border-bottom: solid transparent 10px;
}
.li{
    font-weight: var(--fontbold);
    font-size: clamp(24px, 32px, 1.8vw);
}
.email a, .socials a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contact-label {
    font-family: "Source Serif 4", serif;  
    font-style: italic;
    padding-top:8px;
    font-size: clamp(11px, 1vw, 1.6vw);
    font-weight: var(--fontsemi);
}
.email:hover, .socials:hover{
    transform: translateY(-10px);
}
#copyright{
    font-size: 11px;
}

/*
=====================================================================================
========================================= [ MEDIA QUERIES ] =========================
=====================================================================================
*/

@media (orientation: portrait) {
    .home-container {
        grid-template-areas:
            "nav"
            "intro"
            "projects" 
            "contact"
            ;
        grid-template-columns: 1fr;
    }
    .projects, .intro, .contact {
        padding: 0;
    }
    .project-title {
       font-size: 5.5vw;
    }
    .intro-container p:last-child {
        margin: 0;
    }
    .intro-container {
        padding: 3% 5%;
    }
    .intro {
        height:fit-content;
    } 
    .intro,.contact {
        border-left: solid var(--light)1px;
    }        
}

@media (orientation:portrait) and (max-width:600px){
  
    .project {
        height:39vh;
        overflow-y: hidden;
    }
    .intro{
        height:50vh;
    }
   
     .contact{
       height:18vh; 
    }
    .projects-container{
       flex-wrap: nowrap; 
       width:fit-content;
    }
    .projectfile {
        height:32vh;
        width:75vw;
        position: relative;
    }
    .projectfile:hover {
        box-shadow:inset 75vw 0 var(--neon);    
    }
    .projectfile:last-child, .projectfile:nth-child(5) {
        display:none;
    }
    .project-top {
        position: absolute;
        z-index:1;
        bottom: -1px;
        right: 0;
    }
    .project-title{
        padding-top:4vh;
    }
    .project-label{
        width:75vw;
        text-align: center;
        font-size: 4vw;
    }   
     
}
@media (orientation: portrait) and (max-width: 700px) {
        .intro h1 {
            font-size: 4vh;
        }
}
@media (orientation: landscape) and (max-width: 1440px) {
    .intro h1, .intro p {
        padding: 0 1.5vw;
    }
    .intro h1{
        font-size: 4.5vw;
    }
}

@media (orientation: landscape) and (max-height: 720px) {
.mainnav {
        width: 100vw;
        height: fit-content;
    }
  .project {
        height:fit-content;
        overflow-y: hidden;
    }
    .projects-container{
        margin-top: 2%;
       flex-wrap: nowrap; 
       width:fit-content;
    }
    .project-main {
        margin-top: 15px;
    }
    .projectfile {
        height:fit-content;
        width:50vw;
        position: relative;
    }   
    .projectfile:hover {
        box-shadow:inset 55vw 0 var(--neon);    
    }
    .projectfile:last-child, .projectfile:nth-child(5) {
        display:none;
    }
    .project-top {
        position: absolute;
        z-index:1;
        bottom: -1px;
        right: 0;
    }
    .project-title{
        font-size: 4vw;
        padding-top:4vh;
    }
    .project-label{
        width:55vw;
        text-align: center;
        font-size: 3.5vw;
    }    
    .home-container{
        grid-template-areas:
        "nav     " 
        "intro   " 
        "projects" 
        "contact ";
        grid-template-columns: 1fr;
  }
  .intro {
    height: fit-content;
    padding-bottom: 0;
  }
    .intro h1 {
    font-size: 9vh;
  }
    .intro p {
    font-size: 1.8vw;
    line-height: 3.2vw;
  }
}


@media (orientation: portrait) and (min-width:600px) and (min-height:1024px){
    .intro {
        height:40vh;
    }
    .intro p, .intextlink-home{
        font-size:2.5vw;
        line-height: 2.5vh;
    }
    .intro h1{
        font-size:8vw;
    }  
    .project {
        height:39vh;
        overflow-y: hidden;
    }
    .intro{
        height:38vh;
    }
     .contact{
       height:18vh; 
    }
    .projects-container{
       flex-wrap: nowrap; 
       width:fit-content;
    }
    .projectfile {
        height:32vh;
        width:75vw;
        position: relative;
    }
    .projectfile:hover {
        box-shadow:inset 75vw 0 var(--neon);    
    }
    .projectfile:last-child, .projectfile:nth-child(5) {
        display:none;
    }
    .project-top {
        position: absolute;
        z-index:1;
        bottom: -1px;
        right: 0;
    }
    .project-title{
        padding-top:4vh;
    }
    .project-label{
        width:75vw;
        text-align: center;
        font-size: 4vw;
    }
}

@media (orientation:portrait) and (min-height:1921px){
    .mainnav {
        height: 4.5vh;
    }
    .mainnav nav a {
        font-size: 1.6vw;
    }
    .email, .socials{
      padding:0 58px;
    }
    .icon{
        height: 8vw;
        width: 8vw;
        border: solid var(--light) 8px;
        border-radius: 14px;
    }
    #email {
        margin-top: -4vw;  
        border-left: solid transparent 3.6vw;
        border-right: solid transparent 3.6vw;
        border-top: solid var(--light) 3.6vw;
    }
    #youtube {       
        border-top: solid transparent 1.5vw;
        border-left: solid var(--light) 3vw;
        border-bottom: solid transparent 1.5vw;
    }
    .li{
        font-size: 4vw;
    }
    .contact-label {
        font-size: 1.8vw;
    }
}
@media (orientation: landscape)and (max-width:1199px) and (min-height:721px) {
    .projectfile {
        height: 45vh;
        width: 70%;
    }
    .projectfile:hover {
        box-shadow:inset 50vw 0 var(--neon);
    }
}
@media (orientation: landscape)and (min-height:1440px) {
.mainnav nav a {
  font-size: 0.8vw;
}

   .email, .socials{
      padding:0 58px;
    }
    .icon{
        height: 4vw;
        width: 4vw;
        border: solid var(--light) 8px;
        border-radius: 14px;
    }
    #email {
        margin-top: -2vw;  
        border-left: solid transparent 1.7vw;
        border-right: solid transparent 1.7vw;
        border-top: solid var(--light) 1.7vw;
    }
    #youtube {       
        border-top: solid transparent 0.8vw;
        border-left: solid var(--light) 1.6vw;
        border-bottom: solid transparent 0.8vw;
    }
    .li{
        font-size: 2.4vw;
    }
    .contact-label {
        font-size: 1vw;
    }

}