.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.17, 0.55, 0.55, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

header.scroll-down {
    transform: translateY(-100%);
}

header.scroll-up {
    transform: translateY(0);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
}

#mobile-menu a {
    @apply text-xl transition-all duration-300;
}

iframe {
    filter: invert(90%) hue-rotate(180deg);
}

iframe:hover {
    filter: none;
}