body {
    margin: 0;
    font-family: system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f8e8;
}

header {
    text-align: center;
    padding: 2rem;
    font-size: 2rem;
    position: relative;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

section article {
    
}

#gripe {
    font-size: 3rem;
    line-height: 1.2;
    max-width: 800px;
}

nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
}

nav button {
    padding: 1rem 2rem;
    font-size: 1rem;
    background: none;
    border: 1px solid black;
    cursor: pointer;
}

#gripe-alert {
    opacity: 1;
    animation: fadeOut 3s forwards;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.3) skew(-12deg, -4deg);
    background: pink;
    color: black;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 2rem 4rem;
    z-index: 1001;
    text-align: center;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}