body{
  color: #40514E;
  margin: 0;
  text-align: center;
}
h1{
  margin: 0 auto 0 auto;
  font-family:sans-serif;
  font-size: 2rem;

}
h2{
  margin: 0 auto 0 auto;
  font-family:sans-serif;
  font-size: 2.5rem;
  color: #66BFBF;
  padding-bottom: 10px;

}

.top {
  background-color: #341677;
}
.middle{
  background-color: #341677;
  margin: 100px 0;
}
.bottom{
  background-color: #341677;
  margin: 100px 0;
}

.roc{
  width: 100px;
  height: 100px;
  position: relative;
  left: 18%;

}

.roc1{
  width: 5em;
  height: 5em;
  position: absolute;
  left: 15%;

}

.top-cloud{
  width: 108px;
  position: absolute;
  left: 200px;
}
.bottom-cloud{
  position: relative;
  left: 140px;
}

.rocketer {
  padding-top: 10pt;
  background-color: #341677;

}

.hoho{
  font-size: 6.3rem;
  color: white;
  font-family: fantasy;
}
.p1{
  color: white;
  font-size: 2.7rem;
  font-family: fantasy;
}
.pelanet{
  background-color: #341677;
}
.pelanet1{
  width: 100px;
  height: auto;
  background-color: #341677;
  position: relative;
  left: 30%;
}
.mountain-cloud {
  width: 50px;
  height: auto;
  position: relative;
  left: 30%;
}

.profile1{
  margin-bottom: 50px;
  width: 450px;
  height: auto;
  border-radius: 90px;
}

.profile2{
  font-weight: bold;
  font-size: 2em;
  font-family:sans-serif;
  color:#40514E;
}
.profile3{
  width: 36%;
  text-align: center;
  margin: 0 auto 0 auto;
  font-size: 18px;
  font-family: monospace;
  color:#40514E;
}

.catatan{
  color: #e7f3ee;
}
.skill-row{
    background-color: white;
}
.middle-container{
    background-color: white;
}
.skills{
  margin-top: 20pt;
  background: white;
}
hr {
  margin-top: 3em;
  border-style: none;
  border-top-style: dotted;
  border-color: grey;
  border-width: 6px;
  width: 5%;
}
.skill-row {
  width: 50%;
  margin: 100px auto 100px auto;
  text-align: left;
  line-height: 2;
}
.skill-row1 {
  width: 50%;
  margin: 50px auto 50px auto;
  text-align: left;
  line-height: 2;
}
.Swift{
  width: 25%;
  height: auto;
  float: left;
  margin-right: 30px;
}
.android{
  width: 25%;
  float: right;
  margin-right: 30px;
}
.code-clear{
  clear: left;
}
.code-clear1{
  clear: right;
}
.bottom-container{
  background-color:#11CDD4;
}
h3 {
  color: #66BFBF;
}
.contact-me{
  width: 36%;
  margin: 40px auto 60px auto;;

}

.btn {
	background-color:#11CDD4;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #11CDD4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
  margin: 2em auto 2em auto;
}

.btn:hover {
	background-color:#341677;
}

.btn:active {
	position:relative;
	top:1px;
}

.pesticide-for-chrome-result{
  background-color:#341677;
}

.button-container{
background-color:#341677;
padding: 50px 0 20px 0 ;
}

.catatankaki {
  color: white;
  padding:16px 31px;
  border: 10em;
}

.footer-link{
color: white;
font-family:Arial;
font-size:17px;
padding:16px 31px;
margin: 2em auto 2em auto;

}


/* Add a black background color to the top navigation */
.topnav {
  background-color:  #341677;
  overflow: hidden;

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 2em;
  font-family: fantasy;

}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #341677;
  color: #11CDD4;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #66BFBF;
  color: white;

}