body{margin:0;padding:0;background:#ffe;font-size:14px;font-family:'hi','hey',sans-serif;color:#231F20;overflow:auto}
a {color:#000;font-size:14px;}
#main{width:100%;}
#wrap{position:relative;margin:0 auto;width:1100px;height:680px;margin-top:10px;}
#text{width:400px;height:425px;left:60px;top:20px;position:absolute;}
#code{display:none;font-size:16px;}
#clock-box {position:absolute;left:60px;top:550px;font-size:28px;display:none;}
#clock-box a {font-size:28px;text-decoration:none;}
#clock{margin-left:48px;}
#clock .digit {font-size:64px;}
#canvas{margin:0 auto;width:1100px;height:680px;}
#error{margin:0 auto;text-align:center;margin-top:60px;display:none;}
.hand{cursor:pointer;}
.say{margin-left:5px;}
.space{margin-right:150px;}


#code {
    font-family: 'Dancing Script', 'Handlee', 'Great Vibes', cursive; /* style manuscrit */
    font-size: 18px;
    line-height: 1.8; /* espace entre les lignes */
    color: #2c2c2c;   /* une couleur douce, tu peux mettre noir si tu veux */
}


/* Si l'écran est en mode portrait */
@media screen and (orientation: portrait) {
  #main {
    display: none; /* cache tout ton contenu */
  }
  #rotate-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 20px;
    padding: 20px;
  }
}

/* Si l'écran est en mode paysage */
@media screen and (orientation: landscape) {
  #rotate-message {
    display: none; /* cache le message */
  }
}



.manuscrit {
    font-family: 'Dancing Script', 'Handlee', 'Great Vibes', cursive;
    font-size: 18px;
    line-height: 1.8;
    color: #2c2c2c;
}