@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
/* CSS Document */

/*Website Code © Sam Griffin aka SorrinIceWraith*/

/* COLORS
			LIGHT BLUE - #a7efff
			DARK BLUE - #1c1c2d
			CLOAK GREY - #292934
			BODY GREY - #899499 */

/*DESKTOP*/

	body {
		max-width: 1400px;
		margin: 80px auto;
		background: #e5f6ff;
		font-family: 'Lexend', sans-serif;
		font-size: 14px;
	}

	main {
		background-color: #e0e9ed;
		padding: 40px;
		color:  #000000;
		display: flex;
  		justify-content: space-around;
  		align-items: top;

	}

	/**Header & Headings Codes**/
		header {
			background-color: #88a8b9;
			text-align: center;
			padding-top: 50px;
			padding-bottom: 30px;
			background-size: cover;
			background-position: bottom;
			color: #ffffff;
		}

		header h1 {
			font-family: 'Lexend', sans-serif;
			font-size: 48px;
			letter-spacing: 6px;
			padding-top: 2px;
			padding-bottom: 2px;
			text-align: center;
		}

		h1 {
			font-family: 'Lexend', sans-serif;
			font-size: 48px;
			text-align: center;
		}

		.bodyhead h1, h2, h3 {
			background: #143649;
			padding: 12px;
			margin: 0 auto;
		}

		h2 {
			font-family: 'Lexend', sans-serif;
			font-size: 28px;
			text-align: center;
			background-image: url("assets/50pblack.png");
			padding-top: 10px;
			padding-bottom: 10px;
			color: #FFFFFF;
			border-radius: 15px;
			margin: 0 auto 20px;
			text-transform: uppercase;
			width: 100%;
		}

		h3 {
			font-family: 'Lexend', sans-serif;
			font-size: 24px;
			color: #A7EFFF;
		}

		h2 a {
			color: #FFFFFF;
		}

		.headertext {
			background-color: #4a4740;
			padding: 12px;
			border-style: solid;
			border-color: #FFFFFF;
			border-radius: 25px;
			max-width: 800px;
			margin-left: auto;
			margin-right: auto;
		}

	/**Footer Codes**/

		footer {
			padding: 40px 80px 40px;
			background-color: #88a8b9;
			text-align: center;
			text-transform: uppercase;
			color: #FFFFFF;
			font-size: 12px;
			font-weight: 400;
			line-height: 0.5em;
			border-top-style: solid;
			border-width: 4px;
			border-color: #ffffff;
			margin-bottom: 40px;
		}

		footer a {
			color: #add9d0;
			text-decoration: none;
			font-weight: 700;
		}

	hr {
		color: #FFFFFF;
		border-style: solid;
		border-width: 4px;
		border-radius: 10px;
	}

	a {
		color: #143649;
		text-decoration: none;
		font-weight: 700;
	}
	a:hover {
		color: #a7efff;
		text-decoration: none;
		font-weight: 700;
	}

	/**Navigation Codes**/
		nav ul {
			list-style-type: none;
			margin: 0px;
			padding: 0px;
			background-color: #ffffff;
			overflow: hidden;
			font-family: 'Lexend';
			font-size: 18px;
			text-transform: uppercase;
			letter-spacing: 2px;
		}

		nav li {
			float: left;
		}

		nav li a, .dropbtn {
			display: block;
			color: #143649;
			padding: 10px 20px;
			text-decoration: none;
			font-weight: 800;
			text-align: center;
		}

		nav li a, .alphabet {
			display: block;
			color: #143649;
			padding: 10px 10px;
			text-decoration: none;
			font-weight: 800;
			text-align: center;
		}

		nav li a:hover, .dropdown:hover .dropbtn {
			background-color: #143649;
			color: #ffffff;
		}
		nav li.dropdown {
		  display: inline-block;
		}

		nav li a:hover, .dropdown .alphabet {
			background-color: #143649;
			color: #ffffff;
		}
		nav li a:hover, .dropdown:hover .alphabet {
			background-color: #ffffff;
			color: #143649;
		}

		nav .dropdown-content {
		  display: none;
		  position: absolute;
		  background-color: #ffffff;
		  min-width: 160px;
		  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		  z-index: 0;
		}

		nav .dropdown-content a {
		  color: #143649;
		  padding: 12px 16px;
		  text-decoration: none;
		  display: block;
		  text-align: left;
		}

		nav .dropdown-content-alpha {
		  display: none;
		  position: absolute;
		  background-color: #143649;
		  min-width: 160px;
		  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		  z-index: 0;
		}

		nav .dropdown-content-alpha a {
		  color: #FFFFFF;
		  padding: 12px 16px;
		  text-decoration: none;
		  display: block;
		  text-align: left;
		}

		nav .dropdown-content a:hover {
			background-color: #143649;
			color: #ffffff;
		}

		nav .dropdown:hover .dropdown-content {
		  display: block;
		}

	ul.a {
		list-style-type: "★ ";
	}

	ul.b {
		list-style-type: "✦ ";
	}

	.active {
		background-color: #555555;
	}

	.soloColumn {
		width: 100%;
		float: left;
		display: inline-block;
		vertical-align: top;
	}

	.rightColumn {
		width: 67%;
		padding-left: 20px;
		float: right;
		display: inline-block;
		vertical-align: top;
	}

	.leftColumn {
		width: 33%;
		padding-right: 20px;
		float: left;
		display: inline-block;
		vertical-align: top;
	}

	.alphabetBlock {
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
	}
	.authorBlock {
		display: inline-block;
		vertical-align: top;
		width: 420px;
	}

	.author {
		font-weight: 800;
		text-transform: uppercase;
	}

	.large {
		font-size: 24px;
	}

	/**Table Codes**/
		table {
			width: 80%;
			margin: 0 auto;
		}

		table, th, td {
			border-style: none;
			border-collapse: collapse;
		}

		th, td {
		  padding: 5px;
		  text-align: left;    
		}

		table h3 {
			color: #000000;
			font-size: 30px;
			margin: 0;
		}

	.footercol {
		display: inline-block;
		vertical-align: top;
		width: 33%;
		margin: 0 auto;
		line-height: 1em;
	}

	button {
		background-color: #4a4740;
		color: #FFFFFF;
		padding: 12px 20px;
		border: none;
		border-radius: 18px;
		cursor: pointer;
		margin-top: 20px;
	}

	.row {
		width: 100%;
	}

	.row:after {
		display: table;
		clear: both;
	}

	main li {
		line-height: 28px;
	}

	.status img {
		max-width: 100%;
	}

	.statusdate {
		font-size: 12px;
		font-style: italic;
		font-weight: 300;
		text-align: right;
		line-height: 6px;
	}

	.charaname {
		font-size: 14px;
		font-weight: 300;
		margin-top: 4px;
	}

	.profile /*Just Text Alignment*/ {
		text-align: center;
	}

	/* In-Page Link Bar */
		.links ul {
			list-style-type: none;
			margin-bottom: 10;
			margin-top: 0;
			padding: 0;
			background-color: #1c1c2d;
			overflow: hidden;
			font-family: 'Lexend';
			font-size: 16px;
			text-transform: uppercase;
			letter-spacing: 2px;
			border-style: solid;
			border-width: 4px;
			border-color: #a7efff;
			text-align: center;
		}

		.links li {
			float: left;
		}

		.links li a {
			display: block;
			color: #a7efff;
			padding: 10px 20px;
			text-decoration: none;
			font-weight: 800;
			text-align: center;
		}

		.links li a:hover {
			background-color: #a7efff;
			color: #1c1c2d;
		}

	.bio {
		margin: 10px auto 30px;
		background-color: #ffffff;
		padding: 30px;
		color: #143649;
		font-weight: 400;	
	}

	.status {
		background-color: #ffffff;
		padding: 8px 20px;
		border-style: none;
		color: #143649;
		margin: 12px 0;
	}

	.reviewStars {
		font-size: 32px;
		margin: 8px auto;
		letter-spacing: 12px;
	}
	.bookTitle {
		font-size: 24px;
		margin: 8px auto;
	}
	.bookAuthor {
		font-size: 18px;
		margin: 8px auto;
	}


/*MOBILE*/

	@media (max-width: 767px){

		body {
			margin-left: auto;
			margin-right: auto;
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			font-family: 'Lexend', sans-serif;
			font-size: 18px;
		}

		header h1 {
			font-family: 'Lexend', sans-serif;
			font-size: 32px;
			padding-top: 2px;
			padding-bottom: 2px;
			text-align: center;
			color: #A7EFFF;
		}

		main {
			background-color: #547081;
			padding: 40px;
			color:  #000000;
		}

		h1 {
			font-family: 'Lexend', sans-serif;
			font-size: 60px;
			padding-top: 2px;
			padding-bottom: 2px;
			text-align: center;
		}

		h2 {
			font-family: 'Lexend', sans-serif;
			font-size: 30px;
			text-align: center;
			background-image: url("assets/50pblack.png");
			padding-top: 10px;
			padding-bottom: 10px;
			color: #FFFFFF;
			border-radius: 15px;
			margin: 0 auto 20px;
			text-transform: uppercase;
		}

		h3 {
			font-family: 'Lexend', sans-serif;
			font-size: 20px;
			letter-spacing: 4px;
		}
		
		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			background-color: #1c1c2d;
			overflow: hidden;
			font-family: 'Lexend';
			font-size: 18px;
			text-transform: uppercase;
			letter-spacing: 2px;
			border-top-style: solid;
			border-bottom-style: solid;
			border-width: 4px;
			border-color: #a7efff;
		}

		nav li {
			float: left;
			width: 100%;
		}

		nav li a {
			display: block;
			color: #a7efff;
			padding: 10px 20px;
			text-decoration: none;
			font-weight: 800;
			text-align: center;
		}

		nav li a:hover {
			background-color: #A7EFFF;
			color: #1c1c2d;
		}

		.active {
			background-color: #555555;
		}

		.rightColumn {
			width: 100%;
		}

		.leftColumn {
			min-width: 100%;
		}

		.large {
			font-size: 24px;
		}

		table{
			max-width: 400px;
			margin-left: auto;
			margin-right: auto;
		}
		.footercol {
			width: 100%;
			margin-bottom: 40px;
		}
	}



/*TABLET*/

	@media (min-width: 768px) and (max-width: 1024px){
		
		body {
			max-width: 778px;
		}
		
		.style-nav ul li {
			display: inline-block;
		}
		
		nav ul {
			text-align: center;
		}
		
		header h1 {
			font-size: 40px;
		}
		
		.headertext {
			width: 600px;
		}
		
		header h3 {
			font-size: 20px;
		}
		
		h2 {
			margin-bottom: 16px;
			font-size: 20px;
		}
		
		.rightColumn {
			max-width: 60%;
			margin-left: auto;
			margin-right: auto;
		}
		
		.leftColumn {
			min-width: 30%;
			margin-left: auto;
			margin-right: auto;
		}
		table, td {
			text-align: center;
		}
		table {
			margin: 0;
			padding: 0;
			width: 100%;
		}
	}