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

.bg {
    position: fixed;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    background: center / cover no-repeat;
    opacity: 0;
    filter: blur(20px);
    will-change: transform, opacity;
}

.loaded {
    filter: blur(0);
}

.a0 {
    transform: scale(1.3) rotate(1.5deg) !important;
}

.a1 {
    transform: scale(1.05) rotate(-1.5deg) !important;
}

.a2 {
    transform: translateX(-12%) scale(1.2) !important;
}

.a3 {
    transform: translateX(12%) scale(1.2) !important;
}

.a4 {
    transform: translate(6%, 6%) scale(1.25) !important;
}

#nav {
    --nav-zones: 3;
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
}

#nav > div {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

@media (orientation: landscape) {
    #nav {
        grid-template-columns: repeat(var(--nav-zones), 1fr);
    }
}

@media (orientation: portrait) {
    #nav {
        grid-template-rows: repeat(var(--nav-zones), 1fr);
    }
}