@font-face {
    font-family: 'jurassic_parkregular';
    src: url('./jurassic_park-webfont.woff2') format('woff2'),
         url('./jurassic_park-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
  background: url(https://www.marouze.com/GAMES/DINO/img/dino_bg_V2-min.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body{
  font-family: 'jurassic_parkregular', sans-serif;
  text-align: center;
}

h1{
  font-family: 'jurassic_parkregular', sans-serif;
  text-align: center;
  font-size: 4em;
  color: #1ABC9C;
  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.6);
}

@keyframes dayNightCycle {
  0% {
    background-color: #34ace0; /* Bleu ciel */
  }
  
  20% {
    background-color: #34ace0; /* Bleu ciel */
  }
  
  25% {
    background-color: #e73c9a; /* Rosé pour le coucher de soleil */
  }
  
  30% {
    background-color: #1a5276; /* Bleu sombre pour représenter la nuit */
  }
  
  70% {
    background-color: #1a5276; /* Bleu sombre pour représenter la nuit */
  }
  
  75% {
    background-color: #fce221; /* Jaune pour le lever du soleil */
  }
  
  80% {
    background-color: #34ace0; /* Revenir à la couleur du jour */
  }
  
  100% {
    background-color: #34ace0; /* Revenir à la couleur du jour */
  }
}

#board {
  animation: dayNightCycle 120s infinite; /* Vous pouvez ajuster la durée de la boucle ici (40s dans cet exemple) */
  border-bottom: 1px solid black;
  background-image: url(https://www.marouze.com/GAMES/DINO/img/meteor12i.gif);
  background-size: auto 35%; /* Ajustez selon vos besoins */
  background-repeat: no-repeat;
  background-position: left top; /* Ajustez la position selon vos besoins */
  position: relative;
}

@media only screen and (min-width: 1201px) {
  h1 {
    margin-top: 120px;
  }
}