@font-face {
    font-family: 'Maria';
    src: url('maria.woff2') format('woff2'), /* Super Modern Browsers */
         url('maria.woff') format('woff'),   /* Modern Browsers */
         url('maria.ttf') format('truetype'), /* Safari, Android, iOS */
    font-weight: normal; /* Specify the weight */
    font-style: normal;  /* Specify the style */
}

* {
  font-kerning: auto;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: oldstyle-nums;
  text-rendering: geometricPrecision;
}

body {
    background-color: black;
    color: #efefef;
    font-family: 'Maria', -apple-system, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: clamp(18px, 2vw, 36px);
    text-align: center;
    overflow-y: hidden;
}

.sentence {
  font-size: clamp(18px, 2.3vw, 36px);
  white-space: normal; /* Allow wrapping */
  overflow-wrap: break-word; /* Break long words */
  word-wrap: break-word; /* For older browsers */
  overflow: hidden;
  display: inline-block;
  margin-bottom: 7vh;
  max-width: 90%; /* Set a maximum width for better readability */
}


/* Typewriter effect (now operates on clip-path instead of width) */
@keyframes typing {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

.sentence.active {
    animation: typing 1.5s steps(20, end);
}