/* 1. Global Reset & Body Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    		/* Pick a good font */
			font-family: 'Playfair Display', serif;
			font-family: 'Lato', Tahoma, Geneva, Verdana, sans-serif;

			/* Set a size for screen that allows footer to be on the bottom of the webpage */
			/* Set up the body as a full-height column flex container */
  			display: flex;
/*  			flex-direction: column; */
  			min-height: 100dvh; /* Takes full viewport height, adjusting for mobile toolbars */
  			margin: 0;
        }

.blogpost { 
		font-family: 'Lato', sans-serif; 
		text-align: justify;
		line-height: 22px; 
		font-size: 20px;
}

.titleh1 {
		  font-family: 'Playfair Display', serif; 
		  font-size: 65px;
		  font-weight: 500;
		  line-height: 80px;
	  } 

.titleh2 {
		  font-family: 'Playfair Display', serif; 
		  font-size: 48px;
		  font-weight: 500;
		  line-height: 60px;
	  } 

.titlebar {	
		margin: 0px 20px 0px 20px;
		align-content: center; /* Vertical align center */
		overflow: hidden;
}

.barspace {
	font-size: 1.5rem;
	line-height: 2rem;
}

main {
	flex-grow: 1;
}

/* 2. Navigation Bar Container */
.navbar {
	display: flex;
    justify-content: space-between; /* Pushes logo to the left, links to the right */
    align-items: center;            /* Centers items vertically */
    background-color: #FFFFFF;
	position: sticky;               /* Keeps navbar locked to the top on scroll */
    top: 0;
    z-index: 1000;
	padding: 0px 30px;
}

/* 3. Form settings */
.form-group {
	font-size: 1rem;
}

input {
	font-size: 1rem;	
	padding: 0.5rem;
	margin: 0.5rem;
}


/* 4. Navigation Links Track */
.nav-links {
    list-style: none;               /* Removes default bullet points */
    display: flex;
    gap: 2rem;                      /* Adds uniform spacing between links */
}

/* 5. Anchor Tag Links */
.nav-links a {
    text-decoration: none;          /* Removes default underline */
    color: #000000;
    font-size: 1.5rem;
    font-weight: 500;
    transition: color 0.3s ease;    /* Creates a smooth color shift on hover */
}

/* 6. Interactive States (Hover & Active) */
.nav-links a:hover,
.nav-links a.active {
    color: #7a94b9;                 /* Distinct highlighting color */
}


/* 8. Create columns on the webpage
  .grid-container {
      display: grid;
	  grid-template-columns: 1fr 1fr; /* Two columns of equal width 
      gap: 20px;                       /* Adds spacing between columns
  }

    .grid-column {
      padding: 20px;
      border-radius: 5px;
    }
       */
  
/* 8.5 Trying a centerrow style */
.centered-row {
  display: flex;
  justify-content: space-between;
  max-width: 1100px; /* Set your desired total width */
  max-height: 800px;
  width: 100%;
  margin: auto; /* Centers the container on the page */
  gap: 50px; /* Space between the two columns */

}
.column {
	Width: 50%;     /* Makes both columns share equal width */
}

.left-column {
  Width: 60%; 
}

.right-column {
  width: 40%; /* Makes both columns share equal width */
}

/* 9. Center material in the columns on the webpage */
.container { 
  flex-direction: column;
/*  align-items: center;         /* Vertically centers the text */
  justify-content: center;    /* Optional: Horizontally centers the text */
/*  height="100dvh"  */
}

.button-link {
  background-color: #7a94b9;
  color: white;
  padding: 10px 20px;
	font-size: 1.5rem;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}

.button-link:hover {
  background-color: #99ccff;
}

.video-window {
	height="234";
	width="416"
}

footer {
	clear:both;
	text-align: center;
	background-color: #7a94b9;
	color: #000000;
	height: 40px;
	align-items: center;
}
/* 7. Responsive Breakpoint (Mobile Optimization) */

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;     /* Stacks logo above the links */
        gap: 1rem;
    }

    .nav-links {
        flex-direction: row;        /* Keeps links wrapped elegantly on tablet/mobile screens */
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.2rem;
    }
}
    /* Responsive adjustment for mobile viewports */
/*
 @media (max-width: 600px) {
      .centered-row.responsive {
		 display: flex;
  		justify-content: space-between;
  		max-width: 1100px; /* Set your desired total width 
  		max-height: 800px;
	  	width: 100%;
  		margin: auto; /* Centers the container on the page 

        columns: 1fr; /* Switch to a single column stack */
      }
    }
/*
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
*/
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: right;
    display: block;
    text-align: right;
  }
}