header{
    position: fixed;
    top: 5px;
    left: 0;
    right: 0;
    height: 90px;
    background-color: rgb(230, 204, 153);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.5), 
        0 -6px 12px rgba(0, 0, 0, 0.5), 
        inset 0 -3px 6px rgba(0, 0, 0, 0.35),
        inset 0 3px 6px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: row;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    padding-right: 10%;
}
header a {
    text-decoration: none;
    color: rgb(57, 47, 32);
}
header a:hover { text-decoration: underline; }

main { 
    margin-top: 120px; 
    min-height: calc(100vh - 200px);
}

.seal {
    width: 100px; 
    height: 100px;
    flex-shrink: 0;
    justify-content: center; 
    align-items: center;
    text-decoration: none;
    background-image: radial-gradient(
        ellipse at center, 
        rgb(26, 4, 6) 50%, 
        rgb(5, 0, 1) 59%, 
        rgb(90, 26, 30) 60%, 
        rgb(56, 14, 18) 65%, 
        rgb(14, 2, 4) 100%
    );
    clip-path: polygon(
        50% 0%, 
        61% 4%, 
        72% 3%, 
        82% 8%, 
        93% 16%, 
        98% 27%, 
        100% 38%, 
        97% 50%, 
        100% 61%, 
        96% 73%, 
        89% 83%, 
        78% 91%, 
        67% 97%, 
        55% 100%, 
        44% 98%, 
        33% 100%, 
        22% 95%, 
        12% 87%, 
        5% 76%, 
        2% 63%, 
        0% 51%, 
        3% 39%, 
        1% 27%, 
        7% 16%, 
        17% 8%, 
        28% 3%, 
        39% 1%
    );
    display: flex;
    flex-direction: column;
}
.seal span {
    letter-spacing: -3px;
    line-height: 0.7;
    font-size: 30px; 
    color: rgb(90, 26, 30); 
    text-shadow: 
        0 1px 2px rgba(90, 30, 30, 0.7), 
        0 -1px 1px rgba(0, 0, 0, 0.9);
}
a.seal:hover {
    background-image: radial-gradient(
        ellipse at center, 
        rgb(45, 8, 11) 50%, 
        rgb(31, 1, 7) 59%, 
        rgb(122, 41, 46) 60%, 
        rgb(90, 27, 33) 65%, 
        rgb(48, 10, 16) 100%
    );
    text-decoration: none;
}
a.seal:hover span {
    color: rgba(255, 217, 0, 0.5);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.cat {
    position: relative; 
    z-index: -1;
    animation: walk 10s linear infinite;   
}
@keyframes walk {
    0%, 100% { transform: translateX(115px) rotateY(0); }
    49% { transform: translate(-100vw) rotateY(0) }
    50% { transform: translateX(-100vw) rotateY(180deg); }
    99% { transform: translate(115px) rotateY(180deg); }
}
.leg-l, .leg-r { 
    transform-box: fill-box; 
    transform-origin: top center; 
}
.leg-l { animation: left-step .9s ease-in-out infinite; }
.leg-r { animation: right-step .9s ease-in-out infinite; }
@keyframes left-step {
    0%, 100% { transform: rotate(-12deg); }
    50% { transform: rotate(12deg); }
}
@keyframes right-step {
    0%, 100% { transform: rotate(12deg); }
    50% { transform: rotate(-12deg); }
}
.tail { transform-origin: center left; animation: tail-flick 1s ease-in-out infinite; }
@keyframes tail-flick {
    0%, 100% { transform: rotateZ(1deg); }
    50% { transform: rotateZ(0); }
}
.eyelids {
    animation: eye-blink 10s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes eye-blink {
    0%, 90%, 100% { transform: translateY(0); }
    95% { transform: translateY(8px); }
}
.cat::after{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 115px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center, 
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        transparent 100%
    );
    filter: blur(2px);
}