/* Base */
*{
	padding: 0;
	margin: 0;
}
body{
	font-family: 'Montserrat', sans-serif;
	display: grid;
}
.wrapper{
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.wrapper .right-side{
	display: grid;
	text-align: center;
	align-content: center;
}

/* Typography */
p{
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	color: #ffffff;
	text-decoration: none;
}
.fab{
	font-size: 300px;
	color: #ffffff;
}
.link{
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	color: #ffffff;
	text-decoration: none;
	position: relative;
}
.link:after{
	content: '';
	width: 100%;
	height: 3px;
	background-color: #ffffff;
	position: absolute;
	bottom: -5px;
	left: 0;
	margin-top: 5px;

	-webkit-transform: scaleX(0);
	-moz-transform: scaleX(0);
	-ms-transform: scaleX(0);
	-o-transform: scaleX(0);
	transform: scaleX(0);

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}
.link:hover::after{
	-webkit-transform: scaleX(1);
	-moz-transform: scaleX(1);
	-ms-transform: scaleX(1);
	-o-transform: scaleX(1);
	transform: scaleX(1);

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}

/* Navigation */
#navigation{
	position: fixed;
	right: 50px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
    transform: translateY(-50%);
}
#navigation a{
	display: block;
	position: relative;
	margin: 40px 0px;
	width: 20px;
	height: 20px;
	border: 2px solid #ffffff;
	border-radius: 100%;
	color: transparent;

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}
#navigation a:nth-child(1):hover,
#navigation a:nth-child(1):focus{
	background-color: #476bb8;

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}
#navigation a:nth-child(2):hover,
#navigation a:nth-child(2):focus{
	background-color: #e4405f;

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}
#navigation a:nth-child(3):hover,
#navigation a:nth-child(3):focus{
	background-color: #0077b5;

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}
#navigation a:nth-child(4):hover,
#navigation a:nth-child(4):focus{
	background-color: #000000;

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}
#navigation a:nth-child(5):hover,
#navigation a:nth-child(5):focus{
	background-color: #dd4b39;

	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
}

/* Wrappers */
.facebook-wrapper{
	background-color: #476bb8;
}
.instagram-wrapper{
	background-color: #e4405f;
}
.linkedin-wrapper{
	background-color: #0077b5;
}
.github-wrapper{
	background-color: #000000;
}
.gmail-wrapper{
	background-color: #dd4b39;
}

/* Fixed Images */
.facebook-wrapper .left-side{
	background-image: url('images/facebook.png');
	background-size: 250px 250px;
	background-repeat: no-repeat;
	background-position: 10% center;
	background-attachment: fixed;
}
.instagram-wrapper .left-side{
	background-image: url('images/instagram.png');
	background-size: 250px 250px;
	background-repeat: no-repeat;
	background-position: 10% center;
	background-attachment: fixed;
}
.linkedin-wrapper .left-side{
	background-image: url('images/linkedin.png');
	background-size: 250px 250px;
	background-repeat: no-repeat;
	background-position: 10% center;
	background-attachment: fixed;
}
.github-wrapper .left-side{
	background-image: url('images/github.png');
	background-size: 250px 250px;
	background-repeat: no-repeat;
	background-position: 10% center;
	background-attachment: fixed;
}
.gmail-wrapper .left-side{
	background-image: url('images/gmail.png');
	background-size: 250px 250px;
	background-repeat: no-repeat;
	background-position: 10% center;
	background-attachment: fixed;
}

/* Media Queries */
@media screen and (max-width: 600px){
	.right-side{
		grid-row: 1;
	}
	#navigation{
		right: 10px;
	}
	.facebook-wrapper .left-side{
		background-position: center 70%;
	}
	.instagram-wrapper .left-side{
		background-position: center 70%;
	}
	.linkedin-wrapper .left-side{
		background-position: center 70%;
	}
	.github-wrapper .left-side{
		background-position: center 70%;
	}
	.gmail-wrapper .left-side{
		background-position: center 70%;
	}
}