:root {
    --ui-scale: 1;
}

@media (max-width: 480px) {
    :root {
        --ui-scale: 2;
    }
}



body {
    margin: 0;
}
body {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #222;
}



header {
    width: 100%;
    border-bottom: 1px solid #ddd;
}

header nav {
    display: flex;
    justify-content: center;
    gap: calc(1rem * var(--ui-scale));
    padding: calc(0.75rem * var(--ui-scale))
             calc(1rem * var(--ui-scale));
}

header nav a,
header nav span {
    white-space: nowrap;
    font-size: calc(1rem * var(--ui-scale));
}

main {
    text-align: center;
}

.preview-area {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.preview-card {
    width: 240px;
    aspect-ratio: 1 / 1;
    perspective: 1000px;
}

.preview-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.preview-back {
    transform: rotateY(180deg);
}

.preview-card {
    position: relative;
    transform-style: preserve-3d;
    animation: preview-flip 4s infinite;
}

@keyframes preview-flip {
    0%, 45%   { transform: rotateY(0deg); }
    55%, 100% { transform: rotateY(180deg); }
}