/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* start light mode styling */
:root {
	--text: white;
	--border: lightgrey;
	--accent: white;
	--bg: #ABBAD9;
	--gradientTop: white;
	--gradientBottom: rgb(240, 248, 255, .8);
}
/* end light mode styling */

/* start dark mode styling */
@media (prefers-color-scheme: dark) {
	:root {
		--text: white;
		--border: lightgrey;
		--accent: white;
		--bg: #ABBAD9;
		--gradientTop: white;
		--gradientBottom: rgb(240, 248, 255, .8);
	}
}
/* end dark mode styling */ 

body {
  /* Text color */ 
  background-color: grey;
  color: black;
  font-family: Arial;
  
  /* Background image */ 
  
  background-image: url('images/city.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  min-height: 100vh; /* Makes sure body covers full viewport */
  margin: 0; /* Removes default margin */
}

.container {
	max-width: 55rem;
	margin: 5vw auto 12px auto;
	border: 6px ridge;
	outline: 3px solid grey;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;

	/* container background pattern */
	background-color: #c1ccd1;
}

/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }



header {
	background-image: url('images/sky-moving-sky.gif');
	background-repeat: no-repeat;
	background-size: cover; /* Stretches and crops to cover the entire screen */
	background-position: center; /* Centers the image */
	
	margin: 0; /* Removes default body margin */
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge;
	border-radius: 5px;
	position: relative;
}

header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
	color: --text;
}


nav {
	border: 2px ridge;
	border-radius: 5px;
	padding: 5px;
	background: #F4F5E9;
}

nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}

nav a {
	display: block;
	margin: 5px;
	background: #F4F5E9;
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}

nav a:link, nav a:visited { 
	color: #800080;
}

nav a:hover, nav a:focus {
	background: #F4F5E9;
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border:2px ridge;
	border-radius: 5px;
}

.divider-image {
	height: 20px; 
	background-image: url('images/wingdivider.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; /* Scales proportionally with container width */
	width: 100%; /* Ensures the hr itself fills the container */
	
	/* ... other background properties ... */
}


section {
	border: 2px ridge;
	border-radius: 5px;
	background: #F4F5E9;
	padding: 5px;
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}

h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge;
	padding-bottom: 5px;
}

h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}

h3 { 
	font-size: 1.1rem;
	font-weight: normal;
}

h4 { 
	font-size: 1rem;
	color: #000000;
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: #800080;
}

/* image formatting */ 

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 90%; /* Optional width to see the centering effect */
}

.image-row {
	display: flex;
	gap: 5px;
	justify-content: center; /* Centers the whole group horizontally */
	flex-wrap: wrap;         /* Moves images to next line on small screens */
}