*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

*::selection{
    background-color:cornflowerblue;
    color:darkblue;
}

body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-color:white;
}

/*-------------------------TITLE SPACE-------------------------*/

    .title_space{
        height:130px;
        width:99%;
        margin:0.5% 1%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        box-shadow:1px 1px 2px grey;
        border-radius:15px;
        background-color:cornflowerblue;
        
    }

        .title_space > h1{          
            margin:10px;
            padding :0 10%;
            box-shadow:1px 1px 2px grey;
            border-radius:15px;
            background-color:lightgrey;
            font-family: "Orbitron", sans-serif;
            font-weight:bold;
            font-size:32px;
        }

            .title_space > h1 > span{
                font-size:20px;
            }


        .title_space > div{
            height:32%;
            width:96%;
            margin:1% 2%;
            display:flex;
            flex-direction:row;
            justify-content:center;
            align-items:center;
            box-shadow:1px 1px 2px grey;
            border-radius:10px;
            background:linear-gradient(to right,cornflowerblue,darkblue 10%);            
            overflow:hidden;
            }

            .title_space > div > p{
                transform:translate(100%);
                color:cornflowerblue;
                font-family: "Orbitron", sans-serif;
                font-weight:bold;
                text-wrap:nowrap;
                animation:translation 40s linear infinite normal;
            }

            @keyframes translation{
                to{
                    transform:translate(-100%); 
                }
            }


/*-------------------------BODY SPACE-------------------------*/

    .body_space{
        width:99%;
        margin:0.5% 1%;
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:flex-start;
        box-shadow:1px 1px 2px grey;
        border-radius:15px;
        background-color:cornflowerblue;        
    }

/*-------------------------BODY SPACE-------------------------*/
/*Subdivisions*/

        .body_space > div{
            width:24%;
            margin:0.5%;
            display:flex;
            flex-direction:column;
            justify-content:flex-start;
            align-items:center;
            box-shadow:1px 1px 2px grey;
            border-radius:15px;
            background-color:lightgrey;
        }

/*-------------------------BODY SPACE-------------------------*/
/*Titres*/

            .body_space > div > h2{
                padding:10px;
                font-family: "Orbitron", sans-serif;
                font-size:18px;
                text-align:center;
            }

/*-------------------------BODY SPACE-------------------------*/
/*Paragraphes et formulaires*/

            .body_space > div > p, .body_space > div > form{
                width:95%;
                margin:10px;
                padding:10px;
                box-shadow:1px 1px 2px grey;
                border-radius:15px;
                text-align:justify;
            }

            .body_space > div > form{
                display:flex;
                flex-direction:column;
                justify-content:flex-start;
                align-items:flex-start;
                background:linear-gradient(to bottom right, lightgrey 50%,cornflowerblue);
            }

            .body_space > div > form.no_color{
                box-shadow:none;
                background:none;
                margin:0;
                padding:0;
            }

                .body_space > div > form > *{
                    margin:2.5px 0;
                }

                .choice{
                    width:100%;
                    display:flex;
                    flex-direction:row;
                    justify-content:flex-start;
                    align-items:center;
                }

                    .choice > *{
                        padding:0  0 0 10px;
                    }

                    .choice > input:checked{
                        accent-color:darkblue;
                    }

                .body_space > div > form label{
                    font-family:"Orbitron",sans-serif;
                    font-weight:bold;
                }

/*-------------------------BODY SPACE-------------------------*/
/*Paragraphes et formulaires - champs textuels*/

                .field{
                    width:90%;
                    padding:5px;
                    font-size:16px;
                    border:none;
                    box-shadow:1px 1px 2px grey;
                    border-radius:5px;
                    background-color:cornflowerblue;
                    color:darkblue;
                }

                    .field:focus{
                    outline:2px solid darkblue;
                    }

                    .field::selection{
                        background-color:lightblue;
                    }

                        .password{
                            height:25px;              
                     }

                        .textarea{
                        height:100px;
                        text-align:justify;
                    }

/*-------------------------BODY SPACE-------------------------*/
/*Paragraphes et formulaires - fichiers à insérer*/

            .file{
                display:none;
            }

            .file_substitute, .submit_substitute{
                position:relative;
                height:30px;
                display:flex;
                flex-direction:row;
                justify-content:center;
                align-items:center;
                box-shadow:1px 1px 2px grey;
                border-radius:5px;
                background-color:darkblue;
                color:cornflowerblue;
                font-family:"Orbitron",sans-serif;
                font-weight:bold;
                font-size:16px;
            }

            .file_substitute{
                width:50%;
            }

            .submit_substitute{
                width:98%;
            }

            .file_substitute:hover .file_substitute_button{
                opacity:1;
            }

                .file_substitute_button, .submit_button{
                    position:absolute;              
                    height:100%;
                    width:100%;
                    display:flex;
                    flex-direction:row;
                    justify-content:center;
                    align-items:center;
                    border:2px solid grey;
                    box-shadow:0px 0px 5px white;
                    border-radius:5px;
                    background:radial-gradient(ellipse,white,cornflowerblue);
                    color:darkblue;
                    font-family:"Orbitron",sans-serif;
                    font-weight:bold;
                    font-size:16px;
                    cursor:pointer;
                    opacity:0;
                    transition:opacity 0.5s linear;
                }
            
                .submit_substitute:hover .submit_button{
                    opacity:1;
                }

                .choice_validation{
                    width:50%;
                    color:darkblue;
                    font-weight:bold;
                    white-space:nowrap;
                    overflow:hidden;
                }