@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rammetto+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chonburi&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    background-color: rgb(0, 0, 0);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    scroll-behavior: smooth;
}
.nav-container{
    font-family: 'Michroma', sans-serif;
}
.nav{
  font-size: 0.68rem;
  display: flex;
  list-style: none;
  margin: -5rem -0.5rem;
  color: rgb(198, 198, 198);
  width: 101vw;
  position: fixed;
  z-index: 99;
  background-color: rgb(0, 0, 0,0.6);
  height: 4rem;
  padding: 1.5rem 23rem;
}
.nav li a{
    margin: 0rem 1rem;
    cursor: pointer;
    font-weight: 200;
    text-decoration: none;
    color: rgb(198, 198, 198);
}
.home{
    /* background-color: black; */
background-color: rgb(0, 0, 0);
margin-top: 5rem;
padding-top: 3rem;
}
.blur:hover{
    color: rgba(221, 218, 218, 0.5);
    cursor: pointer;
}
.name{
    font-size: 7rem;
    text-align: center;
    font-family: 'Chonburi', cursive;
    position: absolute;
    z-index: 3;
    margin-left: 29rem;
    margin-top: -4rem;
    color: rgb(253, 252, 252);
}
.title{
    font-size: 4rem;
    text-align: center;
    margin-top: -6rem;
    font-family: 'Chonburi', cursive;
    position: absolute;
    z-index: 3;
    margin-left: 24rem;
    cursor: pointer;
    color: rgb(255, 255, 255);
}
.home img{
    width: 14rem;
    height: 20rem;
    margin: 1rem 33rem;
    z-index: 0;
    border: none;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    /* border-radius: 20rem; */
}
.blur-active{
   color: red;
}

/* about */
.about{
    margin-top: 20rem;
    width: 53vw;
    margin-left: 20rem;
    font-size: 1rem;
    margin-bottom: 20rem;
    text-align: left;
    font-family: 'Michroma', sans-serif;
    /* background-color: red; */
    height: 20rem;
}
  .skills h1{
    margin: 0rem 19rem;
    font-size: 3.2rem;
    font-family: 'Michroma', sans-serif;
    width: 70vw;
}
#html{
    margin: 2rem 7rem;
}
#css{
    margin: 5rem 15rem;
}
#js{
    margin: 7rem 7rem;
}
#git{
    margin: 7rem 18rem;
}
#react{
    margin: 10rem 7rem;
}
#gsap{
    margin: 10rem 13rem;
}
#left{
    margin-left: 22rem;
}
.question-container{
    margin-top: 15rem;
    color: white;
    margin-bottom: 10rem;
    /* background-color: blue; */
}
.question-container h1{
    margin: 1rem 27rem;
    font-size: 3.5rem;
    font-family: 'Michroma', sans-serif;
    text-align: center;
    position: absolute;
    cursor: pointer;
    padding-left: -1rem;
}
.tag{
    background-color: red;
    margin: 2rem;
    font-size: 0.9rem;
    font-family: 'Michroma', sans-serif;
    width: 43vw;
    height: 2.5rem;
    text-align: center;
    padding-top: 0.5rem;
    border-radius: 2rem;
}
.tag1{
    margin: 2rem 22rem;
    width: 32vw;
}
.tag2{
    margin: 1rem 42rem;
    width: 32vw;
}
.tag3{
    margin: 8rem 22rem;
}
.tag4{
    margin: -5rem 42rem;
    width: 33vw;
}

/* answer */

.answer-container{
    width: 35vw;
    margin-left: 28rem;
    font-size: 1.1rem;
    margin-bottom: 5rem;
    font-family: 'Michroma', sans-serif;
}


/* projects */
.work-header{
    color: white;
    margin: 2rem 29rem;
    font-size: 2rem;
    width: 30rem;
    font-family: 'Michroma', sans-serif;
}
.filter{
    color: white;
}
.filter ul{
    list-style: none;
    display: flex;
    margin: 3rem 10rem;
    width: 63rem;
}
.filter ul li{
    margin-left: 2rem;
    cursor: pointer;
    background-color: grey;
    width: 8rem;
    height: 2rem;
    padding-top: 0.4rem;
    text-align: center;
    border-radius: 0.4rem;
}
.filter ul li:hover{
    color: grey;
    background-color: white;
}
.projects-container{
    margin: 5rem 2.5rem;
    display: grid;
    grid-template-columns: 27rem 27rem 27rem;
    grid-template-rows: 34rem 34rem 34rem 34rem 34rem 34rem;
}
.project{
    cursor: pointer;
    background-color: rgb(162, 156, 156);
    padding: 1.5rem;
    border-radius: 1rem;
    height: 30rem;
    width: 20rem;
    font-family: 'Michroma', sans-serif;
}
.last-row{
    margin-left: 15rem;
}
.project img{
  width: 17rem;
  height: 13rem;
  object-fit: contain;
}
.project h1{
    font-size: 1.3rem;
}
.project p{
    color: white;
    margin-top: 1rem;
    font-size: 0.8rem;
}
.project-active{
    position: absolute;
    margin-left: 20rem;
    background-color: rgb(0,0,0,0.8);
}

.work-container{
    margin-top: 7rem;
    margin-bottom: 20rem;
}
.hidden{
    display: none;
}
.project button{
   margin: 2rem 4rem;
   color: white;
   background-color: black;
   border: none;
   width: 7rem;
   height: 2rem;
   border-radius: 2rem;
   cursor: pointer;
}
/* contact */

.contact-container{
    margin: 2rem 30rem;
    width: 20rem;
    font-family: 'Michroma', sans-serif;
}
.contact-me{
    font-size: 1.3rem;
    margin-bottom: 2rem;
    margin-left: 4rem;
}
.contact-container p{
    margin-top: 1.3rem;
    font-size: 4.5rem;
    cursor: pointer;
    text-align: center;
}
.contact-container p a{
    text-decoration: none;
    color: white;
}
.left-contact{
    display: flex;
    align-items: center;
    margin-left: -30rem;
}
.left-container h1{
    font-size: 5rem;
    font-family: 'Michroma', sans-serif;
}
.left-container p{
    font-family: 'Michroma', sans-serif;
    font-size: 1.3rem;
}
.left-contact a img{
    width: 3rem;
    height: 3rem;
    margin-left: 0rem;
}
.arrow-down{
    margin: 1rem 10rem;
    cursor: pointer;
}
.arrow-up{
    margin: 1rem 10rem;
    cursor: pointer;
    display: none;
}

/* project-slides */

.project-slides{
    margin-top: 40rem;
    /* background-color: cadetblue; */
    display: grid;
    grid-template-columns: 40vw 60vw;
}
.left-container{
    margin-left: 5rem;
}
.left-container p{
    font-size: 1rem;
    margin: 3rem 0rem;
}
.upper-icons ul {
    display: flex;
    list-style: none;
    cursor: pointer;
    justify-content: space-evenly;
    margin-top: 2rem;
}
.responsive-image{
    width: 28rem;
    height: 23rem;
    margin: 3rem 15rem;
    cursor: pointer;
    object-position: center;
    object-fit: contain;
}

/* cv */

.cv{
    margin: 0rem 20rem;
}
.cv img{
    margin: 3rem 3rem;
    box-shadow: rgba(100, 100,100, 0.56) 0px 22px 70px 4px;
}
.cv h1{
    margin: 1rem 13rem;
    width: 18rem;
    font-family: 'Michroma', sans-serif;
    font-size: 3rem;
}

.what-now{
    font-family: 'Michroma', sans-serif;
    margin: 15rem 27rem;
    text-align: center;
    width: 30rem;
    text-align: left;
}
.what-now p{
    margin-top: 2rem;
}

.responsive-skills{
    display: none;
}
footer{
    margin: 3rem 32rem;
    font-size: 1.3rem;
    font-family:'Michroma', sans-serif ;
    width: 20rem;
    margin-bottom: 2rem;
}