@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
* {
  font-family: 'Lato', sans-serif;
  padding : 0;
  margin: 0;
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
h1,h2,h3,h4,h5,h6, span{
  color: #141414;
  text-align:center;
  line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
  line-height:1.5;
  font-size: 16px;
}
a {
  text-decoration:none;
  position:relative;
  transition:opacity 300m ease;
}
i:hover{
  opacity:0.7;
}
.link_hover_effect:after{
 content:"";
 position:absolute;
 background-color:black;
 height:3px;
 width:0;
 bottom:-3px;
 right:0;
 transition:all 300ms ease;
}
.link_hover_effect:hover:after{
  width:100%;
  left:0;
}
.link_hover-effect:after{
 content:"";
 position:absolute;
 background-color:white;
 height:3px;
 width:0;
 bottom:-3px;
 right:0;
 transition:all 300ms ease;
}
.link_hover-effect:hover:after{
  width:100%;
  left:0;
}

li{
  list-style-type:none;
}
.flex{
  display:flex;
}
.flex-1{
  flex:1;
}
.container{
  padding: 50px 0;
  margin-top: 60px;
}
.row{
  width: 100%;
  max-width: width 800px;
  margin: 0 auto;
}
.text-purple{
  color:#bf3a71;
}
section:nth-child(even){
  background-color:rgb(236, 234, 234); 
}

/* NAVIGATION BAR */

nav{
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 22px;
}
.nav_link_list{
  display: flex;
}
.nav_link_anchor{
  margin:0 12px;
  color:#242424;
  text-decoration:none;
  font-weight: 700;
}
.nav_link_anchor_primary{
  background-color:#bf3a71;
  padding: 8px 20px;
  border-radius: 50px;
  color:white;
  transition: all 300ms ease;
}
.nav_link_anchor_primary:hover{
background-color:#860532
}
.personal_logo{
font-size: 25px;
color:#bf3a71;
margin:0 12px;
font-weight: bold;
}

/* ABOUT ME */
#about_me
{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.about-me_info{
  display:flex;
  flex-direction: column;
}
.about-me_info-container{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  max-width: 600px;
  margin:0 auto;
  text-align:center;
}
.about-me_picture-mask{
  width:100px;
  height:100px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 8px 24px rgb(207, 206, 206);
  margin-bottom: 20px;
  animation: animate_profile-picture 800ms 200ms backwards;
}
@keyframes animate_profile-picture{
  0%{
    transform:scale(0);
  }
  80%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}

.about-me_picture{
  width: 100px;
}
.about-me_info-title{
  margin-bottom: 16px;
  animation: fade-up 650ms 400ms backwards;
}
.about-me_info-paragraph{
  font: size 20px;
  margin-bottom: 28px;
  animation: fade-up 650ms 600ms backwards;
}
.about-me_link{
  font: size 20px;
  color:#242424;
  text-decoration:none;
  padding:0 16px;
  animation: fade-up 650ms 800ms backwards;
}
@keyframes fade-up{
  0%{
     opacity:0;
     transform: translateY(40px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.about-me_image-container{
  flex:1;
  display:flex;
  align-items:center;
}
.about-me_image{
  width: 100%;
  max-width: 600px;
  margin:0 auto;
  margin-top: 22px;
  animation: fade-in 1200ms 800ms backwards;
}

@keyframes fade-in{
  0%{
     opacity:0;
  }
  100%{
   opacity:1
  }
}

/* TECHNOLOGY STACK */

.language_image{
  width:100%;
  max-width: 50px;
  transition: all 300ms ease; 
}
.language:hover .language_image{
  filter:brightness(80%);
  opacity:0.86;
  transform: scale(0.9);
}
.language_image_wrapper{
  display:flex;
  justify-content: center;
  align-items:center;   
  padding: 30px 16px;
}
.language{
  width:25%;
  display:flex;
  justify-content: center;
  position:relative;
}
.language_list{
  display:flex;
  width:100%;
  flex-wrap:wrap;
}
.language_name{
  position:absolute;
  bottom:0;
  transform: scale(0);
  transition: all 300ms;
  font-size: 20px;
}
.language:hover .language_name{
  transform:scale(1);
}

/* PROJECTS */

.project{
  margin-top:90px;
}
.project:last-child{
  margin-bottom:40px;
}
.project_img{
  display:flex;
  width:100%;
  justify-content: center;
  align-items:center;
  margin-top: 22px;
  transition: all 500ms ease;
}

.project_wrapper{
  display:flex;
  box-shadow:0 20px 80px rgba(184, 183, 184, 0.45);
  border-radius: 35px;
  overflow: hidden;
  justify-content: center;
  margin:0 auto;
  max-width: 600px;
  margin-top: 22px;
  position:relative;
}
.project_wrapper:before{
  content:"";
  position: absolute;
  top: 0;
  left:0;
  width:100%;
  height:100%;
  background-color:#060708;
  opacity: 0;
  transition: opacity 450ms ease;
}
.project:hover .project_wrapper:before{
  opacity:0.9;
}
.project:hover .project_img{
  transform: scale(1.07);
  filter:blur(5px);
}

.project:hover .project_description{
 opacity:1;
 transform:translateY(-50%);
}
.project-list{
  padding-top: 40px;
}

.project_description{
  position:absolute;
  top:50%;
  left:90px;
  transform:translateY(100%);
  max-width: 550px;
  z-index:3;
  opacity:0;
  transition: transform 450ms, opacity 300ms;
}
.project_description-para{
 margin: 16px 0;
}
.project_description-title{
  font-size: 30px;
  color: rgb(255, 255, 255);
}
.project_description-links{
  font-size:20px;
  margin-right: 16px;
  text-decoration:none;
}
.project_description-title,
.project_description_sub-title,
.project_description-par,
.project_description-link{
  text-align: left;
  color: rgb(7, 7, 7);
}

/* FOOTER */
footer{
  background-color:#0e0e0e;
}
.footer_logo{
  margin-bottom:40px;
}

.footer_row{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  padding:8% 0;
}
/* .footer_logo-logo{
width:70px;
height:50;
} */

.footer_logo-logo1{
font-size: 30px;
color:#ffffff;
margin:0 12px;
font-weight: bold;
text-decoration: none;
}

.footer_social-list{
  width:100%;
  display:flex;
  justify-content: space-around;
  margin-bottom:30px;
}

.footer_social-link,
.footer_copyright{
  color:white;
  text-decoration:none;
  font-size: 15px;
}