body {
    font-family: 'Mooli', sans-serif;
    font-size: 1.2em;
    background-color: #010213;
    color: blue;
}
p {
    letter-spacing: 0.1rem;
}
a {
    text-decoration: none;
}






h1 {
    color: #59e070;
    text-transform: uppercase;
}
h2, h3, h4, h5, h6 {
    color: #80F080;
}
h1, h2, h3 {
    display: inline-block;
    background-image: linear-gradient(90deg , #004300 20%, #040511 80%);
    border: 1px solid green;
    border-radius: 10px;
    padding: 10px 20px;
    max-width: 100%;
    box-sizing: border-box;

}

/*Les listes*/
ul {
    list-style-type: none
}
ul li {
    background-image: url("../images/interogation_white.png");
    background-repeat: no-repeat;
    background-size: 1.2rem;
    padding-left: 2rem;
    padding-bottom: 1.1rem;
}

ul.voyageur li {
    background-image: url("../images/interogation.png");
}

ul.todo li {
    background-image: url("../images/interogation_red.png");
    padding-bottom: 1.5rem;
}

ul.todo li.checked {
    background-image: url("../images/interogation_green.png");
}
ul p{
    color:grey;
}
ul.todo img{
    width: 50px;
    height: auto;
    
}
.edit {
    font-style: italic;
    color: #438ff3;
    font-size: 0.8rem;
}

/*Le random*/

button {
  position: relative;
  overflow: hidden;
  color: #80C080;
  border: 1px solid green;
  border-radius: 10px;
  padding: 8px 15px;
  z-index: 0;
}

button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, #107310, #107310);
  z-index: -1;
  opacity: 0; 
  transition: opacity 0.7s ease;
}

button {
  background-image: linear-gradient(
    90deg,
    #107310 0%,
    /* #107310 15%, */
    #444444 30%,
    #444444 70%,
    /* #107310 85%, */
    #107310 100%
  );
}

button:hover::before {
  opacity: 1; 
}

button:hover {
  color: #80F080;
}
input {
    padding: 5px;
    margin: 5px;
}
#output {
    margin: 25px;
    padding: 10px;
    border: 1px solid #ccc;
    min-height: 50px;
    background: #f9f9f9;
    display:inline-block;
    min-width: 10%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Random page layout */
#random-title {
    text-align: center; 
    display: block;     
    margin: 20px auto;
    width: 95%;
    max-width: 900px;
}

.random-container {
    display: flex;
    justify-content: center;   
    align-items: flex-start;   
    width: 100%;
}

.random-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;

    background-color: #111; 
    border: 2px solid #59e070;
    border-radius: 12px;
    padding: 20px;

    width: 95%;        
    max-width: 900px;   
    box-sizing: border-box;
}

/* Boutons alignés au milieu */
.random-box .buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; 
}

.random-box input {
    max-width: 400px;       
    min-width: 20%;
    box-sizing: border-box;
}

/* Output occupe toute la largeur du cadre */
.random-box #output {
    /* width: 100%; */
    min-height: 50px;
    background: #064d35;
    border: 1px solid #00ffaa;
    color: #021d3a;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    align-content: center;
    border-radius: 60px;
}
.random-box .buttons {
    display: flex;
    gap: 10px;           
    width: 100%;
}

.random-box .buttons button {
    flex: 1;             
    aspect-ratio: 4 / 1; 
    font-size: 1em;      
    box-sizing: border-box;
}


/*La navigation*/
nav {
   
    background-color: #004300;
}
body {
    margin: 0px;
}
nav ul {
    margin: 0px;
    display: inline-block;
}
nav li {
    background-image: none;
}
nav li {
    display: inline-block;
    padding-left: 0;
}
nav {
    text-align: center; 
}
nav a {
    border: 2px solid #5CCD5C;
    border-radius: 5px;
    background-color: #004300;
    text-decoration: none;
    padding: 0 1em;
    color: green;
}
nav {
    position: sticky;
    top: 0px;
    padding: 2px;
}
nav li {
    margin: 5px;
}
nav ul {
    padding-left: 0;
}
nav a:hover {
    background-color: #80F080;
    transition-duration: 1s;
}
.current {
    background-color: #80F080;
    opacity: 0.5;
}

/* Grille */
.container {
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
}
nav {
    grid-column: 1 / 4;
    grid-row: 1;
}
#titre {
    grid-column: 2;
    grid-row: 2;
}
#contenu {
    grid-column: 2;
    grid-row: 3;
}

figure {
    text-align: center;
}
img {
    max-width: 90%;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#PN {
    display: none;
}
#GN {
    display: none;
}