@charset "UTF-8";
/* CSS Document */

a{
	text-decoration: none;
}

body{
	margin: 0;
	
}

#top{
	width: 100%;
	height: 50%;
	background-color: white;
	top: 0;
	position: absolute
}
#bottom{
	width: 100%;
	height: 50%;
	background-color: #003E51;
	bottom: 0;
	position: absolute;
}

#logo{
	position: absolute;
	width: 80%;
	left: 50%;
	margin-left: -40%;
	bottom:20px;	
}

#soon{
	position: absolute;
	width: 80%;
	left: 50%;
	margin-left: -40%;
	top:20px;
}

#contact{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 40%;
}

#linkedin{
	width: 50px;
	margin-right:25px;
	background-color: white;
}

#mail{
	width: 50px;
	background-color: white;
}

#linkedin:hover, #mail:hover{
	transition: 0.5s;
	background-color: #1abc9c;
}


/* //////////////////////////////////////////Small devices (tablets, 768px and up)////////////////////////////// */
@media only screen and (min-width: 768px) {
	#logo{
		position: absolute;
		width: 50%;
		left: 50%;
		margin-left: -25%;
		bottom:20px;	
	}
	#soon{
		position: absolute;
		width: 50%;
		left: 50%;
		margin-left: -25%;
		top:20px;
	}
	#linkedin{
		width: 40px;
		margin-right:20px;
	}

	#mail{
		width: 40px;
	}
}

/* ////////////////////////////////////////Medium devices (desktops, 992px and up)////////////////////////////// */
@media only screen and (min-width: 992px) {
	#logo{
		position: absolute;
		width: 40%;
		left: 50%;
		margin-left: -20%;
		bottom:20px;	
	}
	#soon{
		position: absolute;
		width: 40%;
		left: 50%;
		margin-left: -20%;
		top:20px;
	}
	#linkedin{
		width: 40px;
		margin-right:20px;
	}

	#mail{
		width: 40px;
	}
}

/* ////////////////////////////////////////Large devices (large desktops, 1200px and up)//////////////////////// */
@media only screen and (min-width: 1200px) {
	#logo{
		position: absolute;
		width: 30%;
		left: 50%;
		margin-left: -15%;
		bottom:20px;	
	}
	#soon{
		position: absolute;
		width: 30%;
		left: 50%;
		margin-left: -15%;
		top:20px;
	}
	#linkedin{
		width: 50px;
		margin-right:25px;
	}

	#mail{
		width: 50px;
	}
}