@font-face {
    font-family: 'AmaticSc';
    src: url(fonts/AmaticSC-Regular.ttf);
}
@font-face {
    font-family: 'Lora';
    src: url(fonts/Lora-VariableFont_wght.ttf);
}

body {
    background-color: #333333;

    color: white; /* Set text color to white for better contrast */
}

/* Style for the top pictures gallery section */
#top-pictures {
    width: 100%;
    overflow: hidden;
}

/* Style for the container of the images */
.top-pictures-gallery {
    display: flex;
    animation: slideGallery 90s infinite; /* Adjusted timing for faster animation */
    width: calc(400px * 19); /* Set width to fit all images */
}

/* Style for each image */
.top-pictures-gallery img {
    max-width: 400px; /* Set maximum width for images */
    width: 400px; /* Ensure all images have the same width */
    height: auto; /* Allow images to adjust height while maintaining aspect ratio */
    margin-right: 10px; /* Space between images */
}

/* Keyframes for the slide animation */
@keyframes slideGallery {
    0% { transform: translateX(0%); }
    5.26% { transform: translateX(0%); }
    10.53% { transform: translateX(-5.26%); }
    15.79% { transform: translateX(-10.53%); }
    21.05% { transform: translateX(-15.79%); }
    26.32% { transform: translateX(-21.05%); }
    31.58% { transform: translateX(-26.32%); }
    36.84% { transform: translateX(-31.58%); }
    42.11% { transform: translateX(-36.84%); }
    47.37% { transform: translateX(-42.11%); }
    52.63% { transform: translateX(-47.37%); }
    57.89% { transform: translateX(-52.63%); }
    63.16% { transform: translateX(-57.89%); }
    68.42% { transform: translateX(-63.16%); }
    73.68% { transform: translateX(-68.42%); }
    78.95% { transform: translateX(-73.68%); }
    84.21% { transform: translateX(-78.95%); }
    89.47% { transform: translateX(-84.21%); }
    94.74% { transform: translateX(-89.47%); }
    100% { transform: translateX(-94.74%); }
}

      

/* Style for the introduction section */
#introduction {
    text-align: center; /* Center align the content */
    padding: 50px 0; /* Add padding for spacing */
}

#introduction h1 {
    font-size: 60px;
    font-family: 'AmaticSc';
}

#introduction p {
    font-family:  'Lora';
}

/* Style for the photographer-info container */
.photographer-info {
    display: flex; /* Use flexbox to align items */
    align-items: center; /* Align items vertically */
    justify-content: flex-start; /* Align items to the start (left) of the container */
    max-width: 50%; /* Limit the width of the container */
    margin: 0 auto; /* Center the container */
    font-size: 20px;
}

/* Style for Ashton Price's headshot */
.photographer-info img[src="headshot/apheadshot.jpg"] {
    max-width: 200px; /* Set the maximum width of the headshot image */
    height: 200px; /* Maintain aspect ratio */
    border-radius: 50%; /* Apply border radius for a circular shape */
    margin-right: 20px; /* Add some space between the image and the text */
}

/* CSS to center the content within the portfolio section */
#portfolio {
    text-align: center; /* Center align the content */
}

/* Center align the h2 and h3 headings */
#portfolio h2,
#portfolio h3 {
    text-align: center;
    font-family: 'AmaticSc';
}

#portfolio h2 {
    font-size: 48px;
}

#portfolio h3 {
    font-size: 40px;
}


/* Center align the gallery */
.gallery {
    display: flex;
    justify-content: center; /* Center align the content horizontally */
    flex-wrap: wrap; /* Allow gallery items to wrap to new lines if needed */
}

/* Style for individual images in the gallery */
.gallery img {
    width: 400px; /* Set the width of the images */
    max-width: 400px; /* Ensure images don't exceed this width */
    height: auto; /* Maintain aspect ratio */
    margin: 10px; /* Add space between images */
}


#pricing {
        text-align: center;
}

#pricing h2{
    font-size: 48px;
    font-family: 'AmaticSc';
}

#pricing p {
    font-family: 'Lora';
}


/* CSS to center the content within the bookings section */
#bookings {
    text-align: center; /* Center align the content */
}

#bookings h2 {
    font-size: 48px;
    font-family: 'AmaticSc';
}

/* Center align the h2 and p headings */
#bookings h2,
#bookings p {
    text-align: center;
}

#bookings p {
    font-family: 'Lora';
}

/* Style for the form */
form {
    max-width: 500px; /* Limit the width of the form */
    margin: 0 auto; /* Center the form horizontally */
}

/* Style for the form inputs and labels */
form label,
form input,
form textarea {
    display: block; /* Display each element on a new line */
    margin-bottom: 10px; /* Add space between elements */
    width: 100%; /* Set the width of the elements to fill the form container */
}

/* Style for the submit button */
form input[type="submit"] {
    width: auto; /* Allow the submit button to adjust its width based on content */
    margin: 20px auto; /* Center the submit button horizontally with some space around it */
}

/* Style for the footer */
footer {
    text-align: center; /* Center align the content */
    padding: 20px 0; /* Add padding above and below the content */
}

#contact h2 {
    font-size: 48px;
    font-family: "AmaticSc";
}

#contact p {
    font-family: 'Lora';
}