/* ===== Home page only ===== */

/* Stefan with eyeballs peeking through his eye holes */
.stefan {
    position: relative;
    width: min(60vw, 512px);
    aspect-ratio: 1 / 1;
    margin-top: 60px;
    margin-bottom: 20px;
}

.stefan img {
    position: absolute;
    display: block;
}

.stefan .face {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* face sits on top */
}

.stefan .eyeball {
    z-index: 1; /* eyeballs sit underneath */
    transform: translate(-50%, -50%);
    transition: transform 0.08s linear;
}

/* Centred on each eye hole (% of Stefan's 512x512 image).
   Eyeballs are a bit bigger than the holes so they have room to look around. */
.stefan .eyeball.left {
    left: 39.84%;
    top: 42.38%;
    width: 18.55%;
}

.stefan .eyeball.right {
    left: 62.21%;
    top: 37.70%;
    width: 15.63%;
}

h1 {
    font-size: 28px;
    margin-bottom: 20px;
}

.store-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}