html {
    scroll-behavior: smooth;
}
body {
    background: #efe7d8;
}
::selection {
    background: rgba(236, 48, 19, 0.25);
}
[data-reveal] {
    opacity: 0;
    transform: translateY(46px);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].in {
    opacity: 1;
    transform: none;
}
@keyframes floaty {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}
@keyframes vib {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.06);
    }
}
@keyframes drift {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.mq-track {
    display: flex;
    white-space: nowrap;
    animation: drift 34s linear infinite;
}
.vlink {
    color: #7a1b0c;
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 27, 12, 0.35);
    transition:
        color 0.3s,
        border-color 0.3s;
}
.vlink:hover {
    color: #ec3013;
    border-color: #ec3013;
}
a.hnav {
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
}
a.hnav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -4px;
    height: 1px;
    background: #ec3013;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
a.hnav:hover {
    color: #ec3013;
}
a.hnav:hover::after {
    right: 0;
}
.vcard {
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s;
}
.vcard:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(58, 18, 11, 0.22);
}
.inst {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.inst:hover {
    transform: translateY(-10px);
}
.inst:hover svg {
    color: #ec3013;
}
.frame-portrait {
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}