@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
* {
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    margin: 0;
    font-family: 'Roboto',sans-serif;

}
/* header & nav */
header{
    position: fixed;
    display: flex;
    background-color: black;
}
.logo{
    background-color: black;
    color: white;
    width:30vw;
    margin-left:1rem;
    padding: 10px;

    font-size: 17px;
}
.nav__toggle{
    display: none;
}
.nav__link{
    height: 40px;
    width: 100vw;
    display: flex;
    align-items: center;
}
.link{
    list-style: none;
    padding: 9px 20px;
}
.nav__link a{
    color: white;
    text-decoration: none;
    padding: 9px 0;
    
}

.link:hover{
    border-bottom: 5px solid palegreen;
}
.active{
    border-bottom: 5px solid rgb(230, 230, 230);
}
/* banner */
.banner{
    height: 100vh;
    background-image: url('./images/half-moon-g3af55e61b_1920.jpg');
    background-repeat: none;
    background-size: cover;
    display: flex;
    justify-content: right;
    align-items: center;
}
.banner img{
    width: 100%;
}
.hero{
    display: grid;
    height: 55vh;
    text-transform:uppercase;
    align-items: center;
    margin-right: 15rem;
}
.hero a{
    text-decoration: none;
    color: white;
    font-size: 6rem;
    width: 500px;
    height: 110px;
    transition: all .2s ease-in;
    font-weight: bolder;
    text-align: center;
    
    padding: 0 10px;
    
}
.hero a:hover{
    font-size: 0;
}
.home_txt:hover::after{
    content: attr(data-home);
    font-size: 6.2rem;
    color: rgb(94, 2, 199);
}
.about_txt:hover::after {
    content: attr(data-about);
    font-size: 5rem;
    color: palegreen;
}
.contact_txt:hover::after {
    content: attr(data-contact);
    font-size: 6.2rem;
    color: palegreen;
}
.project_txt:hover::after {
    content: attr(data-project);
    font-size: 6.3rem;
    color: palegreen;
}

h1,h2,h3{
    line-height:70px;
}


section{
    padding: 0 1em;
}
.intro__section,
.about__section,
.contact__section,
.project_section{
    width: 100%;
    height: 100vh; 
}


/* about me */
.about__section{
    width: 100vw;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-content: center;
    color: white;
}
.about-container{
    width: 85vw;
    height: 80vh;
    background-color: black;
    border-radius: 2.5rem;


}
.about-container h2{
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    padding: 20px 0;
}
.about-detail{
    display: flex;
    justify-content: center;
    width: 70vw;
    margin: 1rem auto;
    /* align-items: center; */
    
}
.about-detail div{
    padding: 2rem;
}
.intro__img{
    width: 320px;
    height: 340px;
    border-radius: 1rem;
    filter: grayscale(100%) blur(.5px);
}
.about-detail p{
    line-height: 1.8rem;
}
/* 
.about-container{
    margin: 0;
    display: grid;
    width: 100vw;
    height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    grid-template-columns: repeat(2,1fr);
    gap: 20px 0;
    
}
.box{
    width: 35vw;
    height: 35vh;
    display: flex;
    border: 2px solid palegreen;
    align-items: center;
    border-radius: 2rem;
}
.box-left,
.box-right{
   display: grid;
   justify-items: center;
   align-items: center;
   height: 100%;
}
.box-left{
    width: 40vw;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
 
}
.box-right{
    width: 50vw;
    padding-left: 1rem;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.b1 .box-left{
    background-color: black;
}

.b2{
    background-color: palegreen;
}
.b2 .box-right:nth-child(2){
    background-color: black;
    color: white;
}
.b3 .box-right{
    background-color: palegreen;
}

.b4 .box-left{
    background-color: black;
    color:white
}
.intro__title {
    font-size: 3rem;
    font-weight: lighter;
}
.bio-txt:nth-child(2){
    margin-top: -1rem;
}
.box-left img {
    filter: grayscale(100%) blur(.5px);
    width:200px;
    height: 25vh;
} */
/* contact section */
.contact__section{
    background-color: black;
    color: white;
}
.contact__container {
    padding-top: 15rem;
    padding-left: 2rem;
    line-height: 2rem;
}

.contact__title{
    font-size: 5rem;
}
.contact__p_txt{
    
    color: palegreen;
    font-size: 2rem;
}
.linkedin,.resume-pdf{
    font-size: 2rem;
    text-decoration: none;
    padding:10px;
    color:white;
}
.email{
    text-decoration: none;
    color: white;
}
/* project section */
.project_section{
   position: relative;
   
}
.project__container{
    margin-top: 3rem;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  
}
.project__box{
    position: relative;
    text-align: center;
    border: 1px solid rgba(211, 211, 211, 0.74);
    margin-bottom: 1rem;
}
.project__title{
    padding-top: 3rem;
    font-size: 3rem;
    text-align: center;
}
.project__img{
    width: 320px;
    height: 200px;
}
.project__link{
    width: 100%;
    height:100%;
    border: 1px solid black;
    display: grid;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    background-color: black;
    opacity: 0;
    cursor: pointer;
    
}
.project__link:hover{
    opacity: 90%;
    transition: all 1s ease-in-out;
}
.project__link a{
    padding: 10px 55px;
    text-decoration: none;
    color: white;
    cursor: pointer;
    opacity: 100;
    border: 2px solid white;
}
.project__link a:hover {
    color: white;
    cursor: pointer;
    border:2px solid palegreen;
   
}
.project__description{
    width: 320px;
    padding-bottom: 10px;
}

/* footer */
footer{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    color: white;
    background-color: black;
}
#scroll-top-btn{
    position: absolute;
    left: 90%;
    bottom: 1%;
    border:none;
    background-color: palegreen;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    text-align: center;
    padding: 10px 0;
    margin: 0 1.5rem;
    cursor: pointer;
    animation-name: bounce-arrow;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.project_section a{
    color: black;
}
#scroll-top-btn:hover{
    background-color: white;
}
@keyframes bounce-arrow {
    0%{ transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}