body {
    font-family: 'Arial', sans-serif;
    background-color: #000; /* Fond noir */
    color: #fff; /* Texte en blanc */
    text-align: center;
}

header {
    background: #f00; /* Rouge vif pour l'en-tête */
    padding: 10px 0;
}


/*Sceen splatch */


#splash-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
    display: block;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    background-image: url(../img/Ghost.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
}

#loading-bar {
    width: 0;
    height: 15px;
    background-color: #ffeb00;
    transition: width 5s;
}

#logoapp {
	width:min(40vw,25vh);
	top:10vh;	
	position:relative;
}

/* Introduction */

#introduction {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Assurez-vous qu'elle est au-dessus des autres éléments */
}

.introduction-content {
    text-align: center;
}
#mainpage {
    display: none;//flex;
}

#login-div {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: none;//flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

#start-game {
    background-color: #32CD32; /* Vert lime */
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

#start-game:hover {
    background-color: #228B22; /* Vert plus foncé */
}

/* Capture */
#capture-button {
    /* Style du bouton */
}

#capture-animation {
    /* Style de la div d'animation */
}

/* Exemple d'animation */
@keyframes exemple-animation {
    from { /* état initial */ }
    to { /* état final */ }
}

#animation-container {
    animation: exemple-animation 2s infinite;
}

/* Score */
#score {
    display: flex;
    justify-content: center;
    margin: 20px;
}

.ghost-slot {
    width: 50px; /* Ou la taille souhaitée */
    margin: 0 5px;
}

/* Option */

#open-options {
    background-color: #32CD32; /* Vert lime, ou tout autre couleur de votre choix */
    color: white;
    padding: 10px 20px;
    margin: 20px auto;
    display: block;
    font-size: 16px;
    cursor: pointer;
}

#open-options:hover {
    background-color: #228B22; /* Vert plus foncé pour l'effet hover */
}

#avatar-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-color: #000000ad;
    text-align: center;
    z-index: 99999;

}


#avatar-panel-content {

    position: absolute;
    top: 0;  
	left:	5vw;
    width: 90vw;
    height: 100%;
    padding: 0px;

    text-align: center;
    background-image: url(../img/box.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0;
}
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #fff; /* Choisir une couleur qui se démarque du fond du panneau */
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
}

.avatar {
    cursor: pointer;
    border: 2px solid transparent;
}

.avatar:hover {
    border-color: blue;
}

.avatar img {
    width: 20%;
    height: auto;
}


/* Map */



header h1 {
    font-size: 2em;
    color: #ffd700; /* Jaune doré pour le titre */
}

#map {
    height: 400px; /* Hauteur de la carte */
    margin: 20px auto;
}

button {
    background-color: #32CD32; /* Vert lime */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

button:hover {
    background-color: #228B22; /* Vert plus foncé */
}
/* barre ressources */

#resource-bar {
    display: flex;
    justify-content: center;
    background-color: #f3f3f3;
    padding: 3px;
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    background-color: #55b30d;
    margin: 0;
    left: 0px;
}
.resource {
    margin: 0 20px;
    display: flex;
    align-items: center;
}

.resource img {
    width: 24px; /* Ou la taille souhaitée */
    height: auto;
    margin-right: 10px;
}


/* div collect temps*/

#collect-crystals {
    text-align: center;
    margin: 20px;
}

#collect-button {
    background-color: #4CAF50; /* Couleur verte */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

#collect-button:hover {
    background-color: #45a049; /* Couleur verte plus foncée pour l'effet hover */
}


footer {
    background: #333; /* Gris foncé pour le pied de page */
    color: #fff;
    padding: 10px 0;
}