/* main page background color and text color */
body {
   background-color: #111111; 
   color: #dddddd;
   margin: 0;
}
/* header at top of page */
header {
	background-color: rgba(32, 32, 32, 0.8); /* transparency */
    color: #2bbc8a; /* green text color */
	/* positioning */
    padding: 0px 20px;
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex; /* allows words to change size */
	flex-direction: row; /* row for tabs */ 
	align-items: flex-start; 
	border-bottom: 2px solid #666666;
	gap: 20px;
}
/* yinyang logo positioning and hover feature*/ 
.logo {
	padding: 15px 0px;
	height: 50px;
	width: auto;
}

.logo:hover {
	content: url('YinYang.png');
}

/* header content is "Joseh Davies" set to column to stack
on top of tabs */
.header-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* coloring of joseph davies */
header h1 {
	color: #dddddd;
	margin-top: 10px;
    margin-bottom: 0px; 
}

header h1 a {
    text-decoration: none;  /* Removes underline */
    color: inherit;         /* Inherits text color from parent (h1) */
    font-weight: inherit;   /* Inherits font weight from h1 */
    font-size: inherit;     /* Inherits font size from h1 */
    font-family: inherit;   /* Inherits font family from h1 */
}
/* specific settings for links sperate of body settings */
nav ul{
	list-style: none;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	gap: 20px;
}

nav ul li a {
	text-decoration: none;
	color: inherit;
}

li a:hover {
	text-decoration: underline;
}

li a.current {
	font-weight: bold;
	text-decoration: underline;
}
/* nature picture on top, fills screen*/
.hero-banner {
	/* margin-top: 87.66px; */
	padding: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-image: url("header-photo.jpg");
	background-size: cover;
	background-position: center;
	
}



/* about me book section */
.about-me {
	position: relative;
	width: 100%;
	aspect-ratio: 2.5 / 1;
}

.about-me::before {
    content: ""; /* Required for ::before to work */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("books.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.2; /* Adjust transparency */
    z-index: -1; /* Moves ::before behind the text */
}