html {
    background-color: #5ebed8;
    background-size: cover;
}

/* Header */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 5%;
    background-color: white;
    gap: 0; 
}

body > header {
    text-align: center;
}
  
body > header > img {
    display: block;
    margin: 0 auto;
}

/* Targets the image inside the nameLogo div */
.nameLogo img {
    width: 250px; /* Adjust this number to make it bigger or smaller */
    height: auto; /* Keeps the image from stretching weirdly */
    display: block;
    margin: 0 auto;
}


/* Navigation */
nav.horizontal {
    font-family: Segoe UI;
    display: flex;
    justify-content: center;
    width: 100%;
}

nav.horizontal ul {
    display: flex;
    justify-content: center; /* Centers the buttons as a group */
    gap: 20px; /* Adds consistent space between the buttons */
    width: 100%;
    align-items: center; 
    padding: 0 0 15px 0; 
    margin: 0; /* You can set this to 0 now that they are centered with a gap */
    list-style: none; 
}  

/* Update this in your style.css */
nav.horizontal ul li a {
    background-color: #a0def0;
    border: 1px solid #a0def0;
    border-radius: 5px;
    color: #333333; 
    display: block;
    padding: 12px 25px; 
    text-decoration: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-align: center;
    transition: all 0.2s ease;
    white-space: nowrap; /* Prevents "About Me" from dropping to a second line */
}

nav.horizontal ul li a:hover {
    background-color: #5db1ca;
    border-color: #76c4da; 
    color: white; 
}

/*body*/

body {
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100vh means 100% of the Viewport (screen) Height */
}

#reelContainer h1 {
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-align: center;
    color: #333333;
    margin-top: 40px;
    margin-bottom: 10px;
}

/* Centers the button under the video and gives it spacing */
.reel-button-container {
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
}

/* Styles the link to look like a button */
.drive-button {
    display: inline-block;
    padding: 18px 36px;
    background-color: #3c83a3; /* Primary blue - change this to fit your brand */
    color: #FFFFFF;
    text-decoration: none;
    font-family: Segoe UI;
    font-weight: bold;
    font-size: 1.5rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

/* Hover effect */
.drive-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    text-decoration: none;
}

/* Optional click effect */
.drive-button:active {
    transform: scale(0.98);
}


/* =========================================
   Article / Content Box
========================================= */
article {
    max-width: 960px; /* Slightly wider than the 800px video container */
    margin: 50px auto; /* 50px space on top (away from nav) and bottom (away from footer), auto centers it */
    
    /* Box Styling */
    background-color: white; /* You can change this to rgb(253, 247, 240) to match your nav if you prefer */
    padding: 40px 50px; /* Adds space inside the box so text doesn't touch the edges */
    border-radius: 12px; /* Rounds the corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Adds a soft drop shadow so it floats off the page */
    border: 1px solid #e0e0e0; /* Optional: a very light border to define the edge */
}

/* Typography spacing inside the box */
article h1 {
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-align: center;
    color: #333333;
    margin-bottom: 5px;
}

article h2 {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #333333;
    margin-top: 35px; /* Adds space above the headings */
    margin-bottom: 10px;
}

article p {
    font-family: 'Segoe UI', system-ui, sans-serif;
    line-height: 1.7; /* Makes paragraphs very easy to read */
    color: #444444; /* Slightly lighter than the heading text */
    margin-bottom: 20px;
}


/* =========================================
   Footer Styles
========================================= */
footer {
    background-color: #25566c; /* Matches your nav hover color */
    color: #ffffff; /* White text for contrast */
    padding: 30px 5%; /* Good breathing room on top and bottom */
    margin-top: 40px; /* Pushes the footer down away from your video container */
    border-top: 3px solid #1f4658; /* Matches the border on your body */
    margin-top: auto;
}

.footerContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footerContent p{
    margin: 0;
    font-size: 0.9rem;
    color: rgb(253, 247, 240); /* Matches your nav button background color */
}

.footerLinks {
    display: flex;
    gap: 20px;
}

.footerLinks a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}