body {
    text-align: center;
}

#mapa {
    display: block;
    margin: 20px auto;
}

#castillo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 600px;
    margin: auto;
    padding: 0px;
    border: solid 2px red;
}

#castillo-container img {
    display: block;
    margin: 0px;
}

#botones-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#botones-container button {
    margin: 0 10px;
    font-size: small;
    padding: 0px 0px;
    cursor: pointer;
}

#parrafo {
    text-align: left;
    max-width: 800px;
    margin: 20px auto;
}


#bandera {
    transform-origin: bottom;
}

#bandera:hover {
    animation: ondulacion 2s infinite ease-in-out;
}

@keyframes ondulacion {
    0%, 100% {
        transform: rotate(0deg) scaleY(1);
    }
    50% {
        transform: rotate(-5deg) scaleY(1.2);
    }
}