main{
    z-index: 0;
}




.hero{
    display: block;
     
} 




/* ----------------------- */
/*----- HERO SECTION-------*/
/* ----------------------- */



/* --------------------- */
/* -----NAME BLOCK----- */
/* --------------------- */



/* ----MOBILE FORMATTING---- */

.desktop-img{
    display: none; 
    width: 100%;
    height: auto;
}
.mobile-img{
    display: block;
    width: 100%;
    height: auto;
}
.name-block{
    position: absolute;
    top: 28vw;
    left: 5vw;
    width: 90vw;
    height: 30vw;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: left;

    font-family: code_mono;

    z-index: 1;
    /* border: 1px solid white; */
}

.name-block h2{
    font-size: 2vw;
    letter-spacing: 1vw;
    font-weight: 380;
    opacity: .5;
    line-height: 4.2vw;
    


    /* border: 1px solid white; */
}

.name-block h1{
    font-size: 7.6vw;
    letter-spacing: 3.8vw;
    font-weight: 420;
    line-height: 8vw;

    padding: .4rem 4.6vw;
    flex-grow: 2;

    /* border: 1px solid white; */
}

#initials{
    font-size: 4vw;
    letter-spacing: 8vw;
}

.header-links{
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: fit-content;
}

.name-block h3{
    padding: .8rem;
    font-size: 1.2rem;
    text-align: center;
    opacity: .4;


    /* border: 1px solid white; */
}

.name-block h3:hover{
    opacity: .8;
}

/* ----DESKTOP FORMATTING---- */

@media screen and (min-width: 640px) {
    .desktop-img{
        display: block;
    }
    .mobile-img{
        display: none;
    }

    #hero-bg{
        width: min(100vw,2400px);
        margin: auto;

        /* border: 1px solid white; */
    }

    .name-block{
        position: absolute;
        top: 12.5vw;
        left: max(6vw , calc(50vw - 1000px));
        width: min(40vw , 1000px);
    
        display: flex;
        flex-direction: column;
        height: auto;
        flex-wrap: nowrap;
        justify-content: left;
    
        font-family: code_mono;


        @media(min-width: 1440px){
            /* left: 8vw; */
            top: min(10vw , 200px);
        }
    
        /* border: 1px solid white; */
    }
    
    .name-block h2{
        font-size: min(1.1vw , 1.6rem);
        letter-spacing: min(0.8vw , 1.2rem);
        font-weight: 360;
        opacity: .5;
        line-height: min(3.2vw , 4.3rem);
    
    
        /* border: 1px solid white; */
    }
    
    .name-block h1{
        font-size: min(3.6vw , 4.6rem);
        letter-spacing: min(3.6vw , 5.5rem);
        font-weight: 400;
        line-height: min(5.6vw , 7rem);
    
        padding:0;
        padding-left: min(2.6vw , 5rem);
        padding-top: 1rem;
        padding-bottom: 1rem;


        @media(min-width: 1024px){
            font-weight: 450;
        } 

        @media(min-width: 1440px){
           font-weight: 540;   
        }
    
        /* border: 1px solid white; */
    }
    
    #initials{
        font-size: min(2.2vw , 3rem);
        letter-spacing: min(6vw , 7.2rem);
    }

    .name-block h3{
        text-align: left;
        padding: min(1vw , 1.6rem);
        padding-left: min(3vw , 5rem);
        font-size: min(1.8vw , 2rem);
        opacity: .25;

        /* border: 1px solid white; */
    }

    .name-block h3:hover{
        opacity: .8;
    }
    
}










/* ----------------------- */
/*------IMAGE BLOCK -------*/
/* ----------------------- */


/* MOBILE FORMATTING */

.nirmal{
    position: absolute;
    overflow: hidden;
    top: 60vw;

    
    display: flex;
    flex-direction: row; 
    justify-content: center;
    
    z-index: 1;

    padding: 0 .5rem;
    /* padding-bottom: 1rem; */

    @media (max-width:640px){
        padding-bottom: 1.2rem;
    }

    /* border: 1px solid white;/ */
}

.nirmal .mobile-img{
    /* position: relative; */
    width: 50%; 
    filter: drop-shadow(-6px 6px 5px rgba(0,0,0,.03));

    @media (max-width:640px){
        &:hover{
            transition: all .6s ease-out;
            filter: drop-shadow(-12px 12px 5px rgba(0,0,0,.4));
            scale: 1.01;
        }
    }

    /* border: 1px solid white; */
}

.description{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 45%;

    padding-left: 1rem;
   

    /* border: 1px solid red; */
}

.description ul{
    list-style: none;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    padding:0 .8rem;
    
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: -8px 8px 7px rgba(0, 0, 0, .15);
    
    height: 89%;
    

    @media (max-width:640px){
        &:hover{
            transition: all .6s ease-out;
            scale: 1.01;
            backdrop-filter: blur(18px);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: -13px 13px 10px rgba(0, 0, 0, .6);
        }
    }
    /* border: 1px solid green; */
}


.description li{
    

    font-family: code_mono;
    font-size: .64rem;
    /* letter-spacing: 1px; */
    font-weight: 500;
    /* text-align: center; */

    /* border: 1px solid white; */
}




/* DESKTOP FORMATTING */
@media screen and (min-width: 640px) {
    
    .nirmal{
        width:min(55vw , 960px);
        right:max(3vw , calc(50vw - 950px));
        top: 10vw;
      
        justify-content: space-between;

        @media(min-width: 1440px){
            /* left: 8vw; */
            top: min(8vw, 190px);
        }

        /* border: 1px solid white; */
    }

    .nirmal .desktop-img{
        width: 56.5%;

        /* border: 1px solid green; */
    }

    .description{
        padding-left:0;
        width: 40%;

        @media(min-width: 1024px){
            /* padding-left: 1.4rem; */
        }

        @media(min-width: 1440px){
            /* padding-left: 2rem; */  
        }

        /* border: 1px solid red; */
    }

    .description ul{
        padding: 0 0 0 min(1.6vw , 2rem)  ;

      /* border: 1px solid gold; */
    }

    .description li{
        font-size: min(0.9vw , 22px);
        padding: min(1vw,15px) 0;
    }

    .description li:hover{
        transition: all .3s;
        font-size: 1vw;
        font-weight: 630;
    }
}











/* ------------------*/
/*---- ABOUT ME---- */
/* ------------------*/

/* MOBILE FORMATTING */

.about{
    width: 90vw;
    margin: auto;
    padding: 1.6rem 0;
    /* border: 1px solid wheat; */
}

.about h2{
    font-family: code;
    font-size: 1.3rem;
    color: var(--primary_accent);
    letter-spacing: .5rem;
    padding: 3vw 0;

}

.about > p{
    font-family:louis;
    font-size: 1.1rem;
    line-height: 1.8rem;
    text-align: justify;
}

.about > p > span{
    display: none;
}

.about>p>a{
  opacity: 0.3;
  /* border: solid 1px white; */
  display: block;
  margin-top: .5rem;
  /* padding:0.4rem; */
  font-size: 1rem;
  cursor: grab;
  /* text-align: center; */
  /* border: 2px solid #f5f5f533; */
  border-radius: 5px;
  font-family: code_mono;
}

.about>p>a:hover{
  text-decoration: underline;
  opacity: 0.6;
  /* border: 4px solid #f5f5f577; */

}

#design{
  margin-top: 1rem;;
}




/* DESKTOP FORMATTING */

@media screen and (min-width: 640px) {

    .about{
        width: min(80vw , 2250px);
        padding: 0 ;
    }


    .about > h2{
        padding: 1vw 0;
        font-size: min(1.8vw,2.5rem);

    }

    .about > p{
        font-family:louis;
        font-size: min(1.39vw,2rem);
        line-height: min(1.75vw,2.8rem);
        text-align: justify;
    }

    .about>p>a{
      font-size: min(1.39vw,2rem);
      margin-top: 0.7rem;
      
    }

    .about > p > span{
        display: inline;
    }

}










/* ------------------*/
/*---- TIMELINE_---- */
/* ------------------*/

/* DESKTOP FORMATTING */

.timeline-wrapper{
    /* border: 1px solid white; */
    width: min(80vw,2250px);
    margin:auto;
}

.timeline-wrapper{
    display: flex;
    flex-direction: column;
    gap: .4rem;
    /* background-color:black; */
    /* padding:.5rem; */
    margin-top:2rem;
  }

  .mobile-timeline-wrapper{
    display: none;
  }
  
  .timeline{
    display: flex;
  /*   gap: .2rem; */
  }
  
  .timeline-wrapper article:first-child>div{
    /* border: 1px solid red; */
    min-height: 10px;
    flex: 1;
    
    display: flex;
    flex-direction:column;
    margin-right: 5px;
  }

  .timeline-wrapper article:first-child>div:hover,.timeline-wrapper article:first-child>div:focus-within{
    scale: 110%;
    padding-inline: .5rem;

  }
  
  .yearblock{
    /* border: 1px solid green; */
    display: flex;
  /*   flex:1; */
    margin-bottom: 4px;
  }
  
  .caution{
  /*   border: 1px solid red; */
    flex: 1;
    
    background-image: repeating-linear-gradient(
      -49deg,
      #fff,
      #fff 5px,
      #00000000 0px,
      #00000000 10px
    );
  }
  
  .year{
    padding-left: 5px;
    color:white;
  /*   border:1px solid red; */
    font-size: 14px;
    font-weight:bold;
    /* display:grid; */
    font-family: tt_year,monospace;
  }
  
  .line{
  /*   border: 1px solid yellow; */
    min-height:8px;
    background-color:white;
  }
  
  .work>div{
  /*   border:1px solid red; */
    min-height:10px;
    margin-right:8px;
  }
  
  .work{
    display:grid;
    grid-template-columns: repeat(14,1fr);  
  }
  
  .work>div>p{
    font-family:tt_cap, code;
    font-size: .8rem;
    font-weight:800; 
    margin-block:0;
    padding-block: .15rem;
  /*   border:1px solid green; */
  }
  
  .work>div>p>i{
    font-style: normal;
    font-family: tt_subcap, code_mono;
    font-size:0.7rem;
  }
  
  .work>div:first-child{
    grid-column-start:2;
    grid-column-end:10;
    color:#f9b452;
  }
  
  .work>div:nth-child(2){
    grid-column-start:10;
    grid-column-end:12;
    color:#52dff9;
  }
  
  .work>div:last-child{
    grid-column-start:12;
    grid-column-end:14;
    color:#f95252;
    
  }
  
  .workline{
    height:8px;
  /*   border:1px solid red; */
  }
  
  .work>div:first-child>.workline{
    background-color:#f9b452;
  }
  
  .work>div:nth-child(2)>.workline{
    background-color:#52dff9;
  }
  
  .work>div:last-child>.workline{
    background-color:#f95252;
  }
  
  .work>div:last-child>p{
    white-space:nowrap;
    
  }

  .workline:hover, .workline:focus-within{
    /* border:2px solid red; */
    height: 11px;

  }


  /*---- MOBILE FORMATTING---- */
  @media screen and (max-width: 640px) {
    .timeline-wrapper{
        display: none;
    }

    
.mobile-timeline-wrapper{
    display:grid;
    grid-template-columns: min-content auto;
    width:fit-content;
    gap:6px;
    margin-left:10vw;
    /* background-color:black; */
    /* border:solid 1px red; */
  }
  
  .mobile-timeline-wrapper .mob-timeline{
    /* border:solid 1px green; */
    display:grid;
    gap: 4px;
    align-items: center;
    margin: auto;
    max-width: fit-content;
    
  }
  
  .mobile-timeline-wrapper .mob-timeline>div{
    /* border: 1px solid white; */
    min-height: 95px;
    display:flex;
    flex-direction: row;
    gap:8px;
  }
  
  .mobile-timeline-wrapper .mob-timeline>div>.line{
  /*   height:60px; */
    background-color:white;
    /* border:1px solid red; */
    width:12px;
  }
  
  .mobile-timeline-wrapper .mob-timeline>div .yearblock{
  /*   border: 1px solid red; */
    display: flex;
    flex-direction: column;
    color:white;
    
    
  }
  
  .mobile-timeline-wrapper .mob-timeline>div .year{
  /*   border: 1px solid green; */
    font-size: 1.3rem;
    /* font-family: monospace; */
    font-weight: 700;
    padding: 0;
  
  
  }
  
  .mobile-timeline-wrapper .mob-timeline>div .caution{
  /*   border: 1px solid green; */
    flex-grow: 1;
    
    
    background-image: repeating-linear-gradient(
        -49deg,
        #fff,
        #fff 5px,
        #00000000 0px,
        #00000000 10px
      );
    
  }
  
  .mob-work{
    display:grid;
    grid-template-rows: repeat(14, 1fr);
    gap:4px;
  }
  
  .mob-work>div{
  /*   border:solid 1px green; */
    display:flex;
  }
  
  .mob-work>div:first-child{
    grid-row:2/10;
  }
  
  .mob-work>div:nth-child(2){
    grid-row:10/12;
  }
  
  .mob-work>div:last-child{
    grid-row:12/14;
  }
  
  .mob-work>div>.workline{
    width:12px;
    margin-right:4px;
    height: auto;
  }
  
  .mob-work>div:nth-child(1)>.workline{
    background-color:#f9b452;
  }
  
  .mob-work>div:nth-child(2)>.workline{
    background-color:#52dff9;
  }
  
  .mob-work>div:nth-child(3)>.workline{
   background-color:#f95252;
  }
  
  
  .mob-work>div>p{
    margin:0;
    margin-left:4px;
    font-family:tt_cap;
    font-size: .9rem;
    font-weight:800; 
  }
  
  .mob-work>div i{
    font-family: tt_subcap;
    font-size: .8rem;
    font-weight:500;
    line-height: 2;
  }
  .mob-work>div:nth-child(1)>p{
    color:#f9b452;
  }
  
  .mob-work>div:nth-child(2)>p{
    color:#52dff9;
  }
  
  .mob-work>div:nth-child(3)>p{
    color:#f95252;
  }  
  }
  








/* --------------------*/
/*---- MY PROJECTS---- */
/* --------------------*/


/* MOBILE FORMATTING */


.projects{
  width: 90vw;
  margin: auto;
  /* padding: 0rem 0; */
}

.projects h2{
  font-family: code;
  color: var(--primary_accent);
  font-size: 1.3rem;
  letter-spacing: .5rem;;
  padding: 3vw 0;
}





.carousel{
  /*   border: solid 1px white; */
    max-width: 90vw;
    margin:auto;  
    
    display:grid;
    gap:.5rem;
  }
  
  .carousel article{
    position:relative;
    border-radius:10px;
    overflow:clip;
    background-color: #222222;
  }
  
  .carousel img{
    object-fit: cover;
    height:100%;
    max-width:32vw;
  }
  
  
  .carousel article{
    display:flex;
    gap:1rem;
    
  }
  
  .desc-block{
    align-content:center;
  }
  
  .desc-block h3{
    margin-bottom:0.3rem;
    font-family:code;
    
  }
  
  .desc-block .desktop-sub{ 
    display:none;
    
  }

  .carousel article:hover img{
    scale: 1.1;
    
  }



  /* DESKTOP-FORMATTING */
  
  
  @media screen and (min-width: 640px){
    .projects{
      width: min(80vw, 2250px);
      margin-top:0.5rem;
    }
    .projects h2{
      padding: 1.2rem 0;
      font-size: min(1.8vw,2.5rem);
    }
    
    .carousel{
    max-width: min(1800px,85vw);
    margin:auto;  
    
    display:grid;
  /*   grid-auto-flow: row; */
    grid-template-columns:1fr 1fr;
    gap:1rem;
      
      @media (min-width: 1400px){
        grid-template-columns:1fr 1fr 1fr;
      }
  }
  
    .img-block{
      width:100%;
      transition: all 0.2s ease;
  /*     border:solid 1px red; */
    }
  .carousel img{
  /*   border:solid 4px green; */
    max-width:100%;
  
  }
    
  .carousel article{
    outline:3px solid #f5f5f511;
  }
    
  .desc-block{
    position: absolute;
    top:0;
    padding:1.5rem;
    text-align:justify;
    height:100%;
    opacity:0;
    transition: all 0.4s ease;
    color: whitesmoke;
  /*   border:solid 1px red; */
  }

  .desc-block h3{
    font-size:1.7rem;
  }
   
  .carousel article:hover{
      /* box-shadow: 5px 5px #bbbbbb22; */
      outline: 4px solid #f5f5f599;
  }  
    
   .carousel article:hover .desc-block{
      opacity: 1;
  }
  
   .carousel article:hover .img-block{
      /* backdrop-filter: blur(40px); */
      filter: brightness(30%);
      
  }

  .carousel article:hover img{
    filter: blur(3px);
  }
    
  .desc-block .desktop-sub{ 
    display:block;
  }
    
   .desc-block .mobile-sub{ 
    display:none;
  }
    
  }




/* ------------------- */
/* -------LINKS------ */
/* ------------------- */

/* MOBILE FORMATTING */

.links{
  width: 90vw;
  margin: auto;
  padding: 1.2rem 0;
}

.links h2{
  font-family: code;
  color: var(--primary_accent);
  font-size: 1.3rem;
  letter-spacing: .5rem;;
  padding: 3vw 0;
}

.link-block{
  font-family: code_mono;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.link-block a{
  padding: 1rem;
  border: 2px solid #222222;
  border-radius: 5px;
  width: 70vw;
  text-align: center;
}
.link-block a:hover{
  background-color: #222222;
 
}

.link-block i{
  padding-inline: 0.5rem;

}

/* DESKTOP FORMATTING */
  @media screen and (min-width: 640px){
  .links{
      width: min(80vw, 2250px);
      margin-top:0.5rem;
    }
  .links h2{
    padding: 1.2rem 0;
    font-size: min(1.8vw,2.5rem);
    }

  .link-block{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .link-block a{
    padding: 1rem 1.7rem;
    width: max-content;
    text-align: center;
  }

  .link-block i{
  padding-inline: 0.7rem;
  }
}





/* ------------------- */
/* -------SKILLS------ */
/* ------------------- */

/* MOBILE FORMATTING */

.skills{
  width: 90vw;
  margin: auto;
  padding: 1.2rem 0;
}

.skills h2{
  font-family: code;
  color: var(--primary_accent);
  font-size: 1.3rem;
  letter-spacing: .5rem;;
  padding: 3vw 0;
}

.cat-wrapper{
  display: flex;
  flex-direction: column;
  gap: 2rem
}

.catogery{
  background-color: #34343461;
  border-radius: 5px;
  width: 60vw;
  margin: auto;
  padding: 1rem;
}

.catogery h3{
  font-size: 1.1rem;
  font-family: code_mono;
  text-align: center;
  padding:  0 1rem;
  margin-bottom: 1rem;
}

.catogery li{
  font-size: 1.1rem;
  list-style: none;
  text-align: center;
  padding: 0.2rem;
}

/* DESKTOP FORMATTING */
@media screen and (min-width: 640px){
  .skills{
      width: min(80vw, 2250px);
      margin-top:0.5rem;
    }
  .skills h2{
    padding: 1.2rem 0;
    font-size: min(1.8vw,2.5rem);
    }

  .cat-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .catogery{
    margin: 0;
    width: fit-content;
  }

  .catogery h3{
    font-size: min(1.39vw, 1.4rem);
  }

  .catogery li{
    font-size: min(1.39vw, 1rem);
  }

}



/* ------------------ */
/* ----EXPERIANCE---- */
/* ------------------ */

/* MOBILE FORMATTING */


.experience{
  width: 90vw;
  margin: auto;
  padding: 1.2rem 0;
}

.experience h2{
  font-family: code;
  color: var(--primary_accent);
  font-size: 1.3rem;
  letter-spacing: .5rem;;
  padding: 3vw 0;
}

.experience-wrapper{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.exp-block{
  /* border: 2px solid white; */
  padding: .8rem;
  display: flex;
  gap: 1.3rem;
  border-radius: 5px;
}
.exp-block:hover{
  background-color: #222222;
}

.exp-line{
  /* border: solid 2px red; */
  min-width: 10px;
  background-color: var(--sec_white);
}

.exp-info h3{
  margin-bottom: 0.5rem;
  font-family: code_mono;
  letter-spacing: 1.2px;
  font-size: 1.2rem;
}

.exp-info p{
  line-height: 1.2rem;
  font-family: code;
  font-size: 0.9rem;
  opacity: 0.8;
}


/* DESKTOP FORMATTING */
@media screen and (min-width: 640px){
  .experience{
    width: min(80vw, 2250px);
    margin-top:0.5rem;
  }
  .experience h2{
    padding: 1.2rem 0;
    font-size: min(1.8vw,2.5rem);
  }

  .experience-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }

  .exp-block{
    /* border: 2px solid white; */
    height: 100%;
  }

  .exp-info{
    align-self: center;
  }

  .exp-info h3{
    font-size: min(1.4vw,2.2rem);
    margin-bottom: min(1vw,0.5rem);
  }

  .exp-info p{
    font-size: min(1.2vw,1.8rem);
    line-height: min(2vw,1.2rem);
  }
}