html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.hero-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform, filter, opacity;
    opacity: 0;
    animation:
        fadeIn 2.8s ease-out forwards,
        breatheAndDim 10s ease-in-out 2.8s infinite;
}

.page {
    min-height: 100vh;
    padding: 3rem;
    background: #000;
    color: #f5f5f5;
}