*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    font-family: "verdana", "sans-serif";
    color: white;
    background-color: #006089;
}

.header{
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: #008cc7;
}

.main {
    text-align: center;
    background-color:#0ea0de;
}

.footer{
    background-color: #008cc7;
    align-items: center;
    text-align: center;
}

.logo{
    border-radius: 50%;
}

.logo-link{
    overflow: hidden;
    border-radius: 50%;
}

.logo-link:focus-visible {
    outline: 3px solid rgba(55,200,229,0.22);
    outline-offset: 4px;
}

/* Prevent the site's global link hover from changing the logo background */
.logo-link:hover,
.logo-link:focus-visible {
    background-color: transparent;
}

.logo-link img {
    display: block;
    width: 120px;
    height: auto;
    border-radius: 50%;
    transition: transform .18s ease, filter .18s ease;
    transform-origin: center;
}

.logo-link:hover img,
.logo-link:focus-visible img {
    transform: scale(1.06);
    filter: brightness(1.06) saturate(1.06);
}

/* Header links: button-like with subtle hover lift */
.header a:not(.logo-link):link,
.header a:not(.logo-link):visited {
    background-color: #1398c9;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 12px;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
    transform-origin: center;
}

.header a:not(.logo-link):hover,
.header a:not(.logo-link):active,
.header a:not(.logo-link):focus-visible {
    background-color: #37c8e5;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.18);
    filter: brightness(1.06) saturate(1.05);
}

/* keyboard focus for accessibility */
.header a:not(.logo-link):focus-visible {
    outline: 3px solid rgba(55,200,229,0.22);
    outline-offset: 4px;
}

.intro{
    background-image: url("media/render.png");
    background-repeat: repeat;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.who-we-are {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.who-we-are-left {
    flex: 1;
    display: flex;
    justify-content: center;
}

.who-we-are-right {
    font-weight: 800;
    font-size: 1.08rem;
    flex: 1;
    text-align: left;
    padding: 0 2rem;
}

.teamphoto {
    border-radius: 8px;
}

.intro-title{
color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  text-shadow: 0 3px 8px rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.35);
  padding: .5rem 1rem;
  border-radius: 8px;
}
.sponsors {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
    padding: 0 1rem;
}

.sponsors img {
    height: 15rem;
    border-radius: 8px;
    display: block;
}

@media (max-width: 720px) {
    .sponsors {
        flex-direction: column;
        gap: 1rem;
    }
    .sponsors img {
        max-width: 80%;
    }
}