:root {
    --color-marigold: #F5C056;
    --color-carrot: #ED7933;
    --color-beet: #820606;
    --color-coffee: #5C4019;
    --color-ash: #4D4D4D;
    --color-seasalt: #FAF9F9;

    --text-color: var(--color-marigold);
    --bg-color: transparent;

}

@font-face {
    font-family: "Obviously Regular";
    src: url("../assets/fonts/obviously/Obviously_Regular.otf") format("opentype");
}

@font-face {
    font-family: "Obviously Semibold";
    src: url("../assets/fonts/obviously/Obviously_Semibold.otf") format("opentype");
}

@font-face {
    font-family: "Acumin Pro Medium";
    src: url("../assets/fonts/acumin-pro/Acumin_Pro_Medium.otf") format("opentype");
}


body,
html {
    height: 100dvh;
}

main {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4rem;
    flex-direction: column;
    row-gap: 4rem;
}

body {
    display: flex;
    flex-direction: column;
    /* gap: 4rem; */
    background: var(--bg-color);
    height: 100%;
    padding: 1.5rem;
    font-family: sans-serif;
    font-family: "Obviously Regular", Helvetica, Arial, sans-serif;
    color: var(--text-color);
}


footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
}

footer p {
    margin-bottom: 0;
}

.button-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    border: 1px solid var(--color-marigold);
    background-color: transparent;
    color: var(--color-marigold);
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

address {
    font-style: normal;
    margin: 0;
}

address>p {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.esse-logo {
    width: 100%;
    /* height: 100%; */
}

.reflection {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    width: 100%;
    height: 100%;
    /* animation: fadeIn forwards 0.6s ease-in; */
}

.reflection__cont--right {
    transform: scaleX(-1);
    margin-left: -1px;
}

.reflection__cont {
    flex: 1;
    overflow: hidden;
}

.reflection__cont__img {
    display: block;
    width: 200%;
    height: 100%;
    object-fit: cover;
    transform-origin: 60% 60%;
    filter: brightness(50%) contrast(1.5);

    animation: kaleidoscope 3s forwards;
}

.hidden {
    opacity: 0;
}

@media (max-width: 40rem),
(max-height: 32rem),
(pointer: coarse) {
    footer {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        margin-bottom: 2rem;
    }

    button {
        position: static;
        transform: none;
        padding: 16px 40px;
    }
}

@keyframes kaleidoscope {
    from {
        transform: rotate(20deg);
        scale: 4;
    }

    to {
        transform: rotate(0deg);
        scale: 1.25;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}