@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}
.container{
	align-content: center;
	justify-content: center;
	margin-right:5%;
	margin-left:5%;
}

body{
	background-image: url("image/bg2.png");
	background-repeat: no-repeat;
	background-size: 90%;
	min-height: 30%;
	background-position: 50% 0%;
}
h1,h2,h3,a,input, label, p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#9BBDCD;
  font-size: clamp(7px, 1.2vw, 15px);
}
label{
	color:aliceblue;
}
h1, #contactme{
	color:aliceblue;
	font-weight:600;
	font-size: clamp(12px, 2vw, 30px);
}
h2{
	font-size: clamp(12px, 2vw, 30px);
	font-weight:500;
}
.projcolor, .info, p{
	color:#827E9E;
}

.navi{
	height: auto;
	background-color: #F0DAE1;
	display: flex;
	gap: 3%;
	justify-content: flex-end;
	padding:1% 2% 1% 1%;
	padding-right:1%;
	box-sizing: border-box;
	position:fixed;
	width:90%;
}
.navs{
	padding-top:1vw;
}
.contac{
	background-color:#186791;
  	border: none;
	border-radius: 18px;
  	color: white;
  	padding: 0.7vw;
	margin-bottom: 0.1vw;
	max-width: 130px;
	height: auto;
	cursor: pointer;
	align-content: center;
	text-align: center;
}
ul {
  list-style: none;
}

a{
	text-decoration: none;
	color:#827E9E;
}
a:hover, .contac:hover{
	font-weight: bold;
}
.contac:hover{
	background-color: #88A2B9;
}
input[type=submit]:hover{
	font-weight:bold;
	background-color: #186791;
}
.main{
	display: flex;
	justify-content: space-evenly;
	align-content: flex-start;
	margin-right: 9%;
	margin-top: 5%;
	margin-bottom: 5%;

}
.aside-left{
	width: 58%;
	height: clamp(40%, 50%, 70%);
	max-height:50%;
	margin-top:8%;
	margin-left:5%;
	background-color: #F0DAE1;
	padding: 10px;
	text-align: center;
	border-radius: 5%;
	box-sizing: border-box;
	box-shadow: 0px 5px 5px #A1ABB0;
}
.photo{
	text-align: center;
	height: auto; 
	width: 80%;
}

.icons{
	float:left;
	align-content: flex-start;
	max-width:15%;
	height:auto;
}
#phone{
	max-width: 13%;
	margin-left:2%;
}
#be{
	max-width:25%;
}
.be{
	margin-right: 15%;
}
#htm{
	height:80px;
}
.aside-right{
	width: 100%;
	height: auto;
	min-height:80%;
	padding: 5% 0% 0% 5%;
	margin-top:10%;
	margin-bottom: 1%;
	align-content: flex-end;
}

.education{
	margin-top: 30%;
}
#education{
	max-width:100%;
	height: auto;
	min-height: 60%;
}
#skill{
	float:center;
	align-content: center;
	margin-bottom:10%;
	height: auto;
	max-width: 90%;
	min-height: 50%;
	margin-left:5%;
}
.aside-left1{
	width: 50%;
	height: 400px;
	align-content: flex-start;
}
.images{
	align-content: flex-start;
}
.info{
	padding:7%;
}


.row{
	display: flex;
	justify-content: space-evenly;
	align-content: center;

}
.column{
	height: 10%;
	padding: 15px;
	border-radius: 10px;
	margin-top: 5%;
	margin-bottom:5%;
}
#img1, #img2, #img3 {
		border-radius: 4%;
		height: auto;
		width: 100%;
		min-height:30%;
		margin-bottom: 8%;
		
}
#img2{
	max-height: 500px;
}
#img1{
	max-height: 500px;
}
.projectbg{
	height:auto;
	width: auto;
	padding:5%;
	background-color: #F0DAE1;
	box-sizing: border-box;
	align-content: flex-start;
}
.cform{
	align-content: center;
	text-align: center;
	background-image:url("image/bg.png");
	padding: 5%;
	box-sizing: border-box;
	overflow:hidden;
	height:auto;
	width:auto;
}

#contactme{
	margin-bottom: 5%;
}
input, textarea{
			background-color: aliceblue;
  			border: none;
			border-radius: 5px;
			padding: 15px;
			width: 38%;
			height:7%;
			align-content: center;
			text-align: center;
		}

input[type=submit]{
  			background-color:#88A2B9;
			border-style: outset;
  			border: none;
			border-radius: 90px;
  			color:white;
  			padding: 1.5% 5%;
			width: clamp(10%, 15%, 20%);
			cursor: pointer;
			align-content: center;
			text-align: center;
}
#namelabel, #commlabel{
	margin-right: 31%;
}
#emaillabel{
	margin-right: 33%;
}