/*Font sizes(px)
10 / 12 / 14 / 16/ 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74/ 86 / 98*/

/*Spacing System(px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128*/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Electrolize", sans-serif;
    font-weight: 400;
    font-style: normal;
    

}


html{
    /* 10px/16px = .625 = 62.5% */
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-snap-type: y;
   
}

body {
    overflow-x: hidden;
    scroll-snap-type: y;
    background-color: #0d1110;
}

.header{
    display: flex;
    justify-content: space-between;
    padding: 2.4rem 4.8rem;

}

.logo{
    max-width: 10rem;
    padding-right: 4.8rem;
}


.main-nav-list{
    display: flex;
    gap: 4.8rem;
    list-style: none;
 
}

.main-nav-link{
   text-decoration: none;
   font-size: 2.4rem;
   color: white;
}

.landing-page{
    /* max-width: 130rem;
    margin: 0 auto; */
    background-image: 
    linear-gradient(45deg, green, blue),
    url("Images/walkway.png"); 
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    min-height: 100svh;
 
    
}

.landing-intro{
    
    overflow: scroll ;
    display: flex;
    flex-direction: column;
    padding: 30rem 4.8rem;
    align-content: center;

    /* position: relative; */
}

.test{

    /* position: absolute; */
    display: flex;
    flex-direction: column;

}

.test > .btn{
    margin: 0 auto;

}


.section-2{
    padding: 8.0rem 4.8rem;
    color: white;
    max-width: 130rem;
    margin: 0 auto;
    /* min-height: 100svh; */

}

@keyframes pop-in {
    0% {opacity: 0; transform: scale(0.1);}
    100% {opacity: 1; transform: scale(1);}
}

.section-2 > div > h3 {
    opacity: 0; /* Initially hidden */
    transform: scale(0.1); /* Initially small */
    transition: opacity .7s ease-in-out, transform 1s ease-in-out; /* Smooth transition */
}

.section-2 > div > h3.pop-in {
    opacity: 1;
    transform: scale(1);
}

.section-3{
    padding: 8.0rem;
    max-width: 130rem;
    margin: 0 auto;

}

.skills-and-knowledge-header{
    color: white;
    padding: 8.0rem 0 8.0rem 0;
    font-size: 8.6rem;
    display: flex;
    justify-content: center;
    font-weight: 700;
}

.start-btn {
    display: flex;
    justify-content: center;
    margin: 0 auto;
   


}

.skill-list{
    padding-bottom:8.0rem;
}

.skills{
    height: 20rem;
    align-items: center;
    justify-content: center;
    background-color:#0d1110;
    font-size: 4.4rem;
    text-align: center;
    position: relative;
    padding: 1.6rem;
    color: rgb(182, 182, 182);
 
}


.skills:before{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(235deg, blue, green, orange, yellow);
    z-index: -2;
    filter: blur(30px);

}

.skills:after{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background-color:#0d1110;
    z-index: -1;
    filter: blur(30px);

}


.skills:hover{
    transform: translateY(-1rem);

}
.skills:hover:before,
.skills:hover:after {
    background: none;
}




.footer{
padding: 2.4rem 4.8rem;
}

.footer-container{
    display: flex;
    justify-content: space-between;
}

.footer-info{
    font-size: 2.4rem;
    color: white;
}

.footer-info > a {
    text-decoration: none;
    color: white;
}


/*********************/
/****** About Me ******/
/*********************/

.about-me{
    max-width:130rem;
    min-height: calc(100svh - 18.12rem);
    margin: 0 auto;
    padding: 6.4rem 4.8rem;
    color: white;

}
.about-me > h1{
    text-align: start;
}
.about-me-section{
    padding-top: 6.4rem;;
}



.about-me-photo{
    width: 100%;
    border-radius: 5px;
}


.services-btn{
    padding-top: 6.4rem;
}

/*********************/
/****** Projects ******/
.temp{
    min-height: calc(100svh - 18.12rem);
}
.saturn{
    color: white;
    font-size: 30rem;
    display: flex;
    justify-content: center;
    padding: 9.6rem 4.8rem;
}

.temp-explanation{
    display: flex;
    color: white;
    justify-content: center;
    padding: 9.6rem 4.8rem;
}
/*********************/
/*********************/
/** Reusable Stuff **/
/*********************/

h1{
    font-size: 9.6rem;
    padding: 2.4rem 0;
    text-align: center;
    font-family: "Jersey 10", sans-serif;
    font-weight: 900;
    font-style: bold;
    letter-spacing: .8rem;
    text-shadow: 2px 3px 3px black;

}

h2{
    font-size: 8.6rem;
    text-align: center;
    padding: 2rem 0;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;


}

h3{
    font-size: 4.4rem;
    padding: 2.0rem 0;

}

p{
    font-size: 2.4rem;

}

.btn{
    padding: 1.6rem 2.4rem;
    text-decoration: none;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 5px;
    display: inline-block;
    color: white;
    background-color: rgb(2, 41, 39);
    font-size: 1.6rem;

}

.btn:hover{
    color: grey;
    background-color: rgb(1, 20, 19);
    transition: all 1s;

}
.grid {
    display: grid;
    column-gap: 3.6rem;
    row-gap: 3.6rem;
}
.grid--2-cols{
    grid-template-columns: repeat(2, 1fr);
    
}

.grid--4-cols{
    grid-template-columns: repeat(4, 1fr);
}