html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.08), transparent 28rem),
        linear-gradient(180deg, #050505 0%, #000 38%, #080808 100%);
}

::selection {
    background: #fff;
    color: #000;
}

a,
button,
input,
textarea,
select,
article,
.group {
    transition-property: color, background-color, border-color, opacity, transform, filter, box-shadow;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

img {
    transition: filter 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

#loader {
    animation: loading-slide 1.1s ease-in-out infinite alternate;
}

#preloader.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

.reveal {
    animation: reveal-up 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.article-body p {
    margin-bottom: 1.4rem;
}

.article-body a {
    color: #fff;
    text-decoration: underline;
}

.article-body img {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
}

@keyframes loading-slide {
    from { transform: translateX(-80%); }
    to { transform: translateX(180%); }
}

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}