@font-face {
    font-family: "SoItGoes";
    src: url("kg_so_it_goes/KGSoItGoes.ttf") format('truetype');
    src: url("kg_so_it_goes/KGSoItGoes.otf") format('otf');
}   

html, body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    padding: 0;
}

h1 {
    color:white;
    margin-left: 20px;
}

h2 {
    color: black;
    border-radius: 10px;
    border-color: rgb(240,188,60);
    text-align: center;
    font-family: 'SoItGoes';
    font-size: xx-large;
    background-color: rgb(240,188,60);
    border-radius: 10px;
    padding: 10px;
    z-index: 2;
}

    #header_accueil {
        display: flex;
        position: relative;
        background-color: rgb(40,48,52);
        height: 20vh;
        padding-bottom: 20px;
        border-bottom-style:solid;
        border-bottom-color: rgb(240,188,60);
        border-style: solid;
    }

        .logo_mdp {
            position: absolute;
            bottom: -20px;
            right: 0;
            margin: 30px;
            height: 50px;
            width : 50px; 
            border-style: solid;
            border-radius: 20px;
            border-color: black;
            background-color: rgb( 211 , 211 , 211);
        }

        #titrePrincipal {
            color: rgb( 211 , 211 , 211);
            font-family: 'SoItGoes';
            margin-left: 50px;
            font-size: 100px;
        }

    #contenu_accueil {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgb(40,48,52);
    }

        #partie_navigation {
            display: flex;
            flex-direction: column;
            height: 80vh;
            padding-bottom: 20px;
            margin-top: 30px;
        }

            #paragraphe_retrouvez {
                color: black;
                font-size: 30px;
                margin-left: 10%;
                margin-right: 10%;
                border-style: solid;
                background-color: rgb(240,188,60);
                border-radius: 20px;
                padding: 5px 0 5px 20px;
            }

            #navigation_accueil {
                display: flex;
                position: relative;
                flex-direction: row;
                justify-content: space-around;
                padding-left: 10%;
                padding-right: 10%;
                padding-top: 30px;
                padding-bottom: 30px;
                border-style: solid;
                border-radius: 20px;
                border-color: rgb(240,188,60);
                border-width: 5px;
                margin-left: 10%;
                margin-right: 10%;
                box-shadow: 6px 6px 6px rgb(240,188,60);
            }

            #navigation_accueil:after {
                content: ' ';
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                opacity: 0.05;
                background-image: url('fond_menu.jpg');
                background-repeat: no-repeat;
                background-position: center; 
            }

                .onglet {
                    color: black;
                    display: flex;
                    flex-direction: column;
                    border-radius: 20px;   
                    width: 20%;
                    z-index: 2;
                }

                    .sousonglet {
                        display: flex;
                        flex-direction: column;
                        border-style: solid;
                        border-color: black; 
                        background-color: rgb( 211 , 211 , 211);
                        padding: 10px;
                        border-radius: 20px;
                    }

                        .onglet_link {
                            text-align: center;
                            padding: 10px;
                            font-family: 'SoItGoes';
                            font-size: xx-large;
                            background-color: rgb(240,188,60);
                            border-style: solid;
                            border-color: black; 
                            border-radius: 10px;
                            margin-top: 10px;
                            text-decoration: none;
                        }
                            
                        .onglet_link:visited {
                            background-color: rgb(240,188,60);
                            color: black;
                        }

                        .conteneur_logo_cadenas {
                            text-align: center;
                        }

                    .logo_cadenas {
                        padding-top: 10px;
                        width: 30px; 
                        height: 30px;
                    }

    #partie_contenu {
        display: flex;
        flex-direction: row; 
        justify-content: space-around;
        color: white;
        padding-bottom: 50px;
        height: 80vh;
    }

        #newContenu {
            display: flex;
            position: relative;
            flex-direction: column;
            border-style: solid;
            width: 40%;
            border-style: solid;
            border-radius: 20px;
            border-color: rgb(240,188,60);
            border-width: 5px;
            padding: 20px;
            box-shadow: 6px 6px 6px rgb(240,188,60);
            z-index: 2;
        }

        #newContenu:after {
            content: ' ';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.05;
            background-image: url('fond_menu.jpg');
            background-repeat: no-repeat;
            background-position: right;
        }

            .ajout {
                padding: 10px;
            }

            .typeAjout{
                font-size: x-large;
                font-weight: bold;
            }

        #exSemaine {
            display: flex;
            position: relative;
            flex-direction: column;
            border-style: solid;
            width: 40%;
            border-style: solid;
            border-radius: 20px;
            border-color: rgb(240,188,60);
            border-width: 5px;
            padding: 20px;
            box-shadow: 6px 6px 6px rgb(240,188,60);
            z-index: 2;
        }

        #exSemaine:after {
            content: ' ';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.05;
            background-image: url('fond_menu.jpg');
            background-repeat: no-repeat;
        }

            #pdfViewer_exSemaine {
                border: none;
                width: 100%;
                height: 80vh;
                right: 80px; top: 10px;
                z-index: 2;
            }