html{
    padding : 0;
    margin : 0;  
}

body{
    padding : 0;
    margin : 0;
}

/******************** IMPORT FONTS *******************/

@font-face {
    font-family: "Geomanist Bold";
    src: url("./assets/fonts/Geomanist-Bold.otf") format("opentype");
}

@font-face {
    font-family: "Geomanist Medium";
    src: url("./assets/fonts/Geomanist-Medium.otf") format("opentype");
}

@font-face {
    font-family: "Geomanist Regular";
    src: url("./assets/fonts/Geomanist-Regular.otf") format("opentype");
}

/******************** FONTS *******************/

h1 {
    font-size: 32px;
    margin: 0px 0px;
}

h2 {
    font-size: 22px;
    width: 540px;
    margin: 10px 0px;
}

p{
    font-size: 14px;
    margin: 0px;
}

input{
    font-size: 16px;
}

.S{
    font-size: 12px;
}

.bold{
    font-family: "Geomanist Bold";
}

.medium{
    font-family: "Geomanist Medium"; 
}

.regular{
    font-family: "Geomanist Regular";    
}

/******************** COLORS *******************/

.grey-500{
    color: #2B1E31 ;
}

.grey-400{
    color: #94969C ;
}

.white{
    color: #FFFFFF;
}

/***** BACKGROUND *****/

.bg-amber-100{
    background: #FFFCF0;
   }

.bg-amber-500{
    background: #FFC107;
}
   
/******************** SHADOWS *******************/

.yellow-shadow{
    box-shadow: 4px 4px 0px #FFC107; 
}

.purple-shadow{
    box-shadow: 3px 3px 0px #59089E;
}

.yellow-hover{
    transition: box-shadow 200ms;
}

.yellow-hover:hover{
    box-shadow: 4px 4px 0px #FFC107;  
}

.green-hover{
    transition: box-shadow 200ms;
}

.green-hover:hover{
    box-shadow: 4px 4px 0px #81D155;  
}



/******************** BOX DE VALIDATION *******************/

.primary-container{
    width: 880px;
    margin: 0 auto;
    margin-top: 80px;
    border-radius: 16px;
}

/***** HEADER *****/

.document-header-container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 24px 24px;
    border: 3px solid #2B1E31;
    border-radius: 16px;
    background: #FFFFFF; 
}

/** BOX TEMPS RESTANT **/

.time-left-container{
    display: flex;  
    align-items : center;
    padding: 12px;
    border: 2px #2B1E31 solid;
    border-radius: 16px;
}

.clock-icon{
    margin-right: 12px;
    width: 24px;
    height: 24px;
}

.time-left-container p{
    margin-bottom: 4px;
}


/***** LISTE DES VALIDATEURS *****/

.validators-item{
    width: 722px;
    margin: 16px auto;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 3px #2B1E31 solid;
    border-radius: 16px;
    background: #FFFFFF;
}

.validator-name-container {
    display: flex;
    align-items: center;
}

.box{
    width:40px;
    height: 40px;
    border: 2px #2B1E31 solid;
    border-radius: 8px;
    margin-right: 16px;
    overflow: hidden;
}

.validator-name-container .box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*** INPUTS ***/

input[type="submit"],
button {
    cursor: pointer;
}

.input-send{
    font-size: 16px;
    padding: 16px 18px;
    background: #59089E;
    border: none;
    border-radius: 16px;
}

.input-close-container{
    display: flex;
    justify-content: flex-end;
}

.input-close{
    font-size: 14px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 2px #2B1E31 solid;
    border-radius: 16px;
    margin-right: 64px;
    margin-bottom: 32px;
}

/******************** WELL DONE *******************/

.well-done-header-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 24px;
    border: 3px solid #2B1E31;
    border-radius: 16px;
    background: #FFFFFF; 
}

.fusee-icon{
    width: 34px;
    margin-right:24px;
}

.redirect-cards-container{
    padding: 100px 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.redirect-card {
    z-index : 100;
    width: 320px;
    padding: 32px 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #FFFFFF;
    border: 3px solid #2B1E31;
    border-radius: 16px;
}

.redirect-card a {
    display: block;
    text-decoration: none;
}

.notion-icon{
    width: 40px;
    margin-right:4px;
    margin-bottom: 18px;
}

.outside-icon{
    width: 16px;
    margin-right:4px;
}

button,
a.button {
    width: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #FFFFFF;
    padding: 16px 18px;
    background: #59089E;
    border: none;
    border-radius: 16px;
}

.perceval-content{
    width: 280px;
    position: absolute;
    top: 126px;
    left: 584px;
    z-index :2;
}

.text-white-container{
    width: 100%;
    z-index: 20;
    margin-top: 32px;
    padding: 12px 64px;
    text-align: center;
    background: #FFFFFF;
    border: 3px solid #2B1E31;
    border-radius: 16px;
}





/******************** DARK MODE *******************/

@media (prefers-color-scheme: dark) {
    /****** COLORS *****/

    .grey-500{
        color: #FFFFFF ;
    }

    .grey-400{
        color: #94969C ;
    }

    .white{
        color: #FFFFFF;
    }

    /** BACKGROUND **/

    .bg-amber-100{
        background: #110A2C;
    }

    .bg-amber-500{
        background: #59089E;
    }

    /****** SHADOWS *****/

    .yellow-shadow{
        box-shadow: 4px 4px 0px #59089E; 
    }

    .purple-shadow{
        box-shadow: 3px 3px 0px #FFC107;
    }

    .green-hover{
        transition: box-shadow 200ms;
    }

    .green-hover:hover{
        box-shadow: 4px 4px 0px #81D155;  
    }

    /****** BOX DE VALIDATION *****/

    .document-header-container{
        background: #110A2C;
        border-color: #FFFFFF;
    }

    /** BOX TEMPS RESTANT **/

    .time-left-container{
        border-color: #FFFFFF;
    }

    /** LISTE DES VALIDATEURS **/

    .validators-item{
        border-color: #FFFFFF;
        border-radius: 16px;
        background: #110A2C;
    }

    .box{
        background: #FFFFFF;
    }

    /* INPUT */

    .input-send{
        border: 2px #FFFFFF solid;
    }

    .input-close{
        background: #110A2C;
        border-color: #FFFFFF;
    }

    /** WELL DONE **/
    .well-done-header-container h1{
        color: #110A2C;
    }

}