html {
    width: 100%;
    height: 100%;
    background: black;
    color: lime;
    margin: 0;
    padding: 0;
}
body {
    padding: 10px;
    text-align: center;
}
small {
    color: black;
}
a {
    color: white;
}

/* --- Adaptation responsive ---
   Chaque art ASCII a un nombre de colonnes fixe ; on dimensionne la police
   en fonction de la largeur d'écran pour que tout tienne sans débordement.
   Bannière Univers = 128 col. / Big = 55 col. / console = 75 col. */
#banner,
#computer {
    display: inline-block;
    margin: 0 auto;
    line-height: 1.15;
    white-space: pre;
    text-align: center;
}

#banner {
    font-size: min(calc(92vw / 77), 16px);
}

#banner.small {
    font-size: min(calc(92vw / 33), 20px);
}

#computer {
    font-size: min(calc(92vw / 45), 15px);
}

/* --- Clavier tactile ---
   Champ quasi invisible mais focusable : c'est lui qui fait apparaître le
   clavier du système sur tablette/smartphone. */
#kbd {
    position: fixed;
    left: 50%;
    top: 0;
    width: 2px;
    height: 2px;
    margin-left: -1px;
    padding: 0;
    border: 0;
    outline: none;
    opacity: 0;
    font-size: 16px; /* évite le zoom automatique sur iOS */
}

#hint {
    display: none;
    color: lime;
    opacity: .75;
    font-size: .85rem;
}

/* L'indice n'apparaît que sur les appareils tactiles. */
@media (hover: none), (pointer: coarse) {
    #hint { display: block; }
}