:root {
    --white: #fff;
    --black: #000;
    --color-text: #3b3b3b;
    --beige: #d1cabf;
    --leve-beige: #f5f5f5;
    --hero-beige: #9b8c76;
    --bg: #f4f4f4;

    --font: 'Montserrat', serif;
    --transition: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

*::selection {
    background-color: var(--beige);
    color: #fff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    color: var(--black);
    background: var(--white);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal--left {
    transform: translateX(-48px);
}

.reveal--right {
    transform: translateX(48px);
}

.reveal--scale {
    transform: scale(0.94);
}

.reveal.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

.page-enter {
    opacity: 0;
    transform: translateY(32px);
    animation: pageEnter 1s ease forwards;
}

@keyframes pageEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}