/* This is the CSS file for the About Me page of Suzzanna Tanner's website */
/* The body section contains the content of the webpage */

body {
    font-family: "Times New Roman", Arial, sans-serif; /* Sets the default font for the webpage */
    margin: 0; /* Removes the default margin around the body element */
    padding: 0; /* Removes the default padding around the body element */
    background-image: url('Images/Varigated_Green_Reverse_Radial_TL.jpg'); /* Change to an image */
    background-size: cover; /* Ensures the background image covers the entire viewport */
    background-position: center; /* Centers the background image */
    color: #ffffff; /* Sets the default text color to a light shade for better contrast against the dark background */
    line-height: 1.6; /* Sets the line height for better readability of text */
    position: relative; /* Ensures that any absolutely positioned child elements are positioned relative to the body */
}

/* left side */
body::before {
    position: fixed; /* Positions the pseudo-element fixed relative to the viewport */
    width: 100px; /* Sets the width of the pseudo-element */
    height: 100px; /* Sets the height of the pseudo-element */
    background-image: url('Images/20210708_084947_HDR_0_BG_1x1.png'); /* Sets the background image for the pseudo-element */
    background-size: contain; /* Ensures the background image covers the entire pseudo-element */
    background-repeat: no-repeat; /* Prevents the background image from repeating */
    z-index: 0; /* Ensures the pseudo-element is behind other content */
    left: 2%; /* Positions the pseudo-element 2% from the left edge of the viewport */
    top: 2%; /* Positions the pseudo-element 2% from the top edge of the viewport */
    content: ""; /* Ensures the pseudo-element is displayed */
    pointer-events: none; /* Ensures the pseudo-element does not interfere with mouse interactions */
}

/* right side */
body::after {
    position: fixed; /* Positions the pseudo-element fixed relative to the viewport */
    width: 100px; /* Sets the width of the pseudo-element */
    height: 100px; /* Sets the height of the pseudo-element */
    background-image: url('Images/20210708_084947_HDR_0_BG_1x1.png'); /* Sets the background image for the pseudo-element */
    background-size: contain; /* Ensures the background image covers the entire pseudo-element */
    background-repeat: no-repeat; /* Prevents the background image from repeating */
    z-index: 0; /* Ensures the pseudo-element is behind other content */
    right: 2%; /* Positions the pseudo-element 2% from the right edge of the viewport */
    top: 2%; /* Positions the pseudo-element 2% from the top edge of the viewport */
    content: ""; /* Ensures the pseudo-element is displayed */
    pointer-events: none; /* Ensures the pseudo-element does not interfere with mouse interactions */
}

main {
    padding: 24px; /* Adds padding to the inside of the main element */
    max-width: 1000px;
    margin: 0 auto;
}

h1,h2,h3 {
    color: #f5f06e; /* White color for headings */
    text-align: center; /* Center-aligns the headings for a balanced look */
    padding: 0px 15px; /* Adds padding to the left and right of headings for better spacing on smaller screens */
}
section {
    border: 3px solid #f5f06e; /* Sets the border width to 3 pixels and color to white */
    border-radius: 10px; /* Rounds the corners of the box for a softer look */
    padding: 20px; /* Adds padding inside the box for better spacing */
    margin: 20px auto; /* Centers the box horizontally and adds vertical spacing */
    max-width: 900px; /* Sets a maximum width for the box to prevent it from stretching too wide on large screens */
    background-color: #005706; /* Semi-transparent black background for better readability */
}

section p {
    margin: 0 auto;
    max-width: 85ch; /* Allows for 85 characters before wrapping to the next line */
}

a {
    text-decoration: none; /* Removes the underline */
}

ul {
    list-style-type: none; /* Removes default bullet points from the list */
}

nav ul {
    gap: 16px; /* Adds space between navigation items for better readability */
    margin-left: 0; /* Pushes the navigation list to the right side of the navigation bar */
    flex-wrap: wrap; /* Allows navigation items to wrap to the next line on smaller screens */
}

nav, nav ul {
    display: flex; /* Uses flexbox to layout navigation items in a row */
}

nav li {
    margin: 0;
    padding: 0;
}

nav h3, nav ul {
    padding: 0;/* Removes any default padding from the h3 element for a cleaner look */
}

/* makes navigation links look like buttons with padding, border, rounded corners, and a semi-transparent background for a modern and clean appearance */
nav a {
    display: inline-block;
    padding: 10px 15px;
    border: 2px solid #f5f06e;
    border-radius: 999px;
    background-color: #005706;
    color: #ffffff;
}

nav {
    align-items: center; /* Vertically centers the navigation items within the bar */
    justify-content: center; /* Aligns navigation items to the center of the bar */
    gap: 15px; /* Adds space between navigation items for better readability */
    padding: 0 15px; /* Adds horizontal padding to the nav bar for better spacing on smaller screens */
    max-width: 1000px; /* Sets a maximum width for the navigation bar to prevent it from stretching too wide on large screens */
    margin: 0 auto; /* Centers the navigation bar horizontally within the viewport */
}

footer {
    padding: 32px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 48px;
    color: #ffffffb3;
}

footer {
    text-align: center; /* Center-aligns the footer content for a balanced look */
}

/* Tablet sized viewports */
@media (max-width: 900px) {
    body::before, body::after {
        display: none; /* Hides the pseudo-elements on smaller screens for better layout */
    }
    header {
        display: flex; /* Uses flexbox to layout header content in a row */
        align-items: center; /* Vertically centers the header content */
        justify-content: center; /* Distributes space between header content for better layout */
        gap: 10px; /* Adds space between header content for better readability */
        padding: 10px; /* Adds padding inside the header for better spacing */
    }

    header::before, header::after {
        content: ""; /* Ensures the pseudo-element is displayed */
        width: 75px; /* Sets the width of the pseudo-element */
        height: 75px; /* Sets the height of the pseudo-element */
        background-size: contain; /* Ensures the background image covers the entire pseudo-element */
        background-repeat: no-repeat; /* Prevents the background image from repeating */
        background-position: center; /* Centers the background image */
        flex: 0 0 50px; /* Prevents the pseudo-element from growing or shrinking */
    }

    header::before, header::after{
        background-image: url('Images/20210708_084947_HDR_0_BG_1x1.png'); /* Sets the background image for the pseudo-element */
    }

    p {
        padding: 8px;
    }
    nav a {
        padding: 5px 10px;
    }
}

/* Mobile sized viewports */
@media (max-width: 600px) {
    header::before, header::after {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    p {
        flex-basis: auto;
        text-align: center;
        padding: 5px;
    }
    nav a {
        padding: 3px 7px;
    }
}