@import 'base.css';

.header-highlight {
    background-color: var(--yellow);
}

section {
    padding: 5%;

    @media (max-width: 900px) {
        padding-top: 20%;
    }
}

#hero-logo {
    max-height: 40vh;
    max-width: 90vw;
    margin-bottom: 20px;
    animation: float 8s infinite ease-in-out;
}

#events ul {
    padding-left: 0;
}

#event-images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    & img {
        box-sizing: border-box;
        max-width: 25vw;
        border: 0.5vw solid white;
        filter: drop-shadow(0 0 10px black);
    }
}

#termcard {
    & > img {
        transition: 0.3s ease-in-out;

        &:hover {
            scale: 1.05;
        }
    }
}

#membership-stuff {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;

    & img {
        max-width: 30vw;
        filter: drop-shadow(0 0 15px black);
        border-radius: 20%;
    }
}

#committee-stuff {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;

    & img {
        box-sizing: border-box;
        max-width: 25vw;
        border: 0.5vw solid white;
        rotate: 2deg;
        filter: drop-shadow(0 0 10px black);
    }

    & .cards {
        max-width: 680px;
    }
}

@media (max-width: 900px) {
    #event-images, #committee-stuff {
        flex-direction: column;

        & img {
            max-width: 100%;
        }

        & .cards {
            max-width: 100vw;
        }
    }

    .mobile-hide {
        display: none;
    }
}

@keyframes float {
    0% {
        rotate: -1deg;
    }
    50% {
        rotate: 1deg;
    }
    100% {
        rotate: -1deg;
    }
}