@charset "utf-8";
/* CSS Document */

.container > hr{
	width: 95%;
	border: 1.5px solid black;
}

.container > h2{
	padding: 0 5%;
	font-family: 'Alfa Slab One', serif;
	font-size: 30px;
}

.container{
	width:80%;
	border: 1px solid black;
	margin: 0 auto;
	background-color: #FBF2E1;
}

.button{
	font-family: 'Alfa Slab One', serif;
}

.hi{
	font-family: 'Alfa Slab One', serif;
	color: #F88E8E;
	margin-bottom: 0;
}

.name{
	font-family: 'Allerta';
	margin-top: 0;
}

.self-intro{
	font-family: 'Antic', sans-serif;
}

.introduction{
	display: flex;
	padding-top: 3%;
}

.aside-left{
	width: 50%;
	min-height: auto;
	padding-left: 11%;
	padding-right: 11%;
	padding-bottom: 0;
	box-sizing: border-box;
	
}

.aside-right{
	width: 50%;
	min-height: 40vh;
	padding-left: 9%;
	padding-right: 9%;
	padding-bottom: 0;
	box-sizing: border-box;
}

.title-e{
	color: #FEAB2E;
	margin-bottom: 0;
}

.education{
	display: flex;
	gap: 35%;
	padding-left: 15%;
}

.bga{
	padding-bottom: 22px;
}

.secondary > h3{
	color: #FEAB2E;
	font-family: 'Allerta';
	font-size: 20px;
	text-decoration: underline;
	font-weight: bolder;
	margin-bottom: 0;
}

.tertiary > h3{
	color: #FEAB2E;
	font-family: 'Allerta';
	font-size: 20px;
	text-decoration: underline;
	font-weight: bolder;
	margin-bottom: 0;
}

.secondary > p{
	font-family: 'Antic', sans-serif;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 5px;
}

.tertiary > p{
	font-family: 'Antic', sans-serif;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 20px;
}

.title-s{
	color: #8FC986;
}

.skills{
	display: flex;
	min-height: 180px;
}

.adobe{
	width: 70%;
	padding: 0 10%;
}

.title-h{
	color: #C1A3DE;
}

.hobbies > ul{
	list-style: none;
	display: flex;
	font-family: 'Antic', sans-serif;
	padding: 0 12%;
	font-size: 16px;
	flex-direction: row;
}

.hobbies > ul li:nth-child(odd){
	background: #FEDDFF;
}

.hobbies > ul li:nth-child(even){
	background: #FFE7D7;
}

.hobby{
	width: 30%;
	gap: 5%;
}

.title-p{
	color: #F76A6A;
}

.project{
	display: flex;
	gap: 20%;
	text-align: center;
	padding: 0 10%;
}

.project > h3{
	font-family: 'Allerta';
}

.column{
	font-family: 'Antic', sans-serif;
	font-size: 16px;
}

.column > h3{
	text-decoration: underline;
	font-size: 20px;
	font-weight: bolder;
	font-family: 'Allerta';
	color: #F76A6A;
}

.title-w{
	color: #99BDF2;
}

.work-experience{
	text-align: center;
	min-height: 400px;
	padding-left: 20%;
}

.work{
	font-size: 16px;
	width: 70%;
	background: #D7F0FF;
	border-radius: 10px;
	padding: 1%;
	margin-bottom: 15px;
}

.work > h4{
	font-weight: bolder;
	font-family: 'Allerta';
	text-decoration: underline;
	color: #99BDF2;
}

.work > h5{
	font-weight: bolder;
	font-family: 'Allerta';
}

.work > p{
	font-family: 'Antic', sans-serif;
	font-size: 16px;
}

.title-c{
	color: #EDA5A5;
}

.info > ul{
	display: flex;
	padding: 0 12%;
	font-size: 20px;
}

.contacts > ul{
	list-style: none;
}

.contacts{
	padding-left: 10%;
	padding-top: 5%; 
	font-family: 'Antic', sans-serif;
}

.icon{
	width: 10%;
	padding-bottom: 20px;
}

.info{
	display: flex;
	background-color: #FFB0B2;
}

input[type=text], select, textarea {
  width: 100%; 
  padding: 12px; 
  border: 2px solid #FFB0B2;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #FF0004;
}

.form {
  border-radius: 5px;
  background-color: #FFB0B2;
  padding-right: 40px;
}

.contactform{
  font-family: 'Antic', sans-serif;
  width: 60%;
}

@media (max-width:800px){
	.introduction{
		display: block;
	}
	.education{
		display: block;
	}
	.skills{
		display: block;
		width: 100%;
	}
	.hobbies > ul{
		flex-direction: column;
	}
	.project{
		display: block;
	}
	.work-experience{
		display: block;
	}
	.info{
		display: block;
		width: 100%;
	}
	.aside-left{
		width: 40%;
		display: block;
	}
	.aside-right{
		width: 100%;
	}
	.contactform{
		width: 100%;
		display: block;
	}
}










