body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    display: block; /* Allows natural scrolling */
}

.twitter-link {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.5rem;
    text-decoration: none;
    color: black;
}

.twitter-link:hover {
    text-decoration: underline;
}

h1 {
    font-size: 2.5rem;
    color: black;
    text-align: center;
    margin: 20px 0;
}

.gif {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.additional-content {
    margin: 40px;
    text-align: center;
    font-size: 1.2rem;
    color: black;
}

.scroll-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 20px;
}

.left-content {
    display: flex;
    align-items: center;
    max-width: 50%;
}

.scroll-image {
    max-width: 150px;
    height: auto;
    margin-right: 20px;
}

.scroll-text {
    font-size: 1.5rem;
    color: black;
}

.right-content {
    display: flex;
    align-items: center;
    max-width: 50%;
    justify-content: flex-end;
}

.right-text {
    font-size: 1.5rem;
    color: black;
    margin-right: 10px;
}

.right-image {
    max-width: 150px;
    height: auto;
}

.center-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 100px 20px;
    text-align: right;
}

.center-image {
    max-width: 200px;
    height: auto;
    margin-right: 20px;
}

.center-text {
    font-size: 2rem;
    color: black;
}

.bottom-section {
    margin: 200px 20px;
    text-align: center;
}

.bottom-text {
    font-size: 2rem;
    color: black;
    margin-bottom: 20px;
}

.bottom-gif {
    max-width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Media Query for Mobile Screens */
@media (max-width: 768px) {
    .scroll-section {
        flex-direction: column; /* Stack content vertically */
        align-items: center; /* Center-align items */
        text-align: center; /* Ensure proper alignment for text */
    }

    .left-content,
    .right-content {
        max-width: 100%; /* Allow full width on mobile */
        margin-bottom: 20px; /* Add space between sections */
    }

    .scroll-image,
    .right-image {
        max-width: 80%; /* Reduce image size for smaller screens */
        margin: 0 auto; /* Center images */
    }

    .scroll-text,
    .right-text {
        font-size: 1.2rem; /* Adjust font size for readability */
    }

    .twitter-link {
        font-size: 1.2rem; /* Reduce font size for the Twitter link */
    }

    h1 {
        font-size: 2rem; /* Adjust heading size */
    }

    .gif {
        max-width: 80%; /* Scale GIF for smaller screens */
    }

    .center-section {
        flex-direction: column; /* Stack image and text vertically */
        align-items: center;
        text-align: center;
    }

    .center-image {
        max-width: 80%; /* Adjust image size */
        margin-bottom: 10px; /* Add space below the image */
    }

    .center-text {
        font-size: 1.5rem; /* Adjust font size for smaller screens */
    }

    .bottom-section {
        margin: 100px 10px; /* Reduce margin for smaller screens */
    }

    .bottom-gif {
        max-width: 80%; /* Scale GIF for smaller screens */
    }

    .bottom-text {
        font-size: 1.5rem; /* Adjust font size */
    }
}