:root{
    --backgroundColor : #d4d3cb;
    --secondaryColor : #03071e;
    --secondaryColorLowOpa : rgba(221, 221, 221, 0.877);
    --wrongAnswerColor:rgb(255, 0, 0);
    --goodAnswerColor:rgb(77, 231, 136);
    /* font-family: monospace; */
    font-family: Segoe UI, Arial, sans-serif;

}
button:hover{
    cursor: pointer;
}


/* -------------------------------------------------------------------------- */
/*                                    LOGO                                    */
/* -------------------------------------------------------------------------- */
.menu{
    display: block;
    width: 100%;
}
.menu img{
    margin: 6px 5px 0px 5px;
    height: 40px;
}
.menu .img{
    margin: 0px;
    padding: 0px;
}

div.imgContainer{
    position: absolute;
    z-index: -1;
    width: 98%;
}
#bigLogo{
    position: sticky;
    z-index: -1;
    width : 600px;
}

@media screen and (max-width: 540px){
    #bigLogo{
        width: 300px;
    }
    .menu li.deconnexion a{
        display: none;
    }
}

/* -------------------------------------------------------------------------- */
/*                              Messages partial                              */
/* -------------------------------------------------------------------------- */
.message{
    border-radius: 10px;
    margin : 0px 20px 0px 20px;
    padding: 10px;
}
.message button.close{
    background-color:rgba(0, 0, 0, 0.041);
    border: none;
    outline: none;
    box-shadow: none;
    float : left;
    border-radius: 10px;
}
.message-info{
    background-color: rgba(138, 224, 236, 0.548);
    border: solid 1px rgba(138, 224, 236, 0.6);
    color: solid 1px rgba(138, 224, 236,1);
}
.message-danger{
    background-color: rgba(236, 138, 138, 0.548);
    border: solid 1px rgba(236, 138, 138, 0.6);
    color: solid 1px rgba(236, 138, 138, 1);
}
.message-success{
    background-color: rgba(146, 236, 138, 0.548);
    border: solid 1px rgba(146, 236, 138, 0.6);
    color: solid 1px rgba(146, 236, 138, 1);
}

/* -------------------------------------------------------------------------- */
/*                                    Menu                                    */
/* -------------------------------------------------------------------------- */
.menuContainer{
    display: block;
    width: 100%;
    height: 80px;
}
.menu{
    list-style-type: none;
    padding: 0;
    display: block;
}
.menu li{
    display: block;
    float: left;
    color: var(--secondaryColor);
    transition: 0.2s;
}
.menu li:hover{
    background-color: var(--secondaryColor);
    color: var(--backgroundColor);
    transition: 0.2s;
    box-shadow: 0px 0px 5px var(--secondaryColor)
}

.menu .deconnexion, .menu .connexion{
    float: right;
    margin: 10px 2% 0px 0px;
    border-radius: 100px;
    color: var(--secondaryColor);
    box-shadow: inset 0px 0px 5px var(--secondaryColor);
    transition: 0.2s;
}
.menu .deconnexion:hover, .menu .connexion:hover{
    background-color: var(--secondaryColor);
    color: var(--backgroundColor);
    transition: 0.2s;
    box-shadow: 0px 0px 5px var(--secondaryColor);
}
.menu .connexion{
    background-color: var(--secondaryColor);
    color: var(--backgroundColor);
    box-shadow: inset 0px 0px 5px var(--backgroundColor);
}
.menu li a {
    display: block;
    color: inherit;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

@media screen and (max-width: 340px){
    .menu{
        font-size: small;
    }
}

/* -------------------------------------------------------------------------- */
/*                                    Input                                   */
/* -------------------------------------------------------------------------- */

body{
    background-color: var(--backgroundColor);
    /* bottom: 0px;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(20,33,61,1) 100%);
    background-color: rgba(0,0,0,1);
    background-size: 100% 1000px;
    background-repeat: no-repeat; */
}


.inputContainer{
    text-align: center;
}

#mainInput{
    display: inline;
    font-family: monospace;
    font-size: 30px;
    text-align: center;
    background-color: var(--secondaryColor);
    color: var(--backgroundColor);
    margin: 180px 0px 0px 0px;
    padding: 5px 10px 5px 10px;
    border-radius: 100px;
    box-shadow: 0px 0px 135px 40px var(--secondaryColor);
    border: none;
    outline: none;
    width: auto;
    transition: 0s cubic-bezier(.62,.05,.53,.90);
}
#loopSearch{
    display: inline-block;
    transform: translateY(7px);
    height: 40px;
}
#loopSearch:hover{
    cursor: pointer;
}
#mainInput.reducedShadow{
    box-shadow: 0px 0px 5px 0px var(--secondaryColor);
    transition: 1s cubic-bezier(.62,.05,.53,.90);
    margin-top: 200px;
}
#mainInput.setTransition{
    transition: 0.3s cubic-bezier(.62,.05,.53,.90);
}
#mainInput.mainInputTransition{
    border-radius: 1px;
    margin: 60px 0px 0px 0px;
}
#mainInput.wrongAnswer{
    box-shadow: 0px 0px 25px var(--wrongAnswerColor);
}
#mainInput.goodAnswer{
    box-shadow: 0px 0px 10px var(--goodAnswerColor);
}

@media screen and (max-width: 540px){
    #mainInput{
        margin: 50px 0px 0px 0px;
        font-size: 20px;
        width: 200px;
    }
    #mainInput.reducedShadow{
        margin: 105px 0px 0px 0px;
    }
    #loopSearch{
        height: 30px;
    }
}

/* -------------------------------------------------------------------------- */
/*                                    Data                                    */
/* -------------------------------------------------------------------------- */

.dataContainer{
    color: var(--secondaryColor);
    font-size: large;
    display: grid;
    /* grid-template-columns: 200px auto; */
    grid-template-columns: auto;
    grid-gap: 100px;
    margin: 60px 140px 0px 140px ;
}
@media screen and (max-width: 1200px){
    .dataContainer{
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* --------------------------------- History -------------------------------- */

#history{
    display: none;
}
/*
#historySpanContainer{
    text-align: center;
}

#historySpanContainer span{
    display: block;
    margin: 5px 0px 5px 20px;
    padding: 10px 0px 10px 0px;
}
#historySpanContainer span:hover{
    cursor: pointer;
    background-color: var(--secondaryColorLowOpa);
}
@media screen and (max-width: 850px) {
    #history{
        display: none;
    }
    .dataContainer{
        grid-template-columns: auto;
    }
}
*/
/* ----------------------------- To display data ---------------------------- */


#mainData{
    padding-top: 30px;
    background-color: var(--secondaryColorLowOpa);
    box-shadow: 0px 0px 5px var(--secondaryColorLowOpa);
    padding-bottom: 40px;
    transition: 0.5s cubic-bezier(.82,.05,.53,.98);
    transform-origin: 50% 0px;
    height: 0px;
    transform: rotateX(90deg) scaleX(0);
}
#mainData.appear{
    display: block;
    height: auto;
    transform: rotateX(0) scaleX(1);
}
#transfere, #nontransfere{
    display: none;
}
.mainDataInfoContainer{
    text-align: center;
    display: inline;
}
.mainDataInfoContainer .field{
    font-weight: bold;
}
.dataExp{
    padding: 30px 40px 0px 50px;
    text-align: left;
}
.dataExp .pngText{
    display: grid;
    grid-template-columns: 150px auto;
    align-items: center;
    grid-gap: 10px;
}
.dataExp .pngText img{
    width: 70px;
}

@media screen and (max-width: 900px){
    .dataExp .pngText{
    grid-template-columns: 100px auto;
    }
    .dataExp .pngText img{
        width: 40px;
    }
    .mainDataInfoContainer span{
        display: block;
    }
    .mainDataInfoContainer .field{
        padding-top: 20px;
    }
}
@media screen and (max-width: 900px){
    .dataExp .pngText{
        grid-template-columns: auto;
    }
}

/* ------------------------------- About page ------------------------------- */
.container{
    padding: 20px;
    margin: 100px 60px;
    color: var(--secondaryColor);
    background-color: var(--secondaryColorLowOpa);
    box-shadow: 0px 0px 5px var(--secondaryColorLowOpa);
}
.container div{
    padding: 20px;
}