@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	background: #C0BEBE;
	font-family: sans-serif;
}

#container {
	width: 80%;
	min-width: 780px;
	max-width: 1280px;
	margin: 0 auto;
}

header {
	background: #FFBC14;
	height: 200px;
	text-align: center;
	padding-top: 30px;
	box-sizing: border-box;
}

header h1 {
	font-size: 60px;
	margin: 0;
}

header h2 {
	margin: 0;
}

nav {
	background: grey;
	height: 60px;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

nav a {
	color: yellow;
	text-decoration: none;
	text-transform: uppercase;
	background: red;
	display: block;
	width: 33.333%;
	height: 60px;
	line-height: 50px;
	text-align: center;
	float: left;
	border: solid 5px #FFBC14;
	box-sizing: border-box;
	border-radius: 10px;
}

nav a:hover {
	background: #DFDEDE;
	color: black;
}

section {
	background: white;
	padding: 50px;
	text-align: center;
}

.book {
	font-size: 35px;
}

.intro {
	font-size: 20px;
}

footer {
	padding: 25px;
	text-align: center;
	font-size: 12px;
	background: black;
	color: white;
}

/*---------------COLORS----------------*/

.colors div {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	border: solid 2px #090808;
	text-align: center;
	padding-top: 20px ;
	display: inline-block;
	margin-right: 15px
}

h4 {
	text-align: left;
}

h3 {
	text-decoration: underline;
}

/*---palette 1---*/
.c1 {
	background: #024959;
}
.c2 {
	background: #F2C12E;
}
.c3 {
	background: #F2AE30;
}
.c4 {
	background: #A64F03;
}
.c5 {
	background: #593E25;
}
/*---palette 2---*/
.c1-a {
	background: #348888;
}
.c2-a {
	background: #22BABB;
}
.c3-a {
	background: #9EF8EE;
}
.c4-a {
	background: #FA7F08;
}
.c5-a {
	background: #F24405;
}
/*---palette 3---*/
.c1-b {
	background: #A6444C;
}
.c2-b {
	background: #82D9C0;
}
.c3-b {
	background: #388C6E;
}
.c4-b {
	background: #F2B138;
}
.c5-b {
	background: #D97762;
}
/*---palette 4---*/
.c1-c {
	background: #565902;
}
.c2-c {
	background: #8C877D;
}
.c3-c {
	background: #D9751E;
}
.c4-c {
	background: #BF3604;
}
.c5-c {
	background: #731702;
}
/*---palette 5---*/

.c1-d {
	background: #7E8C69;
}
.c2-d {
	background: #34401B;
}
.c3-d {
	background: #D8D9D7;
}
.c4-d {
	background: #F2A20C;
}
.c5-d {
	background: #8C4227;
}

/*--------------- TYPOGRAPHY---------------*/

.type h3 {
	text-align: center;
}

.type {
	text-align: left;
}

.type1 h4 {
	font-family: "Silkscreen", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 50px;
	letter-spacing: -7px;
	margin-bottom: -10px;
}

.type1 p {
	font-family: "Montserrat", serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;
}

.type2 h4 {
	font-family: "Geo", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 60px;
	margin-bottom: -18px;
}

.type2 p {
	font-family: "Rancho", serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 25px;
	line-height: 22px;
}

.type3 h4 {
	font-family: "VT323", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 80px;
	letter-spacing: -4px;
	margin-bottom: -16px;
	margin-top:58px;
}

.type3 p {
	font-family: "Schibsted Grotesk", serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;  
}

.type4 h4 {
	font-family: "Mogra", serif;
	font-weight: 400;
	font-size: 55px;
	margin-bottom: -16px;
	margin-top: 70px
}

.type4 p {
	font-family: "Aldrich", serif;
  	font-weight: 400;
  	font-style: normal;   
}

.type5 h4 {
	font-family: "Nabla", serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
  	font-variation-settings: "EDPT" 100, "EHLT" 12;
	font-size: 55px;
	margin-bottom: -18px;
	margin-top: 60px;
}

.type5 p {
	font-family: "Solway", serif;
  	font-weight: 400;
  	font-style: normal; 
}

.t1, .t2, .t3, .t4, .t5  {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: normal;
	font-weight: bold;
}

.p1, .p2, .p3, .p4, .p5  {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: normal;
	font-weight: bold;
}

/*----------IMAGERY----------*/

img {
	display: inline-block;
	width: 200px;
	height: 350px;
	border: solid 2px black;
	margin: 5px;
}