/*
	Name: William Kim
	Date: 3/28/18
	Section: CSE 154 AL

	This is the index.css page for MooTrips! Here you will find the styling for all the 
	parts of the website such as the About, Services, and Contact page. There are also links
	to explore other social medias.
*/

@import url('https://fonts.googleapis.com/css?family=Hi+Melody|Open+Sans+Condensed:300');

aside {
	text-align: left;
}

button {
	position: fixed;
	bottom: 0;
	right: 0;
	margin-right: 75px;
	margin-bottom: 25px;

	box-shadow: inset 0px 34px 0px -15px #b54b3a;
	background-color: #a73f2d;
	border: 1px solid #241d13;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	padding: 9px 23px;
	text-decoration: none;
}

button:hover {
	background-color: #b34332;
}

body {
	font-family: "Open Sans Condensed";
}

header {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

h1 {
	font-size: 5vw;	
}

h2 {
	max-width: 40%;
	font-size: 2vw;	
	padding-left: 10%;
	text-align: center;
}

p {
	font-size: 2vw;
}

main p {
	font-family: "Hi Melody";
}

main > p {
	max-width: 40%;
	margin: auto;
}

nav {
	height: 100%;
	width: 160px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #b4bcc4;
	padding-top: 20px;
}

nav a {
	padding: 8px 8px 8px 16px;
	text-align: center;
	text-decoration: none;
	font-size: 25px;
	display: block;
}

nav a:hover {
	color: #f1f1f1;
}

ul {
	list-style-type: none;
}

.blue-back {
	background-color: lightblue;
}

.red-back {
	background-color: red;
}

.green-back {
	background-color: green;
	width: 1080px;
}

.img-header {
	height: 100px;
	width: 100px;
	margin-left: 25px;
	margin-right: 25px;
}

.home {
	text-align: center;
}

.left-shift {
	margin-left: 200px;
}

.hidden {
	display: none;
}

.answer {
	transform: scale(1.35);

}

#about {
	font-size: 2.75vw;
}

#about p {
	line-height: 1;
}

#container {
	position: relative;
}

#img-body {
	height: 30%;
	width: 23%;
	margin-top: 15px;
}

#img-text {
	position: absolute;
	top: 10px;
	left: 40%;
}

#social-media {
	position: fixed;
	left: 0;
	bottom: 0;
	font-size: 1.5vw;
}

