@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
:root{
    --light-mode-bg:#DAD7CD;
    --light-mode-hero:#192300;
    --dark-mode-bg:#344E41;
    --dark-mode-hero:#DAD7CD;
    --light-mode-bg-box:#d9cead;

}
/*basic stuff*/
body{
   
    background-color: #DAD7CD;
    background-repeat: no-repeat;
    overflow-x: hidden;
    background-attachment: fixed;
    background-size:5vw;
     background-position: 50% 20%;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    cursor:url("../circle.svg");

    
}
/*hero section*/
.hero{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero h1{
    font-size : clamp(2rem, 10vw, 4rem);
    color:var(--light-mode-hero);
    text-align: center;
    font-family: "swear-display", serif;
    font-weight: 800;
    font-style: normal;
}
/*about section*/
.about{
    height: 100vh;
    width: 100%;
    z-index: 1;
    color: rgb(0, 0, 0);


}
.about p{
   text-align: justify;
    font-size: 1.5rem;
}

@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.main-message p,span{
    font-size:10vw;
    text-align: center;
}
.main-message{
  
    position: relative;
}

.main-message h1{
    font-size: 10rem;
    text-align: center;
    font-family: "swear-display", serif;
    font-weight: 800;
    font-style: normal;
    color: var(--light-mode-hero);
}
/*image below the main message*/
.main-message img{
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    top:0;
    z-index: 2;
    animation: fadeIn 2s;
    margin-left: 10vw;
    pointer-events:none ;
   
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    padding: 1rem 10rem;
    backdrop-filter: blur(10px);
    position: fixed;
    bottom: 0;
    background-color:rgba(44, 134, 38, 0.22);
    width: 40%;
    z-index: 1000;
    transition: background-color 0.5s;
    border-radius: 70px;
    animation:comefromBelow 1s;
    margin-bottom: 2vh;
    margin-left:calc(50% - 20%);
}
@keyframes comefromBelow{
    0%{
        transform: translateY(100%);
    }

    100%{
        transform: translateY(0%);
    }
}
nav a{
    color: #000000;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 100;
    font-family: "swear-display", serif;
    font-style: normal;
}
nav ul{
    display: flex;
    list-style: none;
}
nav ul li{
    padding: 0rem 2rem;
}
nav ul img{
    width: 2rem;
    object-fit: cover;

}
.container-about img{
   height:60vh;
    object-fit: cover;
    z-index: 3;
    pointer-events:none ;
    margin:0 auto;
    margin-top:10vh;
    margin-right: 5vw;

}
.container-about img{
    animation: fadeAndDarken 10s infinite;

}
@keyframes fadeAndDarken{
    0%{
        filter:grayscale(100%);
    }
    25%{
        filter:grayscale(50%);
    }
    50%{
        filter:grayscale(0%);
    }
    75%{
        filter:grayscale(50%);
    }

    100%{
        filter:grayscale(100%);
    }

}

.container-about{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

}
.container-about p{
    font-size: 1.5rem;
    text-align: justify;
    z-index: 100;
    margin-left: 5vw;
    font-family: "Inter", sans-serif;
}
.about h2,.works h2{
    font-size: 6rem;
    text-align: center;
    font-family: "swear-display", serif;
    font-weight: 800;
    font-style: normal;
    color: var(--light-mode-hero);
    margin-top:10vh;

}
.works h2{
    margin-bottom:20vh;
}
.about-text{
    font-weight: 400;
}
.works h3{
    font-size: 4rem;
    text-align: center;
    font-family: "Dela Gothic One", serif;
    font-weight: 800;
    font-style: normal;
    color: white;
    margin-bottom:10vh;
    text-transform: uppercase;
}
.work{
    background-color: var(--light-mode-bg-box);
    width:300vw;
    margin: 0 auto;
    margin-bottom: 2vh;
 
}
.work img{
    width:4rem;
    padding: 0 auto;
}
.work:nth-child(1){
    background-color: rgb(243, 94, 94);
}
.work:nth-child(2){
    /* background-color: rgb(103, 103, 243); */
    background-color: rgba(70, 96, 225, 0.689);
    margin-right:200vw;
}
.work:nth-child(3){
    /* background-color: rgb(71, 139, 71); */
    background-color: rgba(68, 224, 83, 0.917);
}
.works{
    margin-bottom: 50vh;
}
#firstchild{
    position: relative;
    left: -100vw;
    
}
#secondchild{
    position: relative;
    left: -100vw;
}
#lastchild{
    position: relative;
    left: -100vw;
}