body{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

.container{
	background-image: url("images/unsplash_laptop.jpg");
	background-color: lightblue;
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: 50% 50%;
	position: relative;
}

.profile-logo {
	text-align: center;
	position: relative;
	top: -75px;
}

.intro {
	font-size: 1.3rem;
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	margin: 0 auto;
	color: white;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.3);
	font-weight: 700;
	font-family: 'Marmelad', sans-serif;
}

.me {
	margin: 0;
}

.contact-here {
	text-decoration: none;
	position: absolute;
	top: 125px;
	left: 0;
	right: 0;
	text-align: center;
}

.contact-here h3{
	color: #12456d;
	border: 3px solid #12456d;
	padding: 1%;
	font-weight: 600;
	border-radius: 15px;
	background-color: white;
	display: inline-block;
}

.contact-here h3:hover {
	background-color: lightblue;
}

.more {
	position: absolute;
	top: 175px;
	font-size: 16px;
	left: 0;
	right: 0;
	text-align: center;
	font-weight: 600;
}

.learn-more  {
	text-decoration: none;
	color: white;
}

.learn-more h5:hover {
	color: lightblue;
}

.skills{
	color: #93a4aa;
	margin: 10% auto;
}

.skills-intro {
	text-align: center;
}

.skills-intro h1{
	color: black;
	font-size: 35px;
	font-weight: 900;
}

.skills-intro h2 {
	margin: 6%;
	font-size: 25px;
	font-weight: 900;
}

.websites {
	padding: 4%;
}

.image {
	padding: 0 4%;
}

.about-skills {
	text-align: center;
	padding: 4%;
}

.skills-images {
	width: 15%;
	margin: 2% auto;
}

.skill-heading {
	color: black;
	font-size: 25px;
	margin: 4% auto;
	font-weight: 600;
}

.skills-details p{
	margin: 5% auto;
}

.work{
	background-color: #eee;
	color: black;
	padding: 1%;
	text-align: center;
}

.about-work {
	text-align: center;
	border-bottom: 2px solid lightgrey;
	width: 80%;
	margin: 10% auto;
	padding-bottom: 1%;
}

.about-work h1{
	font-size: 35px;
	font-weight: 700;	
}

.app-heading {
	font-size: 30px;
	font-weight: 600;
}

.tools {
	margin: 0 auto;
}

.about-app {
	padding: 4%;
	font-size: 16px;
	text-align: left;
}

.image {
	width: 100%;
	height: 200px;
	margin: 1% auto;
}

.pics {
	width: 100%;
}

.list {
		width: 50%;
	}

.type {
	padding: 0 35%;
}

.my-bucketlist-type {
	padding: 0 80px;
	padding: 0 80px;
}

.website-button {
	margin: 8% auto;
	border: 3px solid #12456d;
	background-color: white;
	border-radius: 15px;
	color: #12456d;
	padding-top: 4px;
	padding-bottom: 4px;
}

.project-site {
	text-decoration: none;
}

.website-line {
	border-bottom: 1px solid grey;
	margin-bottom: 7%;
	clear: both;
}

.website-button:hover {
	background-color: lightblue;
}

.contact-me{
	background-color: #12456d;
	color: white;
}

.contact-details{
	margin: 0 auto;
	text-align: center;
	padding: 6%;
	font-size: 18px;
}

.mail-link {
	color: cyan;
}

.mail-link:hover {
	color: lightblue;
}

.social-buttons{
	background-color: black;
	/*color: white;*/
	margin: 0 auto;
	text-align: center;
}

.social-buttons.social{
	margin: 6% auto;
	text-align: center;
	padding: 8%;
}

.web-button {
	display: inline-block;
	margin:  8%;
}

i.fa{
	color: #12456d;;
}


i.fab {
	color: #18b8ec;
	text-align: center;
	padding: 1%;
	margin: 5% auto;
}

i.far {
	color: #18b8ec;
		padding: 1%;
}

i.fa-github{
	color: white;
}

@media (min-width: 350px) {
	.work {
		padding-left: 10%;
		padding-right: 10%;
	}

	.about-work {
		width: 100%;
	}
}

@media (min-width: 420px) {
	.work {
		padding-left: 15%;
		padding-right: 15%;
	}

	.web-button{
		display: inline-block;
		margin: 6%;
		padding: 2%;
	}
	
}

@media (min-width: 445px) {
	.work {
		padding-left: 20%;
		padding-right: 20%;
	}

	.list {
		width: 100%;
	}

	.type {
		text-align: center;
	}

	li {
		text-align: center;
	}

	.budgetly-list {
		width: 100%;
	}

	.budgetly-type {
		text-align: center;
	}


@media (min-width: 465px) {
	.container {
		height: 465px;
	}

	.profile-logo {
		top: -65px;
	}

	.intro {
		top: 120px;
		font-size: 30px;
	}

	.contact-here {
		top: 210px;
		font-size: 18px;
	}

	.contact-here h3 {
		padding: 15px;
		border-radius: 11px;
	}

	.more {
		top: 280px;
	}

	.about-app {
		font-size: 18px;
		line-height: 25px;
	}
	
	i.fab {
		padding: 1%;
	 	margin: 0 auto;
	}
}

@media (min-width: 499px) {
	.work {
		padding-left: 50px;
		padding-right: 50px;
	}

	.about-work h1{
		padding-top: 0;

	}

	.type {
		padding: 0 32%;
	}

	.app-heading {
		margin: 18% auto 1%;
	}

	.my-bucketlist-type {
		padding: 0 21%;
	}
}

@media (min-width: 560px) {
	.app-heading {
		margin: 25% auto 1%;
	}
}


@media (min-width: 630px) {
	.app-heading {
		margin: 35% auto 1%;
	}
}

@media (min-width: 670px) {
	.intro {
		color: black;
		background-color: rgba(0, 0, 0, 0);
	}

	.skills {
		margin: 5% auto;
	}

	.about-skills {
		padding: 0;
	}
}

@media (min-width: 730px) {
	.container {
		height: 650px;
	}

	.profile-logo {
		top: -45px;
	}

	.intro {
		top: 150px;
		font-size: 2.37rem;
	}

	.contact-here {
		top: 290px;
	}

	.more {
		top: 380px;
	}

	.about-work {
		width: 50%;
	}
}

@media (min-width: 750px) {
	.app-heading {
		margin: 38% auto 1%;
	}
}

@media (min-width: 860px) {
	.app-heading {
		margin: 45% auto 1%;
	}

}


@media (min-width: 900px) {
	.type {
		padding: 0 40%;
	}

	.my-bucketlist-type {
		padding: 0 35%;
	}
}


@media (min-width: 980px) {
	.profile-logo{
		top: -50px;
	}

	.intro {
		top: 150px;
	}

	.contact-here {
		top: 300px;
	}

	.apps-info {
		width: 50%;
	}

	.app-info {
		width: 50%;
		float: right;
	}

	.about-apps {
		width: 50%;
		color: grey;
	}

	.about-budget {
		float: right;
	}
	.budgetly-type {
		text-align: center;
	}
	.image {
	  width: 50%;
	  float: right;
	  margin: 1% auto;
	}

	.pics {
	  width: 100%;
	}

	.budgetly-image {
	    float: left;
	    margin: 6% auto;
	}

	.work {
		padding-left: 50px;
		padding-right: 50px;
	}

	.about-work h1{
		padding-top: 0;
	}

	.app-heading {
		margin: 5% auto 2%;
	}
	
	.type {
		padding: 0 32%;
	}
	.my-bucketlist-type {
		padding: 0 21%;
	}

	i.fab{
		padding: 1%;
	}	

}
@media (min-width: 1115px) {
	.container {
		height: 1000px;
	}

	.intro {
		top: 250px;
		font-size: 3.47rem;
	}

	.contact-here {
		top: 450px;
		font-size: 25px;
	}

	.more {
		top: 600px;
		font-size: 20px;
	}

	.budgetly-image {
		margin: 0 auto;
	}
	
	.about-work {
		margin: 5% auto;
	}

	.websites{
		padding: 2%;
	}

	.website-line {
		margin: 3% auto;
	}

	.budgetly .website-button {
		margin-bottom: 12%;
	}

	.contact-details {
		padding: 2%;
		font-size: 20px;
	}

	.social-buttons p {
		padding: 1%;
	}

	.budgetly-web-button{
		margin-bottom: 10%;
	}
}

@media (min-width: 1150px) {
	.container {
		height: 1000px;
	}

	.profile-logo {
		top: -25px;
	}

	.intro {
		top: 250px;
	}

	.contact-here {
		top: 450px;
	}

	.budgetly {
		clear: both;
	}

	.my-bucketlist{
		clear: both;
	}
}