* {
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin: 0; /* Set margin for all elements to 0 */
    padding: 0; /* Set padding for all elements to 0 */
    
}

body {
    animation: mymove 3s; /* Applies defined animation 'mymove' lasting 3 seconds */
    background: lightsteelblue; /* Sets the background color for the body */
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto !important;
    display: block;
    /* This ensures your sticky header has 'permission' to stay visible */
    overflow: visible !important; 
}

@keyframes mymove {
    from {
        background-color: darkseagreen; /* Start color of the animation */
    }
    to {
        background-color: lightsteelblue; /* End color of the animation */
    }
}

header {
    background: #142D66; /* Background color of the header */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    position: sticky; /* Sticks the header to the top of the viewport */
    top: 0; /* Positioning from the top */
    height: 90px; /* Height of the header */
    padding: 20px; /* Padding inside the header */
    margin: 0 auto; /* Centers header horizontally */
    text-align: right; /* Aligns text to the right */
    z-index: 100;
}

nav {
    display: flex; /* Use flexbox layout for navigation */
    float: left; /* Floats the nav to the left */
    gap: 16px; /* Spacing between nav items */
    max-height: 50px; /* Maximum height of the navigation */
    position: absolute; /* Position navigation absolutely */
    text-align: center; /* Centers the text inside nav items */
}

a {
    color: inherit; /* Keeps the text color of the parent */
    text-decoration: none; /* Removes underline from links */
}

a:hover {
    text-decoration: underline; /* Underline links on hover */    
}


.site_name {
    color: whitesmoke; /* Text color for site name */
    font-family: 'Brush Script MT', cursive; /* Specifies font family */
    font-size: 60px; /* Font size for site name */
    text-align: right; /* Aligns text to the right */
}

.site_name:hover a {
        text-decoration: none;
}

.menu_btns {
    background: cornflowerblue; /* Background color of buttons */
    border: 2px solid blue; /* Blue border around buttons */
    border-radius: 5px; /* Rounds the corners of buttons */
    color: whitesmoke; /* Text color inside buttons */
    font-family: 'Courier New', monospace; /* Specifies font family for buttons */
    font-size: 12px; /* Font size for button text */
    font-weight: bold; /* Makes button text bold */
    letter-spacing: 1px; /* Spacing between letters */
    padding: 8px 10px; /* Padding around the button text */
    text-decoration: none; /* Removes underline from button links */
}

.central_section {
    align-items: center; /* Centers items along cross-axis */
    background: whitesmoke; /* Background color for the central section */
    border-radius: 20px; /* Rounds the corners of the section */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect for depth */
    color: #142D66; /* Text color for content */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack children vertically */
    font-family: 'Courier New', monospace; /* Specifies font for section text */
    justify-content: center; /* Center children vertically */
    line-height: 1.2; /* Sets the line height, improving readability */
    margin: 25px auto; /* Center section with vertical margin */
    min-height: 150px; /* Minimum height of the section */
    padding: 25px 50px; /* Padding inside the section */
    position: relative; /* Context for absolutely positioned children */
    text-align: center; /* Centers text inside the section */
    width: 50%; /* Sets the width of the section */
}
.central_section h1 {
    font-size: 20px; /* Font size for headers */
    line-height: 1.2;
}
.central_section p {
    font-size: 18px; /* Font size for text content */
    line-height: 1.5;
}


.home_section {
    align-items: center; /* Centers items along cross-axis */
    background: whitesmoke; /* Background color for the central section */
    border-radius: 20px; /* Rounds the corners of the section */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect for depth */
    color: #142D66; /* Text color for content */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack children vertically */
    font-family: 'Courier New', monospace; /* Specifies font for section text */
    font-size: 16px; /* Font size for text content */
    justify-content: center; /* Center children vertically */
    line-height: 1.2; /* Sets the line height, improving readability */
    margin: 60px auto; /* Center section with vertical margin */
    min-height: 150px; /* Minimum height of the section */
    padding: 25px 50px; /* Padding inside the section */
    position: relative; /* Context for absolutely positioned children */
    text-align: center; /* Centers text inside the section */
    width: 75%; /* Sets the width of the section */
}
.home_section h1 {
    font-size: 20px; /* Font size for headers */
    line-height: 1.2;
}
.home_section p {
    font-size: 18px; /* Font size for text content */
    line-height: 1.5;
}

.grid_wrapper {
    align-items: start;        /* prevent children from stretching to row height */
    display: grid; /* Uses CSS Grid Layout */
    gap: 40px; /* Gap between grid items */
    grid-template-columns: 1fr 1fr; /* Defines two equal columns */
    margin: 40px auto; /* Vertical margin with auto horizontal centering */
    width: 90%; /* Sets the width of the wrapper */
}

.grid_boxes {
    align-self: center;        /* center this box vertically within the row's height */
    background: whitesmoke; /* Background color for selection boxes */
    border-radius: 20px; /* Rounds the corners of the boxes */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect for depth */
    box-sizing: border-box;
    color: #142D66; /* Text color for boxes */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack children vertically */
    font-family: 'Courier New', monospace; /* Specifies font for box text */
    justify-content: center; /* Center children vertically */
    margin: 0 auto; /* Centers the boxes horizontally */
    max-width: 95%; /* The width the boxes should take up */
    min-height: 150px; /* Minimum height of the boxes */
    padding: 25px 35px; /* Padding inside the boxes */
    position: relative; /* Context for absolutely positioned children */
}

.grid_boxes h1 {
    font-size: 20px; /* Font size for headers */
    line-height: 1.2;
    text-align: center; /* Centers text in <h1> */
}

.grid_boxes p { 
    font-size: 16px; /* Font size for text content */
    line-height: 1.5;
    text-align: justify; /* Justifies text in <p> */
    text-indent: 2em; /* Adds indent for paragraphs in boxes */
}

.grid_boxes ul,
.grid_boxes ol {
    margin: 0; /* Remove default margin */
    padding-left: 50px; /* Indent the list */
    text-align: justify;
    line-height: 1.5;
    font-size: 16px; /* Font size for text content */
}

.grid_boxes li {
    margin-bottom: 5px; /* Space between list items */
}

/* CSS for Photography page */
/* grid that holds the image containers */
.img_grid {
    background: whitesmoke;
    border-radius: 25px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect for depth */
    display: flex;          /* use flexbox for row flow */
    flex-wrap: wrap;        /* allow items to wrap to new rows */
    gap: 1.5rem;            /* spacing between items */

    justify-content: center; /* centers the images in each row */
    
    max-width: 90vw;
    margin: 0 auto;
    margin-bottom: 1.23rem;
    padding: 1.25rem;
}

/* the boxes */
.img_container {
    border: 4px solid #0000ff;
    border-radius: 20px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect for depth */
    height: 250px;           /* all boxes same height */
    overflow: hidden;

    display: flex;           /* center the image inside the container */
    align-items: center;     /* vertical centering */
    justify-content: center; /* horizontal centering */
}

/* the images */
.img_container img {
    height: 100%;           /* fills container height */
    width: auto;            /* preserves original aspect ratio */
    display: block;         /* removes inline spacing below images */
}


/* Mobile responsive design for smaller screens */
@media (max-width: 950px) {
    .central_section {
        font-size: 20px; /* Font size for box content */
    }
    .home_section {
        font-size: 20px; /* Font size for box content */
    }
    header{
        height: 120px;
    }
    .grid_wrapper { 
      grid-template-columns: 1fr; 
    }
    .grid_boxes{
        font-size: 20px; /* Font size for box content */
    }
    .site_name {
        font-size: 84px;
    }
}