@import url('https://fonts.googleapis.com/css?family=Bree+Serif');

body {
	font-family: 'AVENIR', book;
	background-color: white;
	width: 1200px;
	height: 720px;
}

.nav a:link {
  color: #6A7767;
  text-decoration: none;
}

.nav a:visited {
  color: #6A7767;
  text-decoration: none;
}

.nav a:hover {
  font-weight: 900;
  text-decoration: none;
}

.nav a:active {
  color: #6A7767;
  text-decoration: none;
}

.Header {
	margin-top: 20px;
}

.logo {
	position: absolute;
	margin: 0px 0px 0px 15px;
}

.nav {
	padding: 5px 0px 0px 100px;
	margin: 0px 60px 0px 0px;
	text-align: right;
	position: relative;
	color: #6A7767;
}

.nav li {
	display: inline-block;
	padding: 0px 30px 0px 30px;
	text-decoration: none;
	font-size: 12pt;
}


.BoxHijauBawahNav {
	margin: 0px 0px 0px 150px;
	background-color:#6A7767 ;
	width: 1050px;
	height: 5px;
	color:white;
}

.Keterangan {
	margin-top: 100px;
	color :#5287A5;
	float: left;
}

.atas1 {
	padding: 0px 0px 0px 30px;
	margin: 10px 0px 0px 30px;
	font-size: 24pt;
	line-height: 0pt;
	color :#31708F;
}

.atasnama {
	padding: 0px 0px 0px 30px;
	margin: 0px 0px 0px 30px;
	font-size: 18pt;
	line-height: 0pt;
	color :#31708F;
}

.KotakBiruAtas {
	margin: 40px 20px 20px 0px;
	width: 500px;
	height: 140px;
	background-color: #5287A5;
	color :white;
}

.textdalam {
	padding: 0.25px 25px 3px 60px;
	text-align: justify;
 	text-justify: inter-word;
}

.GetToKnowMe {
	margin: 30px 0px 0px 55px;
	font-size: 14pt;
	border-style: solid;
	border-color: #5287A5;
	border-radius: 20px;
	width: 180px;
	height: 20px;
	padding: 16px 14px 20px 20px;
}

.GetToKnowMe a:link {
  color: #5287A5;
  text-decoration: none;
}

.GetToKnowMe a:visited {
  color: #5287A5;
  text-decoration: none;
}

.GetToKnowMe a:hover {
  color : white;
  text-decoration: none;
}

.GetToKnowMe a:active {
  color : white;
  text-decoration: none;
}

.GetToKnowMe:hover {
	color :white;
	text-decoration: none;
	background-color: #5287A5;
}

.fotonancy {
	margin:0 auto;
	padding: 80px 0px 0px 100px;
}

.BoxHijauBawahNav_2 {
	margin: 0px 150px 0px 0px;
	background-color:#6A7767 ;
	width: 1050px;
	height: 5px;
	color:white;
}

.KotakTengahAbout a:link {
  color: white;
  text-decoration: none;
}

.KotakTengahAbout a:visited {
  color: white;
  text-decoration: none;
}

.KotakTengahAbout a:hover {
  color : #5287A5;
  text-decoration: none;
}

.KotakTengahAbout a:active {
  color : #5287A5;
  text-decoration: none;
}

.KotakTengahAbout:hover {
	color :#5287A5;
	text-decoration: none;
	background-color: #5287A5;
}

.KotakTengahProject a:link {
  color: white;
  text-decoration: none;
}

.KotakTengahProject a:visited {
  color: white;
  text-decoration: none;
}

.KotakTengahProject a:hover {
  color : #5287A5;
  text-decoration: none;
}

.KotakTengahProject a:active {
  color : #5287A5;
  text-decoration: none;
}

.KotakTengahProject:hover {
	color :#5287A5;
	text-decoration: none;
	background-color: #5287A5;
}

.KotakTengahContact a:link {
  color: white;
  text-decoration: none;
}

.KotakTengahContact a:visited {
  color: white;
  text-decoration: none;
}

.KotakTengahContact a:hover {
  color : #5287A5;
  text-decoration: none;
}

.KotakTengahContact a:active {
  color : #5287A5;
  text-decoration: none;
}

.KotakTengahContact:hover {
	color :#5287A5;
	text-decoration: none;
	background-color: #5287A5;
}

.AboutMe {
	margin: 80px 0px 80px 55px;
	padding: 20px 0px 20px 0px;
	box-sizing: border-box;
	border-radius: 25px;
	background-color: #31708F;
	width: 300px;
	height: 350px;
	font-size: 20px;
	color:white;
	text-align: center;
	align-items: left;
	line-height: 20px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.AboutMe:hover {
	background-color: #6A7767;
}

.JUDUL1 {
	color:white;
	margin: 0 auto;
}

.GambarAbout {
	background-image: url('../gambar/about.jpg');
	background-size: 100% auto;
	background-position: center;
	height: 180px;
	color: #0000;
	box-sizing: border-box;
	margin: 15px 0px 0px 0px;
	text-align: center;
}

.KotakTengahAbout {
	margin: 23px 20px 20px 55px;
	width: 150px;
	height: 20px;
	padding: 20px;
	border-style: solid;
	border-color: white;
	border-radius: 20px;
}

.KotakTengahAbout:hover {
	font-family: 'AVENIR';
	font-size: 20px;
	border-color: #90c0e1;
	background-color: #90c0e1;
	color :#092147;
}

.MyProject {
	margin: 80px 0px 80px 80px;
	padding: 20px 0px 20px 0px;
	box-sizing: border-box;
	border-radius: 25px;
	background-color:#31708F;
	width: 300px;
	height: 350px;
	font-size: 20px;
	color:white;
	text-align: center;
	align-items: left;
	line-height: 20px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.MyProject:hover {
	background-color: #6A7767;
}

.JUDUL2 {
	color:white;
	margin: 0 auto;
}

.GambarProject {
	background-image: url('../gambar/gambar_project.png');
	background-size: 100% auto;
	background-position: center;
	height: 180px;
	color: #0000;
	box-sizing: border-box;
	margin: 15px 0px 0px 0px;
	text-align: center;
}

.KotakTengahProject {
	margin: 23px 20px 20px 55px;
	width: 150px;
	height: 20px;
	padding: 20px;
	border-style: solid;
	border-color: white;
	border-radius: 20px;
}

.KotakTengahProject:hover {
	font-family: 'AVENIR';
	font-size: 20px;
	border-color: #90c0e1;
	background-color: #90c0e1;
	color :#092147;
}

.ContactMe {
	margin: 80px 0px 80px 80px;
	padding: 20px 0px 20px 0px;
	box-sizing: border-box;
	border-radius: 25px;
	background-color: #31708F;
	width: 300px;
	height: 350px;
	font-size: 20px;
	color:white;
	text-align: center;
	align-items: left;
	line-height: 20px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.ContactMe:hover {
	background-color: #6A7767;
}

.JUDUL3 {
	color:white;
	margin: 0 auto;
}

.GambarContact {
	background-image: url('../gambar/gambar_contact.png');
	background-size: 100% auto;
	background-position: center;
	height: 180px;
	color: #0000;
	box-sizing: border-box;
	margin: 15px 0px 0px 0px;
	text-align: center;
}

.KotakTengahContact {
	margin: 23px 20px 20px 55px;
	width: 150px;
	height: 20px;
	padding: 20px;
	border-style: solid;
	border-color: white;
	border-radius: 20px;
}

.KotakTengahContact:hover {
	font-family: 'AVENIR';
	font-size: 20px;
	border-color: #90c0e1;
	background-color: #90c0e1;
	color :#092147;
}

.Project_1 {
	margin: 80px 1px 0px 150px;
	padding: 20px 0px 20px 0px;
	box-sizing: border-box;
	border-radius: 25px;
	background-color: #5287A5;
	width: 300px;
	height: 350px;
	font-size: 20px;
	color:white;
	text-align: center;
	align-items: left;
	line-height: 20px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.Project_1:hover {
	transform: scale(1.2);
	background-color: #90c0e1;
}

.Project_2 {
	margin: 80px 0px 0px 0px;
	padding: 20px 0px 20px 0px;
	box-sizing: border-box;
	border-radius: 25px;
	background-color: #5287A5;
	width: 300px;
	height: 350px;
	font-size: 20px;
	color:white;
	text-align: center;
	align-items: left;
	line-height: 20px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.Project_2:hover {
	transform: scale(1.2);
	background-color: #90c0e1;
}

.Project_3 {
	margin: 80px 0px 00px 0px;
	padding: 20px 0px 20px 0px;
	box-sizing: border-box;
	border-radius: 25px;
	background-color: #5287A5;
	width: 300px;
	height: 350px;
	font-size: 20px;
	color:white;
	text-align: center;
	align-items: left;
	line-height: 20px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.Project_3:hover {
	transform: scale(1.2);
	background-color: #90c0e1;
}

.KotakProject {
	margin: 20px 20px 20px 55px;
	width: 150px;
	height: 20px;
	padding: 20px;
	border-style: solid;
	border-color: #4f4e50;
	border-radius: 20px;
	background-color: #4f4e50;
}

.KotakProject:hover {
	color :#5287A5;
	text-decoration: none;
	background-color: #5287A5;
	border-color: #5287A5;
}


.GambarProject_1 {
	margin-top: 13px;
}

.GambarProject_2 {
	margin-top: 13px;
}

.GambarProject_3 {
	margin-top: 13px;
}


.KotakProject a:link {
  color: white;
  text-decoration: none;
}

.KotakProject a:visited {
  color: white;
  text-decoration: none;
}

.KotakProject a:hover {
  color : white;
  text-decoration: none;
}

.KotakProject a:active {
  color : white;
  text-decoration: none;
}


.fotomouse {
	margin: 30px 0px 50px 560px;
}

.quotes {
	text-align: center;
	color :#31708F;
	margin: 0px 0px 50px 0px;
}

.footer {
	margin: 100px 0px 0px 0px;
	background-color:#6A7767 ;
	width: 1200px;
	height: 120px;
	color:white;
	display: flex;
}

.LogoSocialMedia {
	margin: 20px 0px 0px 50px;
	
}

.copyright {
	margin :0px 0px 0px 30px;
}

.nav_bawah a:link {
  color: white;
  text-decoration: none;
}

.nav_bawah a:visited {
  color: white;
  text-decoration: none;
}

.nav_bawah a:hover {
  color : white;
  font-weight: 900;
  text-decoration: none;
}

.nav_bawah a:active {
  color : white;
  text-decoration: none;
}

.nav_bawah {
	color : white;
	display: inline-block;
	margin: 50px 0px 0px 80px;
}

.nav_bawah li {
	display: inline-block;
	padding: 0px 40px 0px 40px;
	text-decoration: none;
	font-size: 12pt;
}

.BagianBawah_1 {
	margin-top: 10px;
}

.LogoFooter {
	text-align: right;
	margin: 0px 0px 0px 200px;
	
}