@import 'tailwindcss';
/* #bb0000 = red, #fffc00 = yellow, #3B5998 = dark blue, #6D6968 = dark gray, #232429 = black, #BA55D3 = medium orchid, #DCDCDC = gainsboro gray */
/*								References
W3schools. (n.d.-a). How TO - Right Aligned Menu Buttons. How To Create Right Aligned Menu Links. https://www.w3schools.com/howto/howto_css_topnav_right.asp 
W3schools. (n.d.-b). How TO - Social Media Buttons. How To Create Social Media Buttons. https://www.w3schools.com/howto/howto_css_social_media_buttons.asp 
*/
.fa {
	padding: 5px;
	font-size: 25px;
	width: 25px;
	text-align: center;
	text-decoration: none;
	border-radius: 30%;
} /* (W3schools, n.d.-b) */

.fa:hover {
	opacity: 0.7;
} /* (W3schools, n.d.-b) */

.fa-youtube {
	background: #bb0000;
	color: white;
} /* (W3schools, n.d.-b) */

.fa-snapchat-ghost {
	background: #fffc00;
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1 px black;
} /* (W3schools, n.d.-b) */

.fa-facebook {
	background: #3B5998;
	color: white;
} /* (W3schools, n.d.-b) */

body {
	margin: 0;
	padding: 0;
}

h1 {
	margin-top: 60px;
	margin-left: 10px;
} 

h2 {
	margin-left: 10px;
}

p {
	margin: 10px;
} 

footer {
	text-align: center;
	padding: 3px;
	background-color: #DCDCDC;
	color: black;
} /* (W3schools, n.d.-b) */

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #232429;
	position: fixed;
	top: 0;
	display: flex;
	width: 100%;
}

ul li a {
	display: block;
	color: white;
	padding: 14px 16px;
	text-decoration: none;
}

ul li a:hover {
	background-color: #6D6968;
}

ul li a.active {
  background-color: #BA55D3;
}

.navbar {
	overflow: hidden;
	background-color: #232429;
} /* (W3schools, n.d.-a) */

.navbar a {
	float: left;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
} /* (W3schools, n.d.-a) */

.navbar a:hover {
	background-color: #DCDCDC;
	color: black;
} /* (W3schools, n.d.-a) */

.navbar a.active {
	background-color: #BA55D3;
	color: white;
} /* (W3schools, n.d.-a) */

.navright {
	float: right;
} /* (W3schools, n.d.-a) */

.container {
	border: 2px solid #ccc;
	background-color: #eee;
	border-radius: 5px;
	padding: 16px;
	margin: 16px 0
}

.container::after {
	content: "";
	clear: both;
	display: table;
}

.container img {
	float: left;
	margin-right: 20px;
 	border-radius: 50%;
}

.container span {
	font-size: 20px;
	margin-right: 15px;
}

@media (max-width: 500px) {
  .container {
      text-align: center;
  }
  .container img {
      margin: auto;
      float: none;
      display: block;
  }
}