html, body {
    width: 100%; /* Ensure the width is 100% of the viewport */
    margin: 0; /* Remove default margin */
    padding: 20; /* Add padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /*overflow-x: hidden; /* Prevent horizontal scrolling */
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: black; /* Set text color */
    text-align: center; /* Center align text */
    font-size: 40px; /* Set font size */
    display: block; /* Ensure the h1 behaves as a block element */
    text-overflow: ellipsis; /* Optional: Add ellipsis if the text overflows */
}
.header-container {
    background-color: rgba(255, 30, 0, 0.9); /* Set the background color */
    width: 100%; /* Ensure it spans the full width of the page */
    padding-top: 20px; /* Add padding above and below the content */
    text-align: center; /* Center align the text */
    box-sizing: border-box; /* Include padding in the element's total width */
    position: relative; /* Ensure it is positioned above the body background */
    z-index: 1; /* Set a higher stacking context */
}
.header-container::before {
    content: ""; /* Create a pseudo-element */
    position: absolute; /* Position it relative to the container */
    top: 0;
    left: 0;
    width: 100%; /* Cover the full width of the container */
    height: 100%; /* Cover the full height of the container */
    background-color: rgba(249, 249, 249, 0.5); /* Set the background color */
    z-index: -1; /* Place it behind the content of the header */
}
.header-container h1 {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.title-divider {
    border: none; /* Remove default border */
    border-top: 5px solid black; /* Add a 5px black line */
    margin: 20px auto; /* Center the divider and add spacing */
    width: 100%; /* Optional: Limit the width of the divider */
}
/* Styling for span elements with links */
body {
    background-color: rgba(0, 0, 0, 1.0); /* Set background color */
    text-align: center; /* Center align text */
    background-image: url("images/Big-Sands-Sunset-5-edit.jpg"); /* Set background image */
    background-size: cover; /* Cover the entire background */
    background-repeat: no-repeat; /* Do not repeat the background image */
}
span a {
    color: black; /* Set the text color to black */
    text-decoration: none; /* Remove the underline */
}
span a:hover {
    color: rgb(27, 84, 138); /* Change the color on hover */
    text-decoration: underline; /* Underline text on hover */
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: black; /* Set text color */
    text-align: center; /* Center align text */
    font-size: 30px; /* Set font size */
}
h3 {
    color: black; /* Set text color */
    text-align: center; /* Center align text */
    font-size: 20px; /* Set font size */
}
/* Styling for p elements */
p {
    font-family: Arial, Helvetica, sans-serif; /* Set font family */
    color: rgb(1, 1, 1); /* Set text color */
    font-size: 17px; /* Set font size */
    font-weight: bold; /* Set font weight */
}
/* Styling for links within p elements */
p a {
    color: black; /* Set the link text color to black */
    text-decoration: none; /* Remove the underline */
}
/* Styling for links within p elements on hover */
p a:hover {
    color: rgb(0, 0, 139); /* Change the color on hover */
}
/* Flex container for the content */
.content {
    flex: 1; /* Take up remaining space */
}
/* Footer styling */
.website-design-page footer {
    align-self: flex-end; /* Align footer to the end */
    padding: 10px; /* Add padding */
    width: 100%; /* Set width to 100% */
    text-align: center; /* Center align text */
    background-color: rgb(247, 193, 76); /* Set background color */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    border: 1px solid black; /* Add a thin black border */
    max-height: 20%; /* Set maximum height to 20% of the viewport */
}
/* General footer styling */
footer {
    align-self: flex-end; /* Align footer to the end */
    padding: 20px 0; /* Add vertical padding, no horizontal padding */
    width: 100vw; /* Set width to 100% */
    text-align: center; 
    background-color: rgba(247, 187, 58, 0.8); /* Set background color */
    /*box-sizing: border-box;/* Include padding in the element's total width and height */
    border: 1px solid black; /* Add a thin black border */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    margin: 0; /* Remove default margin */
    max-height: 20%; /* Set maximum height to 20% of the viewport */
}
/* Footer buttons container */
.footer-buttons {
    display: block;
    justify-content: center; /* Center the buttons horizontally */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
    gap: 10px; /* Add space between buttons */
    margin-bottom: 20px; /* Add margin at the bottom */
}
.footer-buttons .button {
    font-family: Arial, Helvetica, sans-serif;
}

.button {
    display: inline-block; /* Display buttons inline */
    padding: 10px 20px; /* Padding inside button */
    font-size: 16px; /* Font size */
    font-family: Arial, Helvetica, sans-serif;
    color: white; /* Text color */
    background-color: #008080; /* Background color */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline from text */
    border-radius: 5px; /* Rounded corners */
    margin-top: 20px; /* Margin at the top */
    margin: 5px; /* Margin around button */
    border-color: aliceblue; /* Border color */
    border-width: 1px; /* Border width */
    border-style: solid; /* Border style */
    width: auto; /* Set a fixed width for all buttons */
    
}
.button:hover {
    background-color: rgb(122, 122, 205); /* Change background color on hover */
}
.responsive-image {
    max-width: 100%; /* Set maximum width */
    height: auto; /* Maintain aspect ratio */
    border: 5px solid white; /* Border around image */
    border-radius: 6px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

.footer-link:hover {
    color: rgb(13, 20, 230); /* Change text color on hover */
    text-decoration: underline; /* Underline text on hover */
}
/* Gallery styling */
.gallery {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    grid-template-rows: repeat(4, auto); /* 4 rows */
    gap: 20px; /* Space between images */
    padding: 1px; /* Padding inside gallery */
    max-width: 100%; /* Ensure the gallery does not exceed the page width */
    margin: 0 auto; /* Center the gallery horizontally */
    box-sizing: border-box; /* Include padding in the total width */
}
.gallery div {
    display: flex; /* Use flex layout */
    flex-direction: column; /* Column direction */
    justify-content: flex-end; /* Align items to the end */
    align-items: center; /* Center align items */
    margin-bottom: 20px; /* Margin at the bottom */
}
.image-title {
    margin-bottom: 3px; /* Margin at the bottom */
    font-size: 20px; /* Font size */
    color: rgb(0, 0, 0); /* Text color */
    text-align: center; /* Center align text */
}
/* Styling for the website design */
.flex-container {
    display: flex;
    flex-direction: column;
    border: 1px solid black; /* Thin black border */
    padding: 15px; /* Add padding for better readability */
    margin: 20px auto; /* Add spacing between containers and center them */
    max-width: 850px; /* Limit the width for better readability */
   background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
    gap: 20px; /* Space between flex items */
    border-radius: 10px; /* Rounded corners */
}
/* Styling for paragraphs within flex containers */
.flex-container p {
    flex: 1; /* Take up available space */
    margin: 0; /* Remove default margin */
    padding: 25px; /* Add padding */
    background-color: rgba(0, 0, 0, 0.164); /* Semi-transparent background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
    color: rgb(0, 0, 0); /* Text color */
    text-align: top; /* Align text to the top */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
}
/* Styling for flex items */
.flex-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.flex-item strong span {
    display: inline-block; /* Ensure the span behaves like a block for padding and border */
    border: 2px solid #333; /* Add a border around the title */
    background-color: #f0f8ff; /* Set a background color (light blue in this case) */
    color: #000; /* Set the text color */
    padding: 5px 10px; /* Add padding inside the border */
    border-radius: 5px; /* Optional: Add rounded corners */
    margin-bottom: 10px; /* Add spacing below the title */
    text-align: center; /* Center the text */
}
.flex-item .button {
    margin-left: auto;
    margin-right: auto;
}
/* Styling for paragraphs within flex items */
.flex-item p {
    flex: 1;
}
/* Styling for email footer link */
.footer-link {
       margin-top: auto;
}
.video-preview {
    display: inline-block; /* Keep previews inline */
    width: 300px; /* Set a consistent width */
    height: auto; /* Maintain aspect ratio */
    margin: 20px; /* Add spacing around each preview */
    vertical-align: top; /* Align previews to the top */
    background-color: #f9f9f9; /* Optional: Light background for contrast */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
    border-radius: 10px; /* Optional: Rounded corners */
    overflow: hidden; /* Ensure content fits within the container */
    position: relative; /* Enable positioning of child elements */
    text-align: center; /* Center-align content inside the preview */
}
.video-preview-row {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping to the next row */
    justify-content: space-between; /* Add space between previews */
    gap: 20px; /* Add consistent spacing between items */
    margin: 20px auto; /* Center the row and add vertical spacing */
    max-width: 1200px; /* Optional: Limit the width of the row */
}
.sheet-music-preview {
    flex: 0 0 auto; /* Prevent the previews from growing or shrinking */
    display: inline-block; /* Display videos inline */
    width: 300px; /* Set width of video preview */
    cursor: pointer; /* Change cursor to pointer on hover */
    position: relative; /* Position relative for absolute positioning of child elements */
    vertical-align: top; /* Align along the top border */
}
.video-preview-row { /* Row for video previews on 5 guitarist page only*/
    display: flex; /* Use Flexbox for layout */
    justify-content: center; /* Center the previews horizontally */
    gap: 50px; /* Add spacing between the previews */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin-bottom: 20px; /* Add spacing below the row */
}
@media (max-width: 600px) { /* Responsive styles for smaller screens */
    .video-preview-row {
        flex-direction: column; /* Stack the videos vertically */
        align-items: center; /* Center align the videos */
    }

    .video-item {
        max-width: 100%; /* Allow the videos to take the full width */
    }
}
.video-item {
    text-align: center; /* Center align text */
    max-width: 200px; /* Set maximum width */
}
.video-item p {
    margin-top: 10px; /* Add spacing between the video and the title */
    font-size: 14px; /* Set a consistent font size for the title */
    color: #333; /* Set a dark text color */
}
.video-preview img, .sheet-music-preview img {
    width: 100%; /* Set image width to 100% of container */
    height: auto; /* Maintain the aspect ratio */
    border-radius: 5px; /* Rounded corners for images */
}
.sheet-music-thumbnail {
    width: 150px; /* Set a fixed width for the thumbnail */
    height: auto; /* Maintain the aspect ratio */
    border: 1px solid #ccc; /* Optional: Add a border around the image */
    border-radius: 5px; /* Optional: Add rounded corners */
    cursor: pointer; /* Change the cursor to indicate the image is clickable */
    transition: transform 0.3s ease; /* Add a smooth hover effect */
}

.sheet-music-thumbnail:hover {
    transform: scale(1.1); /* Slightly enlarge the image on hover */
}
.info-button {
    position: absolute; /* Absolute positioning */
    top: 15px; /* Position 10px from top */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center offsetting its own width and height */
    padding: 5px 10px; /* Padding inside button */
    font-size: 14px; /* Font size */
    color: white; /* Text color */
    background-color: #6200ff; /* Background color */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline from text */
    border-radius: 5px; /* Rounded corners */
    z-index: 10; /* Ensure the button appears above other elements */
}
.info-button:hover {
    background-color: #0056b3; /* Change background color on hover */
}
.info-box {
    display: none; /* Hide info box by default */
    position: absolute; /* Absolute positioning */
    top: 50px; /* Position 50px from top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    width: 300px; /* Set width */
    overflow-y: auto; /* Enable scrolling if content exceeds max height */
    padding: 10px; /* Padding inside box */
    background-color: white; /* Background color */
    border: 1px solid #ccc; /* Border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    text-align: left; /* Left align text */
    z-index: 100; /* Ensure it appears above other elements */
    font-family: Arial, sans-serif; /* Set font to Arial */
    font-size: 12px; /* Set smaller font size */
}
.info-box p {
    font-size: 14px; /* Larger text size */
}
.button-link {
    display: inline-block; /* Display buttons inline */
    padding: 10px 20px; /* Padding inside button */
    font-size: 16px; /* Font size */
    color: white; /* Text color */
    background-color: #008080; /* Background color */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline from text */
    border-radius: 5px; /* Rounded corners */
    margin: 5px 0; /* Margin around button */
    width: 300px; /* Set a fixed width for all buttons */
}
.button-link:hover {
    background-color: #0056b3; /* Change background color on hover */
}
.bottom-buttons {
    font-size: 16px; /* Font size */
    font-family: Arial, Helvetica, sans-serif; /* Font family */
    text-align: center; /* Center align buttons */
    margin-top: 50px;
    margin-bottom: 50px; /* Add margin to create space above the buttons */
}
/* Social icons container */
.social-icons {
    display: flex;
    justify-content: center; /* Center the icons horizontally */
    gap: 10px; /* Add space between icons */
      align-items: center; /* Center icons vertically */
    margin-bottom: 20px; /* Add margin at the bottom to separate from the text */
}
.facebook-social-icon {
  background-color: #1877f3;    /* Facebook blue */
  color: #fff;                  /* White "f" */
  border: 2px solid #000;       /* Black border */
  border-radius: 8px;
}
.facebook-social-icon i {
    color: #fff !important; /* Force white f */
}
.facebook-social-icon:hover {
  background-color: #145db2;    /* Slightly darker blue on hover */
  color: #fff;
  border-color: #222;
}
.youtube-social-icon {
  background-color: #ff0000;    /* YouTube red */
  color: #fff;                  /* White icon */
  border: 2px solid #000;       /* Black border (optional, for consistency) */
  border-radius: 8px;           /* Rounded corners */
}
.youtube-social-icon i {
  color: #fff !important;       /* Force white arrow */
}
.youtube-social-icon:hover {
  background-color: #cc0000;    /* Darker red on hover */
  color: #fff;
  border-color: #222;
}
.instagram-social-icon {
  background-color: #fff;           /* White background */
  color: #e1306c;                   /* Pink icon color */
  border: 2px solid #e1306c;        /* Pink border */
  border-radius: 50%;               /* Make it a circle */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.instagram-social-icon i {
  color: #e1306c !important;        /* Pink icon */
  font-size: 36px;
}
.instagram-social-icon:hover {
  background-color: #e1306c;        /* Pink background on hover */
  color: #fff;
  border-color: #e1306c;
}
.instagram-social-icon:hover i {
  color: #fff !important;           /* White icon on hover */
}
/* General Social icon styling */
.social-icon {
  color: black; /* Set icon color */
  font-size: 24px; /* Set icon size */
  text-decoration: none; /* Remove underline from icons */
  border: 2px solid black; /* Add a black border */
  border-radius: 15%; /* Make the border circular */
  padding: 5px; /* Add padding inside the border */
  display: inline-flex; /* Ensure proper alignment */
  align-items: center; /* Center the icon vertically */
  justify-content: center; /* Center the icon horizontally */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, border 0.2s;
   border: none; /* Remove default border for all icons */
}
.social-icon:hover {
  color: #008080; /* Change icon color on hover */
  border-color: #008080; /* Change border color on hover */
}
/*index.html page links to blog pages and the photo of me*/
/* Add these styles to center the image and figcaption */
/* Styling for small image on index page */
/* Container for text and image */
* {
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.text-image-container {
    background-color: rgba(243, 205, 152, 0.879);    /* Set background color */
    font-size: small; /* Set font size */
    font-family: Arial, sans-serif; /* Set font family */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    grid-template-rows: auto auto; /* Two rows */
    gap: 20px; /* Space between items */
    width: 100%; /* Full width */
    justify-items: center; /* Center items horizontally */
    align-items: start; /* Align items to the start vertically */
    margin-top: 0px;
    margin-right: 20px; /* Add margin at the top */
    margin-bottom: 40px; /* Add margin at the bottom */
    padding: 20px; /* Add padding */
}
.small-image {
    max-width: 60%;/* Set maximum width */
    height: auto; /* Maintain aspect ratio */
    border: 5px solid white; /* Border around image */
    border-radius: 6px; /* Rounded corners */
    margin: 0 auto; /* Center align image */
    display: block; /* Display as block element */
}
figcaption {
    font-family: Arial, sans-serif; /* Set font family */
    font-weight: bold; /* Set font weight */
    font-size: 18px; /* Set font size */
    color: black; /* Text color */
    text-align: center;
    margin-top: 10px; /* Add spacing between image and caption */
}
  /* Center align text */
.small-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-column: 2 / 3; /* Position in the second column */
    grid-row: 2 / 3; /* Position in the second row */
}
.small-image-container figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.half-size {
    width: 100%; 
    height: 15%; 
    display: block; /* Ensure proper alignment */
    margin: 0 auto; /* Center the image horizontally */
}
@media (max-width: 600px) {
    .additional-links {
        max-width: 90%; /* Limit the width to 90% of the screen */
        margin: 0 auto; /* Center the container horizontally */
        word-wrap: break-word; /* Ensure long words break to the next line */
        overflow-wrap: break-word; /* Break long words if necessary */
    }
}
.additional-links ul { 
      list-style-type: disc; /* Change list style to bullets */
      padding: 10px; /* Add padding */
      font-family: Arial, sans-serif; /* Change font family */
      font-size: 18px; /* Change font size */
      font-weight: bold; /* Change font weight */
}
.additional-links {
    background-color: #008080; /* Background color */
    color: white; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    flex: 0 0 auto; /* Prevent the text block from growing or shrinking */
    text-align: left; /* Align text to the left */
    margin-left: 0; /* Add margin to the left */
    max-width: 100%; /* Set maximum width */
    grid-column: 1 / 2; /* Position in the first column */
    grid-row: 2 / 3; /* Position in the second row */
    border: 1px solid black; /* Add border */
    padding: 10px; /* Add padding for better readability */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Optional: Subtle shadow for depth */
    border-radius: 10px; /* Rounded corners */
    }
.additional-links ul li { margin-bottom: 10px; /* Add space between list items */
                            margin-left: 10px; /* Add space to the left */
}
.additional-links ul li a { color: #ffffff; /* Change link color */ 
                             text-decoration: none; /* Remove underline from links */
}
.additional-links ul li a:hover { text-decoration: underline; /* Add underline on hover */
    color:rgb(0, 0, 139); /* Change link color on hover */ 
}
/* Styling for the blog links */
.blog-links {
    display: flex; /* Use flex layout */
    justify-content: center; /* Center the links horizontally */
    gap: 20px; /* Add space between links */
    margin: 20px; /* Add margin at the top */
    padding: 20px; /* Add padding */
}
.third-column {
    background-color: #008080; /* Background color */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 14px; /* Font size */
    color: white; /* Text color */
    grid-column: 3 / 4; /* Position in the third column */
    grid-row: 2 / 3; /* Position in the second row */
    max-width: 500px; /* Set a maximum width */
    overflow: auto; /* Add scroll bars if content overflows */
    word-wrap: break-word; /* Ensure text wraps within the column */
    padding: 10px; /* Add padding for better readability */
    border: 1px solid black; /* Add border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Optional: Subtle shadow for depth */
    border-radius: 10px; /* Rounded corners */
}
.bullet-points {/* Styling for bullet points on 5 interesting facts page */
    text-align: left; /* Ensures text is left-aligned */
    margin-left: 50px; /* Optional: Adds some indentation for better readability */
    line-height: 1.6; /* Optional: Improves spacing between lines */
}