body {
    font-family: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-y-8 {
    transform: translateY(2rem);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
}

.bg-brand {
    background-color: #8bb9f9;
}

#screenshot-modal {
    animation: fadeIn 0.2s ease-out;
}

#screenshot-modal > div {
    animation: scaleIn 0.25s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.hover\:bg-brand-dark:hover {
    background-color: #6da0e5;
}

.text-brand {
    color: #8bb9f9;
}

.border-brand {
    border-color: #8bb9f9;
}