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

body {
	background-image: url("images/bg.jpg");
	background-repeat: no-repeat;
	background-attachment:scroll;
	background-size: 100% auto;
    font-family: "Judson", serif;
    margin:auto auto;
    padding: 20px;
    display:block;
    height: 1440px;
	width:1024px;
}

.container {
    padding: 20px;
	width: 90%;
	min-height:50vh;
	margin:auto;
}

.main {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.left-header {
	width:60%;
	box-sizing: border-box;
	display:flex;
	justify-content: space-evenly;
}

.right-header {
	width:40%;
	box-sizing: border-box;
	display:flex;
	justify-content: space-evenly;
}

.profilepic {
	vertical-align: middle;
	height:281px;
	width:300px;
	border-radius: 50%;
	border: 5px solid #466754;
}

.nataliechujingxuan{
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:96px;
	font-family:Judson;
	line-height:auto;
	border-style:hidden;
	width:589px;
}

.location{
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:20px;
	font-family:Judson;
	line-height:auto;
	border-style:hidden;
	width:359px;
}

.aboutme h{
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:45px;
	font-family:Judson;
	line-height:auto;
	border-style:hidden;
	width:305px;
	display:inline-block;
}

.aboutme p{
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:22px;
	font-family:Judson;
	line-height:auto;
	border-style:hidden;
	width:341px;
}

.contacts h{
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:45px;
	font-family:Judson;
	line-height:auto;
	border-style:hidden;
	width:305px;
	display:inline-block;
	margin-bottom: 20px;
}

.contact a {
	margin-left: 20px;
	padding:3%;
}

.contact-details {
	display:flex;
	flex-direction: column;
	margin-top: 20px;
}

.light {
	color:#aa4414;
	text-align:justify;
	vertical-align:text-top;
	font-size:22px;
	line-height:auto;
	border-style:hidden;
	width:68px;
}

.dark {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:22px;
	line-height:auto;
	border-style:hidden;
	width:161px;
}

.row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.column1 {
	width:50%;
	box-sizing: border-box;
	display:flex;
	justify-content:flex-start;
	padding-top:15%;
}

.column2 {
	width:50%;
	box-sizing: border-box;
	display:flex;
	justify-content:flex-start;
	padding-left:7%;
	padding-top:15%;
	margin-bottom: auto;
}

.info {
	display: flex;
    align-items: center;
}

.left-block {
	margin-top:45px;
	width:57%;
}

.right-block {
	width:43%;
	padding-left:0;
	justify-content: flex-start;
	margin-bottom: auto;
	margin-top:5%;
}

.education {
	align-content: flex-start;
}

.education h {
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:45px;
	line-height:auto;
	border-style:hidden;
	width:305px;
}

.experience {
	margin-top:60px;
}

.experience h {
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:45px;
	line-height:auto;
	border-style:hidden;
	width:305px;
}

.education p {
	width:100%;
}

.experience p {
	width:100%;
}

.year {
	color:#aa4414;
	text-align:justify;
	vertical-align:text-top;
	font-size:20px;
	line-height:auto;
	border-style:hidden;
	width:383px;
}

.school {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:24px;
	line-height:auto;
	border-style:hidden;
	width:221px;
}

.course {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:20px;
	line-height:auto;
	border-style:hidden;
	width:306px;
}

.grade {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:20px;
	line-height:auto;
	width:83px;
}

.languages h {
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:45px;
	line-height:auto;
	width:305px;
}

.languages p {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:24px;
	line-height:auto;
	width:127px;
}

.skills h {
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:45px;
	line-height:auto;
	width:305px;
}

.app {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:24px;
	line-height:auto;
	width:199px;
}

.fa {
	color: #eabb6d;
}

.skills {
	margin-top:60px;
}

.skills-details {
	display:flex;
	flex-direction: column;
	margin-top: 20px;
}

.hobbies {
	margin-top:60px;
}

.hobbies h {
	color:#466754;
	text-align:left;
	vertical-align:text-top;
	font-size:45px;
	line-height:auto;
	width:305px;
}

.hobbies p {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:24px;
	line-height:auto;
	width:321px;
}

.skill-bg {
	background-color: rgb(192, 192, 192); 
	width: 200px;
	height:20px;
	border-radius: 15px;
}

.mandarin {
	background-color: #EABB6D; 
    padding: 1%; 
    text-align: right; 
    border-radius: 15px;
	height:15px;
}

.english {
	background-color: #EABB6D; 
    padding: 1%; 
    text-align: right; 
    border-radius: 15px;
	height:15px;
	width:160px;
}

.malay {
	background-color: #EABB6D; 
    padding: 1%; 
    text-align: right; 
    border-radius: 15px;
	height:15px;
	width:140px;
}

.hokkien {
	background-color: #EABB6D; 
    padding: 1%; 
    text-align: right; 
    border-radius: 15px;
	height:15px;
	width:150px;
}

.cantonese {
	background-color: #EABB6D; 
    padding: 1%; 
    text-align: right; 
    border-radius: 15px;
	height:15px;
	width:125px;
}

.lang {
	color:#000000;
	text-align:justify;
	vertical-align:text-top;
	font-size:24px;
	line-height:auto;
	width:199px;
}