body {
    background-color: rgb(68, 100, 68);
    padding: 10px;
    margin: 0px;
    padding-bottom: 30px;
    font-size: 1.5em;
}

.outer {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.name {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name h1 {
    margin-bottom: 0px;
}

.project {
    padding: 20px;
    max-width: 80%;
    min-width: 80%;
    min-height: 100px;
    margin-top: 15px;
    background-color: rgba(188, 238, 188, 0.39);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    padding-bottom: 35px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
}

.project .title {
    margin-left: 10px;
    display: block;
    margin-top: 5px;
}

.project div {
    margin-top: 5px;

}

.project span {
    margin-left: 10px;
    font-weight: bold;
}

.skills {
    color: rgb(25, 10, 230);
}

.skillsdiv {
    padding-left: 5px;
    color: rgb(25, 10, 230);
    font-weight: bold;
}

.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30px;
}

.outerline {
    display: flex;
}

.descriptioncontent {
    padding-left: 10px;
}


@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
 @import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
 * {
	font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}
.bg {
	width: 100vw;
	height: 55vh;
}

.blog-card {
	display: block;
	position: relative;
	top: 7vw;
	width: 90vw;
	height: 250px;
	margin: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
	transition: all 450ms ease-out 0s;
	overflow: hidden;
}

.blog-card .blog-img {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	height: 100%;
	top: -9999px;
	left: -9999px;
	right: -9999px;
	bottom: -9999px;
	margin: auto;
	overflow: hidden;
}

.blog-card:hover {
	box-shadow: 0 2px 35px rgba(0, 0, 0, 0.85);
}

.blog-card:hover .text-overlay {
	background: rgba(255, 255, 255, 0.8);
	height: 50%;
	top: 50%;
	transition: all 450ms ease-in-out 0s;
}

.blog-card:hover p {
	height: 60px;
	transition: all 350ms ease-in-out 0s;
}

.blog-card:hover p a {
	visibility: visible;
}

.text-overlay {
	position: relative;
	background: rgba(255, 255, 255, 0.6);
	width: 100%;
	height: 40%;
	top: 60%;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
	padding: 10px 12px;
	overflow: hidden;
	transition: all 450ms ease-in-out 0s;
	cursor: pointer;
}

.text-overlay h2 {
	color: rgba(0, 0, 0, 0.85);
	letter-spacing: 0.0225em;
	width: auto;
	margin: 0;
}

.text-overlay p {
	color: #555;
	width: 380px;
	height: 38px;
	margin: 8px 0;
	line-height: 1.25;
	text-overflow: ellipsis;
	overflow: hidden;
}

.text-overlay a {
	color: #378aee;
	text-decoration: none;
	transition: all 350ms linear;
	visibility: hidden;
}

.text-overlay a:hover {
	color: #449cc5;
	border-bottom: 1px dotted #47a8f2;
}*

.credit {
	position: relative;
	color: rgba(255, 255, 255, 0.85);
	font-family: "Lato", 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.5em;
	font-weight: 300;
	text-align: center;
	bottom: -22vh;
}

.credit .creator-link {
	color: rgba(255, 255, 255, 0.95);
	font-family: 'Kaushan Script', 'Lato', 'Helvetica Neue', sans-serif;
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: all 350ms linear;
}

.credit .creator-link:hover {
	color: #44bcc5;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	transition: all 350ms linear;
}

@media only screen and (max-width: 950px) {
    img {
        width:400px;
    }
}

@media only screen and (max-width: 700px) {
    img {
        width:200px;
    }
}

@media only screen and (max-width: 450px) {
    .header {
        display: flex;
        flex-direction: column;
        justify-items: center;
        margin-bottom: 30px;
    }
    img {
        width:200px;
    }
    .project .title {
        margin-left: 10px;
        margin-bottom: 10px;
        display: block;
        margin-top: 5px;
    }
    .project {
		max-width: 100%;
		min-width: 100%;
    }
    .blog-card {
	height: 350px;
    }
	.outer {
		width: 100%;
	}
	body {
		padding: 3px;
	}
}