@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');

body {
    font-family: 'Henny Penny';
    margin: 0;
    padding: 0;
    background-color: #000000; /* Black background */
    color: #ff8c00; /* Dark orange highlights */
}
header {
    background-color: #a357c9;
    padding: .5rem 0;
    text-align: center;
}
header h1 {
    font-family: 'Henny Penny';
    color: #ff8c00; /* Dark orange highlights */
    font-size: 2.5rem;
    margin: 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between the logo and text */
}

.logo {
    height: 100px; /* Adjust to fit your design */
    width: auto; /* Maintains aspect ratio */
}

nav {
    text-align: center;
    margin: 1rem 0;
}
nav a {
    color: #ff8c00; /* Dark orange highlights */
    text-decoration: none;
    margin: 0 1rem;
    font-size: 1.2rem;
}
nav a:hover {
    text-decoration: underline;
}
.content {
    padding: 1rem;
    font-size: 1.5rem;
    text-align: center;
}

footer {
    background-color: #a357c9;
    text-align: center;
    padding: .5rem 0;
}

footer p {
    display: flex;
    align-items: center; /* Aligns text and icon vertically */
    justify-content: center; /* Centers everything */
    gap: 40px; /* Adds spacing between text and logo */
    color: #000000; /* Black highlights */
}

.social-icon {
    width: 40px;
    height: auto; /* Maintains aspect ratio */
}

.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Allows images to wrap when needed */
    justify-content: center;
    gap: 10px; /* Adds spacing between images */
}

.spooky-image {
    width: calc(20% - 10px); /* Makes each image take 1/5 of the width with spacing */
    max-width: 100%; /* Ensures images don't overflow */
    height: auto; /* Maintains aspect ratio */
    border: 5px solid #ff8c00; /* Dark orange border */
    border-radius: 5px; /* Optional rounded corners */
}

.large-spooky-image {
    width: 100%; /* Makes the image take the full width of its container */
    max-width: 800px; /* Limits max size for better display */
    height: auto; /* Maintains aspect ratio */
    display: block;
    margin: 20px auto; /* Centers the image with spacing */
}

@media screen and (max-width: 768px) {
    .spooky-image {
        width: calc(90% - 10px); /* Allows 2 images per row on medium screens */
    }
}

@media screen and (max-width: 480px) {
    .spooky-image {
        width: 100%; /* Each image takes full width on very small screens */
    }
}

.email-link {
    font-family: 'Poppins', sans-serif; /* More readable font */
    font-size: 1.5rem;
    color: #3333ff;
    margin-left: 15px;
    text-decoration: underline;
    -webkit-text-stroke: 1px #000000;
}

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