@import url('https://fonts.googleapis.com/css2?family=Anton&family=Dosis:wght@300;400;500;600;700;800&family=Exo+2:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Kenia&family=Lobster&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sedgwick+Ave+Display&display=swap');
  @import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');

*{
    margin: 0;
    padding: 0;
    font-family: 'Kanit', sans-serif;
    text-decoration: none;
    outline: none;

}
.navbar {
    background: rgb(255,255,255,0.3);
    font-weight: bold;
}



.home{
    color: white;
    font-size: 30px;
}
.info {
    margin-top: 150px;
    font-family: 'Kanit', sans-serif;
}
.name span {
    font-family: 'Anton', sans-serif;
    color: #ffffff;
    font-weight: bolder;
    font-size: 50px;
    text-indent: 100cap;
    
}
span.theo {
    color: #E56363;
}

.nav-link {
    color:white;
    cursor: pointer;
    user-select: none;
}
.nav-link:hover {
    color: #fa7878;
}

.navbar-brand, .m, .nzi, .navbar-brand:hover {
    color: #ffffff;
    font-size: 35px;
    font-weight: bolder;
    font-family: 'Lobster', sans-serif;
    transition: 0.5s;
    user-select: none;
}
.m{
    border-radius: 30px;
    color: white;
    background-color: #E56363;
    padding-left: 5px;
    padding-right: 4px;
}
.nzi{
    color: #E56363;
}
.me{
    color: #E56363;
}
.hire-btn{
    background-color: #E56363;
    border: none;
    color: white;
    margin-left: 20px;
}

/* TYPING ANIMATION */
.iam{
    color: white;
  }
  .text{
      border-right: 2px solid red;
      color:#E56363;
  }


  .medias {

    margin-top: 80px;

  }
  
  .medias ion-icon{
    color:#ffffff;
    border: 1px solid#E56363;
    border-radius: 50%;
    padding: 10px;
    transition: 0.5s;
  }
  .medias ion-icon:hover{
    background-color:#E56363;
    border: 1px solid #E56363;
  } 



  .medias2 ion-icon{
    color:#ffffff;
    border: 1px solid rgb(150, 148, 148);
    border-radius: 50%;
    padding: 10px;
    transition: 0.5s;
  }
  .medias2 ion-icon:hover{
    background-color:#E56363;
    border: 1px solid #E56363;
  }
  #about-section{
    background-color: #ffffff;
   
  }

  .about-img {
    width: 100%;
   
    background-image: url('Images/DSC_9574.JPG');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 10px;
  }
    p{
    color: grey;
  }
  .about-info span{
    padding: 20px;
  }

  .table-about{
    margin-top: 50px;
    padding: 7px;
    border-radius: 10px;
    background: #f2e3e3;
  }
  #contact-section {
    color: white;
    /* height: 658px; */
  }
  .contact-img{
    border-radius: 300px;
    background-image: url("Images/Screenshot_20230329-220011~5.jpg");
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: center;
    background-position-y: -125px;
    margin-top: 0px;
    margin-bottom: 0px;

  }
  
  .card-black{
    margin-top: 50px;
  }
  .mail ion-icon{
    font-size: 90px;
    border: 9px solid #131e22;
    padding: 10px;
    border-radius: 80px;
    margin-top: -70px;
    background-color: #E56363;
    color: white;
  }

  .contacts ion-icon{
    font-size: 40px;
    border: 1px solid #131e22;
    padding: 10px;
    margin-right: 5px;
    border-radius: 40px;
    background-color: #E56363;
    color: white;
  }
  .contacts ion-icon:hover{
    cursor: pointer;;
    background-color: #E56363;
  }
  .contacts a{
    text-decoration: none;
  }
  .contacts table{
    margin-top: 5px;
  }
  .contacts .card{
    margin-left: 5px;
  }
  .contact-txt{
    font-weight: bolder;
    font-size: 50px;
  }
  .back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #E56363;
    font-size: 20px;
    border-radius: 80px;
    padding: 10px;
    width: 80px;
    height: 80px;
    font-weight: bolder;
    color: white;
    text-align: center;
    text-decoration: none;
  }
  .skills-section{
    color: white;
    height: 658px;
    
  }
  .skills-head{
    color: white;
  }

.skills-icon {
  color: #131e22;
  font-size: 40px;
  
}
.skills .col-2 {
  font-size: 50px;
}


.services-section{
  color: white;
  /* height: 658px; */
  
} 

.footer-link a{
  margin-bottom: 10px;
  text-decoration: none;
  color: rgb(102, 104, 104);
  display: block;
  font-weight: bold;
}

.form label{
  color: rgb(0, 0, 0);
  position: absolute;
  left: 35px;
  background-color: rgb(171, 215, 233);
  padding-left:5px;
  padding-right:5px;
  font-size: 14px;
  border-radius: 7px;
  display: none;
  transition-property: all;
  transition: 2s;
  transition-delay: 1s;
}


/* ANIMATED BACKGROUND */
body, html {
  padding: 0;
  margin: 0;
  overscroll-behavior: none;
  overflow-x: hidden;
  user-select: none;
}

#stars{
position: fixed;
z-index: -1;
}


body{
    
  background-color: #131e22;

}



.media2 i{
  
  color: #E56363;
  border-radius: 100%;
  transition: 0.5s;
  font-size: 50px;
  padding: 10px;
  background-color: #dfe1e4;
  border:  1px solid #E56363;
}
.media2 i:hover{
  color:rgb(255, 255, 255);
  background-color:  #E56363
} 


.icon{
  font-size: 55px;
  transition:  0.5s;
}
.icon:hover{
  color: #E56363;
}
.rate{
  color: goldenrod
}