main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sports {
    display: grid;
    justify-content: center;
    align-items: center;
    row-gap: 5vh;
    column-gap: 9vw;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
}

.sports a {
    display: block;
    border-radius: 50%;
    padding: 8rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: transform 0.2s ease-in-out;
}

.sports a:hover {
    transform: scale(1.03);
}

#basketball {
    background-image: url('../../assets/images/homepage/giraffe.webp');
}

#football {
    background-image: url('../../assets/images/homepage/skunk.webp');
}

#bouldern {
    background-image: url('../../assets/images/homepage/monkey.webp');
}

#hockey {
    background-image: url('../../assets/images/homepage/penguin.webp');
}

#swimming {
    background-image: url('../../assets/images/homepage/dolphin.webp');
}

#badminton {
    background-image: url('../../assets/images/homepage/kangaroo.webp');
}

.legal-notice,
.legal-notice:active,
.legal-notice:visited {
    color: black;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.legal-notice:hover {
    text-decoration: underline;
    color: #0077ff;
}

.kite {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.kite.float {
    animation: floatWind 6s linear;
}

@keyframes floatWind {
    0% {
        transform: translate(0%, 0%) rotate(0deg);
    }

    40% {
        transform: translate(15%, -60%) rotate(3deg);
    }

    70% {
        transform: translate(-15%, -100%) rotate(-3deg);
    }

    100% {
        transform: translate(10%, -140%) rotate(0deg);
    }
}

#kite1 {
    position: absolute;
    top: 10%;
    right: 0;
    width: 16vw;
    height: 23vw;
    background-image: url('../../assets/images/kite1.webp');
    background-repeat: no-repeat;
    background-size: 100%;
}

#kite2 {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 16vw;
    height: 23vw;
    background-image: url('../../assets/images/kite2.webp');
    background-repeat: no-repeat;
    background-size: 100%;
}

@media screen and (max-width: 1450px) {
    .sports {
        row-gap: 3vh;
        column-gap: 6vw;
    }

    .kite {
        display: none;
    }
}