body {
  margin-left: 0;
  margin-top: 0;
  margin-bottom:0;
  text-align: center;
  font-family: 'Merriweather', serif;
  color: #40514E;
  font-weight: 600;
}

h1 {
  margin: 50px auto 0 auto;
  /* circle shorhand S,T,R,B,L*/
  /* top right bottom left--clockwise*/
  font-family: 'Sacramento', cursive;
  font-size: 5.625rem;
  /*1em=100%=16px;   using rem here, just in case to avoid body's or any above level applied em to get added to this...*/
  /*  width: 10%;
  margin:0 auto 0 auto;
  */
  color: #66BFBF;
}

h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  color: #66BFBF;
}

h3 {
  font-family: 'Righteous', cursive;
  font-size: 2em;
  color: #11999E;
}

a {
  color: #11999E;
}

hr {
  border: dotted;
  border-width: 0 0 8px 0;
  width: 10%;
  color: #e0dede;
}

p {
  line-height: 2;
}

/* CLASSES----------------------*/
.top-container {
  /*  background-color: #89c9b8;*/
  position: relative;
  padding-top: 100px;
}

.name {
  /*line-height:2;
  */
}

.Programmer {
  font-weight: normal;
  /*  line-height: 2;
*/
}

.middle-container {
  padding: 100px 0;
}

.bottom-container {
  background-color: #66BFBF;
  padding: 50px 50px 50px 50px;
  color: #66BFBF;
}

.pro {
  text-decoration: underline;
}

.top-cloud {
  position: absolute;
  right: 400px;
  top: 50px;
}

.bottom-cloud {
  position: absolute;
  left: 400px;
  bottom: 300px;
}

.profiles {
  width: 200px;
  height: 200px;
}

.coding {
  width: 220px;
  height: 220px;
  float: right;
  margin-left: 30px;
}

.Gaming {
  width: 230px;
  height: 200px;
  float: left;
  margin-right: 30px;
}

.skill-row {
  width: 50%;
  margin: 100px auto 100px auto;
  text-align: left;
  line-height: 2;
}

.footer-link {
  margin:10px 20px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
}
.footer-link:hover{
  color:#EAF6F6;
}
.last {
  font-size: 0.75rem;
  color:white;
  font-weight:normal;
  font-family: 'Montserrat', sans-serif;
  margin:20px 10px;
}

.intro {
  width: 30%;
  margin: 0 auto 0 auto;
}

.contact-message {
  width: 40%;
  margin: 40px auto 60px auto;
  /*you can write 40px auto 60px also, here auto is for left and right*/
}
.btn {
	background:linear-gradient(to bottom, #39ccaf 5%, #229981 100%);
	background-color:#39ccaf;
	border-radius:8px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.btn:hover {
	background:linear-gradient(to bottom, #229981 5%, #39ccaf 100%);
	background-color:#229981;
}



/*
.desc-gaming{
  clear:left; // clears the left margin, and hence making the text sit below the image
}

.desc-Coding{
  clear:right;
  //clears the right margin, an text sits below image.
}
*/