@font-face {
    font-family: 'Klavika';
    src: url('https://lisischauer.com/fonts/Klavika/klavika-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Klavika';
    src: url('https://lisischauer.com/fonts/Klavika/klavika-medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    background-color: lightgrey;
}

h3 {
    font-family: 'Space Mono', monospace;
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 20px; /* Add spacing between paragraphs */
}

h3 a {
    color: black;
}

h5 {
    font-family: 'Klavika', sans-serif; /* Fallback to sans-serif */
    text-decoration: none; /* Optional: remove underline */
    font-size: 2.6em;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Flexible grid columns */
    grid-template-rows: repeat(3, auto); /* 3 rows, auto height */
    gap: 20px; /* Space between grid items */
    padding: 5%;
    flex: 1; /* Ensures the container takes up full height */
}

.image-container {
    position: relative;
    width: 100%; /* Ensures the container takes up the full width */
}

.image-container img {
    display: block; /* Prevents extra space below the image */
}

.image-container p {
    font-family: 'Bickham Script Pro', serif;
    font-style: normal;
    font-size: 6em;
    color: lightcyan;
}

.sticker {
    position: absolute;
    top: -3%; /* Adjust this value to fine-tune vertical positioning */
    right: 85%; /* Adjust this value to fine-tune horizontal positioning */
    width: 20%; /* Keep the width flexible */
    height: auto; /* Maintain aspect ratio */
    z-index: 5; /* Ensure it stays above the mb.gif */
    transition: transform 0.3s ease;
}

.sticker:hover {
    transform: scale(1.1);
}

.shelley-sticker {
    position: absolute;
    transform: rotate(-90deg);
    bottom: -90%; /* Adjust this value to fine-tune vertical positioning */
    width: 80%; /* Keep the width flexible */
    height: auto; /* Maintain aspect ratio */
    z-index: 0; /* Ensure it stays above the mb.gif */
}

.newsletter {
    position: fixed;
    bottom: 2%; /* Position it 10px from the bottom */
    background-color: #f8f8f8; /* Optional: Background for better visibility */
    padding: 10px; /* Add some padding for aesthetics */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Shadow effect */
    border-radius: 8px; /* Optional: Rounded corners */
    text-align: center; /* Center-align the text inside */
    z-index: 1000; /* Ensure it’s above other elements */
 }
 
.newsletter input[type="email"] {
    padding: 8px;
    margin: 5px 0;
    width: 80%; /* Adjust width as needed */
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
 }
 
.newsletter button {
    padding: 8px 16px;
    background-color: #3C5898;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
 }
 
 .newsletter button:hover {
    background-color: #2e4673; /* Slightly darker on hover */
 }

.fb-outercontainer {
    display: grid;
    grid-template-columns: 25% 75%; /* Define column widths */
    grid-template-rows: repeat(2, auto); /* 2 rows, auto height */
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 10%;
    flex: 1; /* Ensures the container takes up full height */
    background-color: white;
}

.fb-innergrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Flexible grid layout */
    grid-template-columns: repeat(4, 1fr); /* Maximum 4 columns */
    gap: 10px; /* Small space between images */
    padding: 10px; /* Optional: Padding around the grid */
}
 
.fb-innergrid img {
    width: 100%; /* Ensures images fill grid cells */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Avoid cropping */
    display: block; /* Prevent inline spacing issues */
}

/* Mobile */
@media screen and (max-width: 1023px) {
    .container {
        grid-template-columns: 1fr; /* Single column layout for mobile */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align items horizontally */
        gap: 100px; /* Add space between rows */
        margin-bottom: -30px; /* Adjust gap below this specific row */
    }

    .newsletter {
        left: 50%;
        transform: translate(-50%, 0%);
        padding: 10px;
        width: 40%;
     }
    
    h5 {
        font-weight: normal;
    }

    .shelley-sticker {
        right: -8%;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-template-rows: repeat(3, auto);
        gap: 60px;
    }

    .newsletter {
        left: 3%;
     }

    h5 {
        font-weight: bold;
    }

    .shelley-sticker {
        right: -15%;
    }
}