body {
    --color-bg :#202020;
    --color-bright : #505050;
    --color-dark : #090909;
    background-color:  var(--color-bg);
    font-family: Arial, Helvetica, sans-serif;
}

fieldset {
    background-color: #ffffff06;
    border: 3px var(--color-dark) solid;
    border-radius: 20px;
    margin:50px auto;
    padding: 0 0 1em 0;
    font-size: 16px;
    width:40rem;
}
fieldset legend {
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    color: var(--color-dark);
}

/* ==== Liens ==== */
#liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 14px;
}
#liens a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    text-decoration: none;
    text-align: center;
    width:95px;
    height: 90px;
    border-radius: 5px;
}
#liens a:hover {
    background-color: var(--color-bright);
}
#liens a img {
    width: 44px;
}
#liens a div {
    margin:10px 0 0 0;
}

/* ===== A faire ===== */
#faire h2 {
    margin: 1rem 0 0 0;
    padding: 0 0.3rem;
    font-size: 1.2rem;
    color:var(--color-dark);
    background: linear-gradient(90deg, #303030FF,#30303000);
    user-select: none;
}

#faire h2 span.btn {
    font-weight: normal;
    padding:0 0.25rem;
    margin:0;
    border: none;
    border-radius: 0.6rem;
    background-color: var(--color-bright);
    cursor: pointer;
}
#faire ul {
    margin:0;
    padding-left:2rem;
}
#faire li {
    margin: 0.4rem 0.4rem 0.5rem 0;
    color: #ccc;
    list-style-type: "▸ ";
}

#faire input[type=text] {
    cursor: pointer;
    min-width:25em;
    background-color: transparent;
    border:none;
    color: #ccc;
    font-size: 1em;
}
#faire input[type=text]:focus:hover{
    cursor: text;
}

/* ===== Sablier ===== */
#sablier #choix {
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    align-items:center;
    padding:0 0.5rem;
}
#sablier #choix div {
    cursor:pointer;
    margin:0.5rem;
    font-size: 40px;
    font-family: arial;
    text-align: center;
    width: 6rem;
    box-shadow: 0.1rem 0.1rem 0.25rem black;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    user-select: none;
}
#sablier .simple {
    background: linear-gradient(rgba(200,240,53,0.3),rgba(200,151,53,0.3));
    border-color:rgba(43,53,57,0.3);
}
#sablier .actif {
    background: linear-gradient(rgba(200,240,53,1),rgba(200,151,53,1));
    border-color:rgba(43,53,57,1);
}
#sablier #boutons {
    text-align: center;
}
#sablier #boutons button {
    background-color:rgb(43,53,57);
    color: #999;
    margin: 0.7rem;
    cursor: pointer;
}