@font-face {
  font-family: 'unscii';
  src: url('../fonts/unscii-16.woff') format('woff');
}

body, html {
    margin: 0;
    height: 100%;
    display: flex;
    justify-content: center; /* Horizontaal centreren */
    flex-direction: column;
    align-items: center; /* Verticaal centreren */
    font-family: unscii; /* Gebruik standaard monospace font */
    font-size: 16px; /* Basis fontgrootte */
    background-color: #111; /* Achtergrondkleur voor contrast */
}

/* Styling voor het pre-element dat de cirkel bevat */
pre {
    font-family: unscii; /* Gebruik monospace lettertype */
    text-align: center; /* Zorg ervoor dat de tekst in het midden uitgelijnd is */
    color: white; /* Tekstkleur */
    font-size: 16px; /* Basis grootte voor grotere schermen */
    line-height: 1.2; /* Pas de line-height aan om de tussenruimtes te verkleinen */
    letter-spacing: 0.1em;
    white-space: nowrap; /* Zorg ervoor dat er geen ongewilde enters komen */
    word-wrap: break-word; /* Breek lange woorden indien nodig */
    max-width: 100%; /* Zorg ervoor dat het pre-element niet breder wordt dan het scherm */
    overflow: hidden; /* Verberg alles wat buiten het scherm valt */
    padding: 20px; /* Aangepaste padding om ruimte rondom de cirkel te creëren */
}

/* Styling voor de cirkel */
#circle {
    text-align: center;
    white-space: pre;
    font-size: 14px; /* Kleinere tekstgrootte voor de cirkel */
    max-width: 100%; /* Zorg ervoor dat de cirkel niet breder wordt dan het scherm */
    overflow: hidden; /* Verberg alles wat buiten het scherm valt */
}

/* Styling voor de timestamp */
#timestamp {
    margin-top: 10px;
    font-size: 14px;
}

/* Responsieve stijlen */
@media (max-width: 768px) {
    body, html {
        font-size: 7px; /* Kleinere basisgrootte voor mobiel */
    }

    pre {
        font-size: 7px; /* Kleinere fontgrootte voor pre-element op mobiele apparaten */
        padding: 30px; /* Meer ruimte rondom de cirkel op mobiel */
    }

    #circle {
        font-size: 7px; /* Nog kleinere tekst voor de cirkel */
    }

    #timestamp {
        font-size: 7px; /* Kleinere timestamp op mobiel */
    }
}

@media (max-width: 480px) {
    body, html {
        font-size: 7px; /* Nog kleinere basisgrootte voor de kleinste schermen */
    }

    pre {
        font-size: 7px; /* Kleinste fontgrootte voor pre-element */
        padding: 40px; /* Meer ruimte rondom de cirkel op de kleinste schermen */
    }

    #circle {
        font-size: 7px; /* Extra kleine tekst voor de cirkel */
    }

    #timestamp {
        font-size: 7px; /* Extra kleine timestamp */
    }
}