body, html{
	width: 100%;
	font-family: 'Instrument Serif', serif;
	color: rgb(23, 41, 77);
}
hr{
	margin: 5% 10%;
	border-top: 3px solid rgb(243, 113, 154);
}
/*Navbar section */
.navbar{
	background: linear-gradient(68.3deg, rgb(243, 113, 154) 6.3%, rgb(23, 41, 77) 90.9%); 
	font-size: 1.8em;
}
.navbar-toggler-icon{
	color: white;
}
.navbar-collapse{
	justify-content: center;
}
.collapse a{
	color: white;
	transform: all 1s;
} 

.collapse a:hover{
	color: rgb(23, 41, 77);
	transform: scale(1.1);
}

/*intro section*/

.logo-img{
	padding-top: 8%;
	padding-bottom: 5%;
}

.logo-img img{
	width: 300px;
	height: 300px;
}

/*Button*/
.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 40px;
}

.btn {
  min-width: 240px;
  min-height: 60px;
  font-size: 1.5em;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  background: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  background: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgb(243, 113, 154);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 5px;
  }

.btn button::before {
  content: '';
  border-radius: 1000px;
  min-width: calc(220px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid rgb(243, 113, 154);
  box-shadow: 0 0 60px rgba(23,41,77,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.btn:hover, .btn:focus {
  color: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  transform: translateY(-6px);
}

.btn button:hover::before, .btn button:focus::before {
  opacity: 1;
}

.btn button::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 5px solid linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn button:hover::after, .btn button:focus::after {
  animation: none;
  display: none;
}

a{
	color: white;
	text-decoration: none;
}

/*About section*/
#about{
  padding: 10% 0;
}
.aboutDescription{
	margin:0 20%;
  padding: 10px 0;
}

#about h1{
	font-size: 2.8em;
  padding-bottom: 10%;
}

/*Skills section */
.container h2{
	padding: 5% 0 5% 0;
}

.grid-item > h2{
	padding: 5% 0 5% 0;
}

.grid-container {
 max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-item {
  border-bottom: 4px solid #17294d;
	border-right: 4px solid #17294d;
	text-align: center;
	-moz-box-shadow:4px 4px 5px #f3719a;
	-ms-box-shadow: 4px 4px 5px #f3719a;
	-webkit-box-shadow: 4px 4px 5px #f3719a;
	-o-box-shadow: 4px 4px 5px #f3719a;
	box-shadow: 4px 4px 5px #f3719a;
  padding: 10px;
}

.skill{
	padding: 8% 0 0 0;
}

/*Projects section*/
#projects h1{
	margin-top: 30px;
	padding-top: 10%;
	padding-bottom: 30px;
}

#projects h2{
	font-size: 2.2em;
	padding-top: 5%;
	padding-bottom: 5%;
}
.grid-item  i{
	padding: 30px 20px;
	font-size: 1.5em;
	color: #17294d;
	transform: all 1s;
}

.grid-item  i:hover{
	color: #f3719a;
	font-size: 3em;
	transform: scale(1.1);
}

.grid-item h3{
	padding-top: 3%;
}

.grid-item img{
	max-width: 100%;
	height: auto;
}

/*Contacts section*/
.contact{
	padding-top: 8%;
}

.contact  a{
	font-size: 2.3rem;
	color: #17294d;
	
}
.contact > i{
	transform: all 1s;

}
.contact i:hover{
	color: rgb(243, 113, 154);
	font-size: 2.8rem;
	transform: scale(1.1);
}

.contactTxt{
	padding-top: 10%;
}

.form{
	padding-top: 80px;
	padding-left: 5%;
}

label{
	font-size: 1.4em;
	margin-top: 10px;
}

option{
	color: rgb(23, 41, 77);
}
.form-control{
    font-size:20px;
}
.submit{
	color: white;
	font-size: 1.5em;
	width: 150px;
	min-width: 180px;
 	min-height: 60px;
  letter-spacing: 1.3px;
  font-weight: 700;
  background: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  background: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgb(243, 113, 154);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
 	padding: 5px;
 	margin: 10px;
}

.submit:hover, .submit:focus {
  color: white;
  transform: translateY(-6px);
}

.reset{
	color: white;
	font-size: 1.5em;
	width: 150px;
	min-width: 180px;
 	min-height: 60px;
  letter-spacing: 1.3px;
  font-weight: 700;
  background: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  background: linear-gradient(68.3deg, rgb(23, 41, 77) 6.3%, rgb(243, 113, 154) 90.9%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgb(243, 113, 154);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
 	padding: 5px;
 	margin: 10px;
}

.reset:hover, .reset:focus {
  color: white;
  transform: translateY(-6px);
}

/*Footer*/

#footer{
	padding-top: 10%;
}

.langChooce {
	color: #17294d;
	font-size: 1.4em;
  transform: all 1s;
  cursor: pointer;
}
 .langChooce:hover{
	color: #f3719a;
	font-size: 1.8em;
	transform: scale(1.1);
}