/* Reset margin and padding */

@font-face {
    font-family: "comic";
    src: url("/comic-webfont.woff2") format("woff2"),
         url("/comic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "comic";
}

/*  Body styling */
body {
    font-family: "comic";
    font-weight: bold;
    background-image: url(/images/ss009.jpg);
    background-color: #ffffff;
    color: #000000;
}

/* Main container to hold content (search form, etc.) */
.container {
    text-align: center;
}

.toppanel {
    background-image: url(/images/purpl170.jpg);
    display: flex;
    align-items: center;
    background-color: #f4f4f4;
    border: 2px solid #ccc;
    box-sizing: border-box;
    height: 70px;
}

.logo {
    position: absolute;
    padding-left: 10px;
}

/* Links section styling */
.links {
    position: absolute;
    align-content: center;
    font-size: 2em;
    right: 0px;
    color: #000000
}
.links a {
    text-decoration: none;
}
.links a:hover {
    text-decoration: underline;
}

/* Button styling */
button {
    font-size: 1em;
    padding: 5px 10px;
    background-color: #f2f2f2;
    border: 1px solid #cccccc;
    cursor: pointer;
}

button:hover {
    background-color: #e0e0e0;
}

/* Index info styling */
.index-info {
    font-size: 0.9em;
    color: #555555;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Links section styling */
.links {
    position: absolute;
    align-content: center;
    font-size: 1.5em;
    right: 20px;
    color: #000000;
    text-decoration: none;
}

.links :hover {
    text-decoration: underline;
}

/* Style for the whole container of the boxes */
#info-boxes {
    text-align: center; /* Center the title */
    margin: 40px auto;
    padding: 20px;
}

/* Main row of three columns */
.row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Each column takes up 1/3 */
.fix {
    width: 50%;
    box-sizing: border-box;
}

/* Shared box styles */
.box,
.inner-box {
    font-family: "comic";
    background-image: url(/images/multi250.gif);
    background-color: #f4f4f4;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
    height: 97.5%;
}

/* Middle column */
.middle-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Stretch iframe to fit its box */
iframe {
    width: 100%;
    height: 315px; /* Adjust height as needed */
    border: none;
    border-radius: 4px;
}

.box h3 {
    margin-top: 0;
    color: #000000;
}

.box p {
    font-size: 1em;
    color: #3b3b3b;
}

/* Marquee container */
.marquee-container {
    position: relative; /* To position the marquee at the top */
    width: 100%; /* Full width */
    height: 60px; /* Set height based on the image size or your preference */
    overflow: hidden; /* Hide any excess content */
}

/* Marquee animation */
.marquee {
    display: flex; /* Align images in a row */
    width: max-content; /* Content size adjusts to the total width of images */
    animation: scroll 10s linear infinite; /* Continuous scrolling */
}

.stamps {
    height: 50px; /* Set the image height */
    margin-right: 10px; /* Space between images */
    flex-shrink: 0; /* Prevent shrinking */
}