/* Resetting default margins and paddings */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow-x: scroll; /* Allow horizontal scrolling */
}

/* Header for Twitter link */
.header {
    position: fixed; /* Fixed position to keep it at the top-left */
    top: 10px;
    left: 10px;
    z-index: 100; /* Ensure it appears above all other content */
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background */
    padding: 5px 10px;
    border-radius: 5px;
}

.header a {
    text-decoration: none; /* Remove underline from the link */
    color: #000000; /* Black for better readability */
    font-size: 2rem;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.header a:hover {
    text-decoration: underline; /* Underline on hover for better UX */
}

/* Horizontal container for side-by-side scrolling */
.horizontal-container {
    display: flex; /* Enable horizontal layout */
    width: 300vw; /* 3 times the viewport width for 3 images */
    height: 100vh; /* Full viewport height */
}

/* Section with bro.png as background */
#image-1 {
    flex: 0 0 100vw; /* Each section takes the full viewport width */
    height: 100vh; /* Full viewport height */
    background: url('bro.png') no-repeat center top;
    background-size: contain;
    background-color: white;
}

/* Section with bro1.png as background */
#image-2 {
    flex: 0 0 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: url('bro1.png') no-repeat center top;
    background-size: contain;
    background-color: white;
}

/* Section with bro2.png as background */
#image-3 {
    flex: 0 0 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: url('bro2.png') no-repeat center top;
    background-size: contain;
    background-color: white;
}

/* Title Section */
.title-section {
    height: 20vh; /* Height for the title section */
    display: flex;
    justify-content: flex-start; /* Align to the left by default */
    align-items: center; /* Center the title vertically */
    background-color: white; /* Match background to scattered section */
    position: relative;
    z-index: 1;
    padding-left: 100vw; /* Push the title to the right */
}

.title-section h1 {
    font-size: 3rem; /* Large font size for the title */
    text-align: center;
    text-decoration: underline;
    margin: 0;
}

/* Section for scattered images below bro1.png */
.scattered-section {
    height: 100vh; /* Full viewport height */
    background-color: white; /* Background color for the scattered section */
    position: relative;
    display: flex; /* Enable horizontal scrolling */
    width: 200%; /* Allow horizontal space for images */
    overflow-x: scroll; /* Allow horizontal scrolling for scattered images */
}

/* Scattered images container */
.scattered-images {
    position: relative; /* Allows positioning of child elements */
    width: 200%; /* Stretch container for horizontal space */
    height: 100%; /* Full height of the section */
    overflow: hidden; /* Ensure images don't overflow the container */
}

/* Small images with increased size */
.small-image {
    position: absolute;
    width: 300px; /* Increased width for bigger images */
    height: auto; /* Maintain aspect ratio */
}

/* Specific positions for each image */
#s1 {
    top: 10%;
    left: 10%;
}

#s2 {
    top: 20%;
    left: 35%;
}

#s3 {
    top: 70%;
    left: 20%;
}

#s4 {
    top: 15%;
    left: 60%;
}

#s5 {
    top: 50%;
    left: 90%;
}

#s6 {
    top: 75%;
    left: 75%;
}

#s7 {
    top: 20%;
    left: 85%;
}

#s8 {
    top: 50%;
    left: 5%;
}

#s9 {
    top: 40%;
    left: 55%;
}

/* Media Query for Mobile Screens */
@media (max-width: 768px) {
    .header a {
        font-size: 1.5rem; /* Reduce font size for smaller screens */
    }

    .horizontal-container {
        flex-direction: column; /* Stack horizontally scrolling images vertically */
        width: 100vw; /* Make each section occupy the full screen width */
    }

    #image-1,
    #image-2,
    #image-3 {
        height: 50vh; /* Reduce section height for better fit on smaller screens */
        background-size: cover; /* Adjust background to fill smaller areas */
    }

    .title-section h1 {
        font-size: 2rem; /* Adjust title font size */
        padding-left: 5vw; /* Center title better on smaller screens */
    }

    .scattered-section {
        flex-wrap: wrap; /* Wrap scattered images for smaller screens */
        height: auto; /* Allow height to adjust dynamically */
        overflow-x: hidden; /* Disable horizontal scroll for scattered section */
        justify-content: center; /* Center images */
    }

    .small-image {
        width: 150px; /* Scale images down for smaller screens */
    }
}