@font-face {
	font-family: 'Montserrat';
	src:url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Orbitron';
	src:url('../fonts/Orbitron/Orbitron-Regular.ttf') format('truetype');
}

/* Home Page Title */

* {
	margin:0;
	padding:0;
	font-family: 'Montserrat', sans-serif;
}

h1 {
	color: white;
	background-color: black; 
	padding: 2%;
	font-family: 'Orbitron', sans-serif;
	font-size: 35pt;
}



/* Navigatiom */

nav {
	width:100%;
	display: inline-block;
}

nav a {
	width: 25%;
	display: block;
	float:left;
	background-color: #D3D3D3;
}

nav a img {
	width:100%;
}

p#nav{ 
	font-size: 15pt;
	padding:20px;
	text-align: center;
	width:40%;
}

img#table {
	float: right;
	padding:20px;
	width: 45%;
}

section h2#who {
	font-family: 'Orbitron', sans-serif;
	font-size: 40pt;
	display: inline-block;
	transform:rotate(-90deg);
	transform-origin: top left;
	margin-left:45vw;
}




/* TRAITS */

img#traits {
	width: 60%;
	float: left;
	margin-left: 0vw;
	
}

img#traits2 {
	width:30%;
	display:inline-block;
	transform-origin: top left;
	margin-left: 0vw;
}

p{
	font-size: 20px
}

article#trait1 {
	width:30%;
	margin:5px;
	float:right;
	
}

article#trait2 {
	width:30%;
	margin: 5px;
	float: right;
	
}



/* TRENDS - Media */

article {
	display: inline-block;
	vertical-align: top;
 	background-color:gainsboro;
 	width: 28%;
 	margin: 10px;
 	padding: 15px; 
}

article img{
	width:100%;
}

img{ 
	width: 24.8%;

 }



/*Vocab*/

body.vocab h1 {
	color: white;
	background-color: black; 
	padding: 2%;

}

body.vocab h2 {
	position:sticky;
	top:0;
	background-color:gold;
	padding:15px;
}

body.vocab li {
	padding:15px;

}

h2.vocab {
	font-weight: bold;
}