/* Réinitialiser les marges et le padding par défaut du navigateur */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Appliquer la police de base Peace Sans, sauf pour le titre principal */
body {
    line-height: 1.6;
    color: #f4f4f4;
    background-color: #212222; /* Fond gris foncé */
    background-image: url(https://i.ibb.co/jDXDv0x/ZV-Logo.png);
    background-repeat: no-repeat;
    background-size: cover; /* Couvre toute la page */
    background-position: right; /* Colle l'image au bord droit */
    background-attachment: fixed; /* Garde l'image en place lors du défilement */
    background-blend-mode: overlay; /* Mélange l'image avec le fond */
    text-align: center;
}

/* Style pour le titre principal */
h1 {
    font-family: "Anton", sans-serif;
    margin: 40px 0 20px 0; /* Augmenter la marge supérieure du titre principal */
    color: #ffffff; 
    letter-spacing: 2px; /* Ajoute de l'espace entre les lettres */
    font-size: 3em; /* Augmente la taille du texte */

}

/* Style pour les titres secondaires */


/* Style du formulaire */
#videoForm {
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(68, 68, 68, 0.9); /* Fond légèrement plus clair que le fond de la page avec opacité */
    border-radius: 30px; /* Angles très arrondis */
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#videoForm input[type="text"] {
    width: calc(100% - 40px); /* Ajusté pour plus d'espace entre le champ et les boutons */
    padding: 15px;
    margin-bottom: 20px; /* Augmenter l'espace entre le champ de saisie et les boutons */
    border: 1px solid #666;
    border-radius: 30px; /* Angles très arrondis */
    color: #f4f4f4;
    background-color: rgba(85, 85, 85, 0.9); /* Opacité ajoutée */
    font-size: 16px;
}

/* Style pour le bouton "Add" */
#videoForm button {
    padding: 15px 20px;
    border: none;
    border-radius: 30px; /* Angles très arrondis */
    color: #fff;
    background-color: #bc3c4c; /* Rouge pâle */
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.3s, box-shadow 0.3s; /* Transition pour effet 3D et ombre */
    margin: 10px; /* Espacement entre les boutons */
    box-shadow: 0 2px 0 #500d14dc; /* Petite ombre initiale */
}

#videoForm button:hover {
    background-color: #a52929; /* Rouge plus foncé au survol */
    transform: translateY(-4px); /* Déplacement vers le haut au survol */
    box-shadow: 0 8px 0 #500d14dc; /* Ombre plus grande au survol */
}

/* Style pour la liste d'attente */
ul#waitingList {
    list-style-type: none;
    padding: 0;
    margin: 20px auto;
    max-width: 800px;
    border-radius: 30px; /* Angles très arrondis */
    background-blend-mode: overlay; /* Mélange l'image avec le fond */

}

ul#waitingList li:hover {
    transform: translateY(-4px); /* Déplacement vers le haut au survol */
    box-shadow: 0 8px 0 #1d1d1d; /* Ombre plus grande au survol */
}

ul#waitingList li {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(33, 34, 34, 0.8);
    justify-content: center;
    background-color: rgba(85, 85, 85, 0.9); /* Fond légèrement plus clair que le fond de la liste avec opacité */
    border-radius: 30px; /* Angles très arrondis */
    transition: transform 0.3s, box-shadow 0.3s; /* Transition pour effet 3D et ombre */
    box-shadow: 0 2px 0 #1d1d1d; /* Petite ombre initiale */
}

ul#waitingList li:last-child {
    border-bottom: none;
}

ul#waitingList .time {
    margin-right: 15px;
    color: #aaa; /* Gris clair */
}

ul#waitingList .video-title {
    margin-right: 10px;
    color: #bc3c4c; /* Rouge pâle pour les titres */
    text-decoration: none;
    font-family: "Arial", sans-serif;

}

ul#waitingList .video-title:hover {
    text-decoration: underline;
}

ul#waitingList .video-details {
    color: #ccc;
}

h2 {
    text-align: center;
}