/*
	BIRDMOCOPTER DOT COM
	
	website styles, winter 2025
*/

/* big fat fucking reset */
* {
	box-sizing: border;
	padding: 0; margin: 0;
}

body, button {
	font-size: 62.5%; /* 1rem = 10px, deal with it  B^)  */
	font-family: "Segoe UI",								
					Candara, 								
						"Bitstream Vera Sans", 				
							"DejaVu Sans", 					
								"Bitstream Vera Sans", 		
									"Trebuchet MS", 		
										Verdana, 			
											"Verdana Ref",	
												sans-serif;	
}

/* big cheese structural element */
main {
	display: flex;
	height: 100vh;
	align-items: stretch;
}



/* Header Structure */ 
	header {
		width: 75px;
		background-color: #111;
		
	}
		h1 {
			transform: rotate( -90deg );
			position: relative;
			top: 50vh; right: 5px;
			font-size: 2rem;
			font-weight: 900;
			color: #fff;
		}
		h1:hover {
			color: #ff0;
			cursor: help;
		}
		
		footer {
			transform: rotate( -90deg );
			position: absolute;
			bottom: 12vh; left: -10px;
		}
		
			small {
				font-size: 0.9rem;
				font-weight: 900;
				color: #fff;
			}
			
/* header on mobile */
@media ( max-width: 400px ) {
	header {
		width: 35px;
	}
		h1 {
			font-size: 1.5rem;
			top: 40vh; right: 4px;
		}
		footer {
			bottom: 24vh; left: -30px;
		}
		small {
			font-size: 0.8rem;
		}
}
			
			
			
/* Content structure */
	section {
		display: flex;
		height: 100vh;
		align-items: stretch;
	}
	
/* Content on mobile */
@media ( max-width: 400px ) {
	section {
		flex-direction: column;
	}
}



/* Navigation structure */
		article {
			padding: 20px;
			min-width: 600px;
			text-align: center;
		}
			img {
				max-height: 95vh;
			}
/* comic display on mobile*/
@media ( max-width: 400px ) {
	article {
		min-width: 200px;
		max-width: 100%;
	}
	img {
		max-width: 100%;
	}
}

		aside {
			padding: 20px;
		}			
			nav {
				display: block;
				margin-bottom: 20px;
			}
				nav button {
					display: inline-block;
					width: 60px;
					height: 50px;
					margin: 0 5px;
					background-color: #111;
					border: none;
					border-bottom: 4px solid #fff;
					color: #eee;
					font-size: 1.2rem;
					font-weight: 900;
				}
				nav button:hover {
					border-color: #ccc;
					background-color: #eee;
					color: #111;
					cursor: pointer;
				}
				nav button:active {
					background-color: #ff0;
					color: #eee;
					border-color: #ff0;
				}
/* navigation on mobile */
@media ( max-width: 400px ) {
	aside {
		padding: 10px;
	}
	nav {
		margin-bottom: 10px;
	}
	nav button {
		width: 40px;
		height: 30px;
		font-size: 0.9rem;
	}
}
				
			h2 {
				font-size: 1.5rem;
				margin-bottom: 20px;
			}
				#comic-number {
					font-weight: 900;
				}
				#comic-title {
					font-weight: 600;
				}
			
			aside p {
				font-size: 1rem;
				margin-bottom: 20px;
			}
				#series-title button {
					background-color: #111;
					border: none;
					border-bottom: 4px solid #fff;
					color: #eee;
					font-size: 1rem;
					font-weight: 400;
					padding: 5px;
				}
					#series-title button:hover {
						border-color: #ccc;
						background-color: #eee;
						color: #111;
						cursor: pointer;
					}
					#series-title button:active {
						background-color: #ff0;
						color: #eee;
						border-color: #ff0;
					}
				#series-title button:hover {
					cursor: pointer;
				}
/* comic info on mobile */
@media ( max-width: 400px ) {
	h2 {
		font-size: 1.1rem;
	}
	#series-title button {
		font-size: 0.9rem;
	}
}