:root{
    --couleur-header: black;
    --couleur-background: #0e1111;
    --couleur-texte: #ab20fd;
    --couleur-texte-2: white;
    --couleur-liens: #7d12ff;
    --couleur-disabled-text: rgb(171, 171, 171);
    --couleur-disabled: rgb(87, 87, 87);
    --color-best: #ab20fd;
    --color-worst: 	#1acf8d;
}

* {
    font-family: "Roboto", sans-serif;;
}

body{
    background-color: var(--couleur-background);
    color: white;
    margin: 0;
    max-width: 100vw;
}

h1, h2, h3{
    color: var(--couleur-texte);
}

h1{
    font-size: 5em;
    text-align: center;

}

h2{
    font-size: 3em;
}

a{
    text-decoration: none;
    color: var(--couleur-liens);
}

header{
    display: flex;
    justify-content: space-between; 
    align-items: center;
    height: 5em;
    /* padding-right: 2em; */
    /* padding-left: 2em; */
    margin: 0;
    background-color: var(--couleur-header);
}

header div{
    width: 30%;
    text-align: end;
    padding-right: 10px;
}

header nav{
    margin-left: auto;
    margin-right: auto;
}

header nav ul{
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 1em;
}

nav{
    font-size: 2em;
}

li{
    list-style-type: none;
}

#mainSection{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#rules *, #deroulement *{
    list-style-type:disc;
}

#presSite{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;
}

#presSite *{
    margin-top: 5px;
    margin-bottom: 5px;
}

#right{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#countdown{
    display: flex;
    padding: 0;
    background-color: var(--couleur-header);
    gap: 5px;
    padding: 5px;
    width: fit-content;
}

#countdown > *{
    width: 5em;
    height: 5em;
    color: var(--couleur-texte-2);
    padding: 15px;
    background-color: var(--couleur-background);
}

#countdown div{
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: space-between; 
    flex-direction: column;
    align-items: center;
}

#countdown .cpt{
    margin-top: auto;
    margin-bottom: auto;
    font-weight: bold;
    font-size: 2em;
    color: var(--couleur-texte);
}

#countdown p{
    margin: 0;
}

#countdownTitle{
    margin: 5px;
    text-align: center;
}



#indexPage, #connexionPage{
    display: flex;
    justify-content: center;
    align-items: center;
}

#indexPage{
    flex-direction: column;
}

#connexionPage{
    gap: 2em;
    margin-top: 5em;
}

#submitTheme p{
    font-size: 1.5em;
}

#submitTheme li{
    font-size: 1.2em;
}

#submitSection{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#divSubmit{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

#divSubmit input[type="text"]{
    width: 65%;
    height: 3em;
    font-size: 1.5em;
    text-align: center;
}

#divSubmit button{
    width: 20%;
    font-size: 1em;
    text-align: center;
}

#themeCountDiv{
    display: flex;
    gap: 0.2em;
    align-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0.5em;

    border: solid 0.2em var(--couleur-header);
}

#themeCount{
    font-weight: bold;
    color: var(--couleur-texte);
    font-size: 1.2em;
}

.connexionSection{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    width: 35vw;
    height: 70vh;
    border-radius: 2em;
    border-width: 0.25em;
    border-style: solid;
    border-color: var(--couleur-texte);
    background-color: var(--couleur-header);
}

.connexionSection form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    width: 100%;
}

.connexionSection form div{
    width: 85%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.connexionSection form div *{
    margin: 0;
}

input[type="text"], input[type="password"]{
    background-color: var(--couleur-background);
    border: solid 0.2em var(--couleur-liens);
    border-radius: 0.5em;
    color: var(--couleur-texte-2);
}

input[type="text"]:disabled, input[type="password"]:disabled{
    background-color: var(--couleur-disabled);
    border: solid 0.2em var(--couleur-header);
    border-radius: 0.5em;
    color: var(--couleur-texte-2);
    cursor:not-allowed;
}

input[type="submit"], button{
    width: 50%;
    background-color: var(--couleur-background);
    border: solid 0.2em var(--couleur-liens);
    color: var(--couleur-texte);
    font-weight: bold;
    border-radius: 0.5em;
}

input[type="submit"]:hover:not([disabled]), button:hover:not([disabled]){
    background-color: var(--couleur-liens);
    border: solid 0.2em var(--couleur-liens);
    color: var(--couleur-texte-2);
    cursor: pointer;
    font-weight: bold;
    border-radius: 0.5em;
}

input[type="submit"]:disabled, button:disabled{
    background-color: var(--couleur-disabled);
    color: var(--couleur-disabled-text);
    border-color: var(--couleur-header);
    cursor:not-allowed;
}

.errorMess{
   color: red;
   font-weight: bold; 
   height: 5%;
   text-align: center;
}

#upper{
    width: 100%;
    display: flex;
    align-items:baseline;
}

#upper>*{
    flex-basis: calc(50% - 4em);
    padding: 2em;
}

#warningNotConnected{
    text-align: center;
}

#mainAdmin{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.themeAdmin{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    background-color: var(--couleur-header);
    border: solid 0.2em var(--couleur-liens);
    color: var(--couleur-texte-2);
    margin: 1em;
    padding: 1em;
    font-weight: bold;
    border-radius: 0.5em;
    width: calc(100% - 4em);
}

.themeAdmin button{
    width: fit-content;
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

.tournamentChoice, .tournamentSoloChoice{
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 10px;
    
    background-color: var(--couleur-header);
    border: solid 0.2em var(--couleur-liens);
    color: var(--couleur-texte-2);
    
    margin: 1em;
    padding: 1em;
    border-radius: 0.5em;
    width: calc(100% - 4em);
    height: 8em;
}

.tournamentSoloChoice{
    width: calc(60% - 4em) !important;
    height: fit-content !important;
}

.choiceTitle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.choiceSide{
    width: 48%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.themeChoice, .themeSoloChoice{
    font-weight: bold;
    font-size: 3em;
    margin: 0;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.themeSoloChoice{
    max-width: 90% !important;
    text-align: center;
}

.tournamentSoloChoice p{
    text-align: center;
}

.choiceTitle .choiceSide:last-of-type .themeChoice{
    text-align: right;
}

.choiceTitle .choiceSide:last-of-type button:not([disabled]){
    border-color: var(--color-worst);
    color: var(--color-worst);
}

.choiceTitle .choiceSide:last-of-type button:hover:not([disabled]){
    border-color: var(--color-worst);
    background-color: var(--color-worst);
    color: var(--couleur-texte-2);
}

.progressChoiceBar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progressChoiceSection{
    display: flex;
    width: 50%;
    height: 1.5em;
    max-height: 1.5em;
    justify-content: center;
    align-items: center;
    color: #0e1111;
    font-weight: bold;

    transition: width 0.8s ease-in-out;
}

.progressChoiceSection p{
    margin: 0;
    text-align: center;
    font-size: 1em;
    transition: font-size 0.8s ease-in-out;
}

.progressChoiceSection:first-child{
    background-color: var(--color-best);
    border-radius: 10px 0 0 10px;
}

.themeLeft{
    color: var(--color-best);
}

.progressChoiceSection:last-child{
    background-color: var(--color-worst);
    border-radius: 0 10px 10px 0;
}

.themeRight{
    color: var(--color-worst);
}

.soloChoice{
    border-radius: 10px 10px 10px 10px !important;
    font-size: 1.5em;
    width: 100% !important;
    height: 1em !important;
}

.emptyChoice{
    width: 0% !important;
}

.emptyChoice p{
    display: none;
}

.themeChoice p{
    font-size: 1.5em;
}

/* .progressChoiceSection.topChoice, .soloChoice, .choiceTitle.topChoice {
    background-color: var(--color-best) !important;
}

.progressChoiceSection:not(.topChoice){
    background-color: var(--color-worst) !important;
} */

.topChoice p {
    font-size: 1.5em;
}


.tournamentChoice button{
    width: 30%;
    height: 2em;
}

@media screen and (max-width:768px){
    main{
        margin: 10px;
    }
    #connexionPage{
        flex-direction: column;
    }

    .connexionSection{
        width: 80vw;
    }

    h1{
        font-size: 4em;
    }

    h2{
        font-size: 2.5em;
    }

    h3{
        font-size: 1em;
    }

    h1, h2, h3{
        text-align: center;
    }

    #upper{
        flex-direction: column;
    }

    #hiddenHeaderDiv{
        display: none;
    }

    header{
        justify-content: space-between;
        padding: 5px;
    }

    nav{
        margin: 0 !important;
    }

    #upper > *{
        width: calc(100% - 20px);
        padding: 10px;
    }

    #countdown > * {
        padding: 1px;
        width: 4em;
        height: 4em;
    }


    #countdown p:not([class="cpt"]){
        font-size: 0.7em !important;
    }

    .cpt{
        font-size: 1.5em !important;
    }

    #submitSection, #divSubmit{
        width: 100%;
    }

    #divSubmit input[type="text"]{
        width: 100%;
        height: 3em;
        font-size: 1em;
    }

    #divSubmit button{
        width: 50%;
        font-size: 0.8em;
    }

    .connexionSection form div{
        gap: 0.2em;
    }

    .connexionSection label, .connexionSection p{
        font-size: 0.9em;
    }

    .connexionSection{
        height: fit-content;
    }

    .errorMess{
        font-size: 0.9em;
    }

    .choiceTitle{
        flex-direction: column;
        height: 10em;
        margin: 1em;
    }

    .choiceSide{
        flex-direction: column;
        gap: 0.5em;
        width:100% !important;
    }

    .choiceTitle .choiceSide:last-of-type{
        flex-direction: column-reverse;
    }

    .tournamentChoice{
        height: fit-content;
    }

    .tournamentChoice button{
        width: 50%;
    }

    .themeChoice, .themeSoloChoice{
        white-space: normal !important;
        width: 100%;
        max-width: 100%;
        font-size: 1.8em;
    }

    .tournamentSoloChoice{
        width: calc(100% - 4em) !important;
    }

    .choiceTitle .themeChoice{
        text-align: center !important;
    }
}