h1 {
  margin-top: 0;
  padding-top: 60px;
  font-family: 'Merienda One', cursive;
  font-size: 3.5em;
  color: #F9F3F3;
}

h2 {
  padding-top: 100px;
  margin-top: 0;
  color: #F9F3F3;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  font-size: 2.5em;
}

h3 {
  font-size: 150%;
  color: #F9F3F3;
  margin-top: 100px;
  margin-bottom: 16px;
  font-family: 'Montserrat', sans-serif;
}

hr {
  margin-top: 1px;
  margin-bottom: 1px;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

body {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  z-index: 1;
}

p {
  color: #F9F3F3;
  line-height: 2;
}

a {
  color: #1000f3;
  font-family: 'Montserrat', sans-serif;
  margin: 10px 0px;
  text-decoration: none;
  font-size: 14pt
}

a:hover {
  color: #3EDBF0
}

/***********************CLASS SELCETORS*************************/
.top-container {
  margin-bottom: 0;
  background-image: url(images/nightshade.png);
  background-size: 500px;
  height: 300px;
  width: 100%;
}

.middle-container {
  background: linear-gradient(#0A0C14, #0056FF, #64CCEF);
}

.portfolio-middle-container {
  background: linear-gradient(#0A0C14, #0056FF, #64CCEF);
  
}

.intro {
  width: 50%;
  margin: auto;
}

.p1 {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 1.4em;
  color: white;
}

.bottom-container {
  background-color: #64CCEF;
  margin: 0;
  height: 400px;
  width: 100%;
  background-image: url(images/beach.png);
  background-size: auto;
}

.electrical-img {
  position: relative;
  width: 35%;
  z-index: 2;
  float: left;
  margin-right: 30px;
}

.smw-img {
  position: relative;
  width: 35%;
  z-index: 2;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
}

.coding-img {
  position: relative;
  width: 35%;
  z-index: 2;
  float: right;
  margin-left: 30px;
  margin-top: 50px;
}

.coding {
  margin-bottom: 0;
  padding-bottom: 50px;
}

.p2 {
  color: white;
}

.cloud1-img {
  width: 25%;
  height: 15%;
  position: absolute;
  left: 90%;
  top: 50%;
}

.cloud2-img {
  width: 35%;
  height: 15%;
  position: absolute;
  right: 65%;
  top: 60%;
  z-index: 1;
}


.h2-1 {
  color: white;
  padding-top: 50px;
  padding-bottom: 120px;
  margin-bottom: 0;
  font-family: 'Merienda Sans', cursive;
  font-weight: 900;
  font-size: 3em;
}

.skill-row {
  width: 50%;
  margin: auto;
  text-align: left;
}

.portfolio-row {
  width: 20%;
  margin-left: 15px;
  padding-top: 15px;
  text-align: left;
}

.btn {
	box-shadow: 0 1px 0 0 #f0f7fa;
	background:linear-gradient(to bottom, #34b6ed 5%, #028bcf 100%);
	background-color:#34b6ed;
	border-radius:8px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:'Arial';
	font-size:26px;
	font-weight:bold;
	padding:13px 24px;
	text-decoration:none;
	text-shadow:0 -1px 0 #5b6178;
}

.btn:hover {
	background:linear-gradient(to bottom, #028bcf 5%, #34b6ed 100%);
	background-color:#028bcf;
}
.btn:active {
	position:relative;
	top:1px;
}

.Backbtn {
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	background-color:#33bdef;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:8px 8px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
.Backbtn:hover {
	background:linear-gradient(to bottom, #028bcf 5%, #34b6ed 100%);
	background-color:#028bcf;
}
.Backbtn:active {
	position:relative;
	top:1px;
}

.linkbtn {
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	background-color:#33bdef;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:8px 8px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
  margin-right: 0px;
}
.linkbtn:hover {
	background:linear-gradient(to bottom, #028bcf 5%, #34b6ed 100%);
	background-color:#028bcf;
}
.linkbtn:active {
	position:relative;
	top:1px;
}


.copyright {
  margin-top: 30px;
  font-size: 0.75em;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.iframe-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}