body {
    background-color: bisque;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

header {
    border: 2px solid rgb(81, 134, 136);
    background-color: rgb(82, 135, 137);
    padding: 15px;
    box-shadow: 20px 10px 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    overflow-x: auto;
}

.content {
    width: 60%;
    margin: 40px auto;
    padding: 20px;
    background-color: cadetblue;
    border: 3px solid cadetblue;
    text-align: center;
    box-shadow: 20px 10px 5px;
}

.aboutUs{
    padding: 20px;
    text-align: left;
}

li {
    text-align: left;
}

/* Contact form styles */
.contactForm form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    background: rgba(255,255,255,0.08);
    padding: 12px;
    border-radius: 6px;
}

.contactForm label {
    font-weight: bold;
    font-size: 0.95rem;
}

.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm select,
.contactForm textarea {
    padding: 8px;
    border: 1px solid #999;
    border-radius: 4px;
    font-size: 0.95rem;
}

.contactForm button[type="submit"] {
    align-self: flex-start;
    padding: 8px 14px;
    background-color: cadetblue;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contactForm button[type="submit"]:hover {
    opacity: 0.9;
}

footer {
    border: 2px solid rgb(81, 134, 136);
    background-color: rgb(82, 135, 137);
    padding: 15px;
    box-shadow: 20px 10px 5px;
    text-align: center;
}

/* Animation utilities */
:root{
    --easing: cubic-bezier(.22,.9,.18,1);
}

/* Page entrance */
.content{
    transform: translateY(8px);
    opacity: 0;
    transition: transform 600ms var(--easing), opacity 600ms var(--easing);
}
body.loaded .content{
    transform: translateY(0);
    opacity: 1;
}

/* Reveal on scroll */
.reveal{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--easing), transform 600ms var(--easing);
}
.reveal.visible{
    opacity: 1;
    transform: translateY(0);
}

/* Header subtle float */
header{
    position: sticky;
    top: 0;
    z-index: 50;
}
header.header-animate{
    animation: headerFloat 4s ease-in-out infinite;
}
@keyframes headerFloat{
    0%{transform: translateY(0)}
    50%{transform: translateY(-4px)}
    100%{transform: translateY(0)}
}

header a{
    transition: transform 180ms ease, color 180ms ease;
}
header a:hover{transform: translateY(-3px); color: #eef;}

/* Replacement for deprecated <marquee> */
.marquee{
    display: inline-block;
    max-width: 30%;
    overflow: hidden;
    vertical-align: middle;
}
.marquee__inner{
    display: inline-block;
    white-space: nowrap;
    transform: translateX(100%);
    animation: marquee 10s linear infinite;
}
@keyframes marquee{
    0%{transform: translateX(100%);}    
    100%{transform: translateX(-100%);}    
}

/* Form submission states */
.contactForm form.submitting{opacity:0.7; transform: scale(0.997);}
.contactForm form.submitted{border-color: #6ee56e; box-shadow: 0 6px 18px rgba(30,180,60,0.12);}

/* Small responsive tweak */
@media (max-width: 800px){
    .content{width: 90%; margin: 20px auto;}
    .contactForm form{padding:10px}
}

/* ------------------------------ */
/* SPONSOR FIX                    */
/* ------------------------------ */

.sponsor-card {
    display: inline-block;
    width: 200px;          /* paragraph wrap width */
    text-align: center;
    vertical-align: top;
}

.sponsor-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
}

.sponsor-card img {
    width: 128px;
    height: 128px;
    display: block;
    margin: 0 auto 10px auto;
}

.sponsor-card p {
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
