@font-face {
    font-family: 'griffiths';
    src: url('griffiths.woff') format('woff');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    color: #212429;
    font-family: 'griffiths', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    transition: background-color 1s ease, color 1s ease;
}

/* estilo para colores invertidos */
body.inverted {
    background-color: #212429;
    color: #ffffff;
}

/* escenas */
.scene {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    text-align: center;
    pointer-events: none;
}

.scene.active {
    opacity: 1;
}

.scene p {
    font-size: var(--font-size, 4vmin);
    font-weight: var(--font-weight, 400);
    animation: fadeInOut 6s ease-in-out;
}

/* animación de aparición/desaparición */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(2vmin); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-2vmin); }
}

/* estilo de selección de texto */
::selection {
    background: #ededed;
    color: #393d49;
}

body.inverted ::selection {
    background: #393d49;
    color: #ededed;
}