/* Fonts import */
@import url('https://fonts.googleapis.com/css?family=Merriweather');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

html { 
	position:relative; 
	min-height:100%;
	width: 100%;
}

body {
	background-color: #ffbfd9;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font: 16px/24px Arial,Tahoma,sans-serif;
}

a {
	text-decoration: none;
}

.header {
	background-color: #0a0a0a;
	background: linear-gradient(to top, #0a0a0a,black);
	background-size: cover;
	width: 100%;
	margin: 0 auto;
}

.topmenu {
	position: relative;
	left: -3%;
	float: right;
	height: 50px;
	line-height: 50px;
}

.topmenu a{
	margin: 0 0 0 10px;
	color: #FFD8E6;
}

.topmenu a:hover{
	color: #FFFFFF;
}

.micrologo {
	padding: 0 0 0 2%;
}

/*
.micrologo img:hover{
	transform: scale(1.1);
} */

.content {
	width: 80%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 0 10px;
	background-color: #ffbfd9;
	text-align: center;
	/* position: relative; */
    padding-bottom: 40px;
    /* box-sizing: border-box; */
}

.project {
	display: inline-block;
	width: 430px;
	height: 222px;
	margin: 20px;
	background-color: #000000; 
	
	text-align: center;
	opacity: 0.94;
}

.project:hover{
	transform: scale(1.08);
	opacity: 1;
}

.project p{
	color: aliceblue;
}

.prj_name {
	font-family: 'Merriweather', serif;
	font-size: 200%;
	padding: 13% 0 0;
	line-height: 120%;
}

.prj_extra {
	font-family: 'Josefin Sans', sans-serif;
	font-style: italic;
	font-weight: lighter;
	float: bottom;
}

.project a :hover{
	color: cyan;
}

.footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	margin: 0;
	background-color: black;
	text-align: center;
	height: 40px;
	line-height: 40px;
	opacity: 0.88;
}

.footer-copyright {
	color: #ffd8e6;
	font-family: 'Montserrat', sans-serif;
	margin: auto;
}

@media screen and (max-device-width: 38.75em) {
	.content {
		width: 100%;
	}

	.topmenu {
		display: none;
	}

	.micrologo {
		margin: auto;
		float: none;
	}

	.header {
		text-align: center;
	}

	.project {
		width: 90%;
	}
}

@media screen and (min-device-width: 59.6875em) {

}