@charset "UTF-8";
html {
  font-size: 16px;
  /* 1rem = 16px */
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vh; /* Ajustez selon vos besoins */
  margin-top: 20px; /* Ajustez selon vos besoins */
}

.typing-effect {
  font-family: monospace;
  font-size: 4rem;
  color: #0a0b0a;
  border-right: 2px solid;
  white-space: nowrap; /* Empêche le texte de se décomposer en plusieurs lignes */
  overflow: hidden;
  text-align: center;
  animation: typing 2s steps(32, end) forwards, blink 0.5s step-end infinite alternate; /* 32 est la longueur approximative du texte */
}
.typing-effect::before {
  content: "Bonjour, Bienvenue sur mon site !";
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes typing-small {
  from {
    max-width: 0;
  }
  to {
    max-width: 100%;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
  100% {
    border-color: #0a0b0a;
  }
}
/* ****************************************************** */
/* Media queries */
/* iPhone X/XS/11 Pro */
@media screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .typing-effect {
    width: 96vw;
    height: 10vh;
    overflow: hidden;
    align-self: center;
    font-size: 2rem;
    white-space: normal; /* Permet le retour à la ligne */
    animation: typing-small 2s steps(32, end) forwards, blink 0.5s step-end infinite alternate;
  }
}
@media (max-width: 1300px) {
  .typing-effect {
    font-size: 4vw;
  }
}
/* iPhone 11 */
@media screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 2) {
  .typing-effect {
    width: 96vw;
    height: 10vh;
    overflow: hidden;
    align-self: center;
    font-size: 2rem;
    white-space: normal; /* Permet le retour à la ligne */
    animation: typing-small 2s steps(32, end) forwards, blink 0.5s step-end infinite alternate;
  }
}
/* Samsung Galaxy S21 FE */
@media screen and (min-device-width: 360px) and (max-device-width: 1080px) and (-webkit-min-device-pixel-ratio: 2.5) {
  .typing-effect {
    width: 96vw;
    height: 10vh;
    overflow: hidden;
    align-self: center;
    font-size: 1.8rem; /* Réduisez la taille de la police pour s'adapter aux petits écrans */
    white-space: normal; /* Permet le retour à la ligne */
    word-wrap: break-word; /* Permet de casser les mots si nécessaire */
    animation: typing-small 2s steps(32, end) forwards, blink 0.5s step-end infinite alternate;
  }
}/*# sourceMappingURL=typing_effects.css.map */