style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Arvo&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400&display=swap');
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing:antialiased;

}

html, body {
	width:100%;
	height:100%;
	margin:0;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color:pink;
	border-bottom:1px solid transparent;
	transition:all 0.3s ease;
	padding:5px;
}

a:hover {
	background:white;
	border-bottom:1px solid gray;
	color:gray;
}

a.social {
	text-decoration: none;
	color:pink;
	padding:5px;
	border-bottom:50px solid transparent;
	padding-bottom:48px;
	transition:all 0.3s ease;
}

a.social:hover {
	/*border:1px dotted pink;*/
/*	border-radius:5px;
	box-shadow:0 0 10px 1px white;
	text-shadow:0 0 10px 1px white;*/
	padding-bottom:0;
	border-bottom:50px solid white;
	color:gray;
}

.header {
	padding:30px 20px;
	width:100%;
	background-color:#8e44ad;
	color:#f5f5f5;
}

header {
	text-align:center;
	max-width:600px;
	margin:0 auto;
	padding:0 20px;
}

h1 {
	margin:0;
	font-family: Arvo;
	font-weight:300;
	font-size:36px;
}

h2 {
	font-family:Lato;
	font-weight:300;
	font-size:20px;
}

ul {
	list-style-type: none;
	padding:0;
}

li {
	display:inline-block;
	font-family:Lato;
	font-weight:400;
	font-size:1.2em;
	margin:0 10px;
	color:pink;
}

.colors {
	z-index:5000;
	width:100%;
	height:35px;
}

#b {
	background-color:#2980b9;
}

#g {
	background-color:#27ae60;
}

#y {
	background-color:#f1c40f;
}

#o {
	background-color:#e67e22;
}

#r {
	background-color:#c0392b;
}

footer {
	text-align: center;
	font-family:Lato;
	font-weight:100;
	color:white;
	padding-top:5px;
	height:35px;
	background-color:#8e44ad;

}