/***********************************************
 ************************************************
             version mobile
 ************************************************
 ************************************************/

/***********************************************

               body

 ************************************************/

body {
    margin: 0;
    padding: 0;
    color: #ffffff;
}

/***********************************************

              header

 ************************************************/

header {
    background-color: #CD9CFF;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.img_menu_burger {
    max-width: 2.3rem;
    margin: .5rem;
}

.img_logo_header{
    max-width: 2.3rem;
    margin: .5rem;
}

/***********************************************

              main

 ************************************************/

main {
    background-color: #000000;
    padding: 20px;
    min-height: calc(100vh - 12.4rem);
}

h1{
    color: #ffffff;
    text-align: center;
    font-family: 'Russo one', sans-serif;
    font-size: 2rem;

}

.intro{
    font-family: Roboto , sans-serif;

}

p{
    font-family: Roboto , sans-serif;
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
}

ul{
    font-family: Roboto , sans-serif;
    font-size: 1rem;
}

a{
    color: #CD9CFF;

}

.sous-titre{
    margin-top: -.5rem;
    margin-bottom: 2rem;
    font-size: .5rem;
}


/***********************************************

              footer

 ************************************************/

footer {
    background-color: #0C193E;
}

.container {
    display: flex;
    justify-content: space-between;
}

.img_github_logo{
    max-width: 2.3rem;
    margin: .5rem;
    padding-left: 1rem;
    border-radius: 10px;
    text-align: center;
}

.img_logo_sans_fond{
    max-width: 8rem;
    margin: .5rem;
    border-radius: 10px;
    text-align: center;
}

.img_outlook_logo {
    max-width: 2.3rem;
    margin: .5rem;
    padding-right: 1rem;
    border-radius: 10px;
    text-align: center;
}

.copyright {
    font-family: 'Russo one', sans-serif;
    font-size: 1rem;
    margin: 0;
    padding: .7rem;
    text-align: center;
}


/***********************************************

              spécial page nav

 ************************************************/


.box-menu-accueil{
    display: block;
    background-color: #CD9CFF;
    padding: 1rem 8rem 1rem 1rem;
    border-radius: 10px;
    color: #000000;
    margin: 1rem auto 1rem .2rem;
    text-decoration: none;
    font-family: Roboto , sans-serif;
    font-size: 1rem;
}

.box-menu-communication-securiser{
    display: block;
    background-color: #CD9CFF;
    padding: 1rem 8rem 1rem 1rem;
    border-radius: 10px;
    color: #000000;
    margin: 1rem auto 1rem .2rem;
    text-decoration: none;
    font-family: Roboto , sans-serif;
    font-size: 1rem;
}

.box-menu-nombre-utilisateur{
    display: block;
    background-color: #CD9CFF;
    padding: 1rem 8rem 1rem 1rem;
    border-radius: 10px;
    color: #000000;
    margin: 1rem auto 1rem .2rem;
    text-decoration: none;
    font-family: Roboto , sans-serif;
    font-size: 1rem;
}

.box-menu-tor-ou-vpn{
    display: block;
    background-color: #CD9CFF;
    padding: 1rem 8rem 1rem 1rem;
    border-radius: 10px;
    color: #000000;
    margin: 1rem auto 1rem .2rem;
    text-decoration: none;
    font-family: Roboto , sans-serif;
    font-size: 1rem;
}

.box-menu-liens{
    display: block;
    background-color: #CD9CFF;
    padding: 1rem 8rem 1rem 1rem;
    border-radius: 10px;
    color: #000000;
    margin: 1rem auto 1rem .2rem;
    text-decoration: none;
    font-family: Roboto , sans-serif;
    font-size: 1rem;
}

.box-menu-liste-des-termes{
    display: block;
    background-color: #CD9CFF;
    padding: 1rem 8rem 1rem 1rem;
    border-radius: 10px;
    color: #000000;
    margin: 1rem auto 1rem .2rem;
    text-decoration: none;
    font-family: Roboto , sans-serif;
    font-size: 1rem;
}

/***********************************************

              spécial page index

 ************************************************/

.imgDDoS{
    text-align: center;
    max-width: 100%;
    height: auto;
}

.imgbotnet{
    text-align: center;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.info-user {
    color: red;
}

/***********************************************

               spécial page com-secu

 ************************************************/

.img_http {
    text-align: center;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    margin-bottom: .5rem;
}

.img_https {
    text-align: center;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    margin-top: .5rem;
}

/***********************************************

         spécial page nombre utilisateur

 ************************************************/

table {
    border-collapse: collapse;
    font-family: Roboto , sans-serif;
    text-align: center;
}

td {
    border: 1px solid white;
}

/***********************************************

                   spécial Tor-VPN

 ************************************************/

.img_VPN {
    text-align: center;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.img_reseaux_Tor {
    text-align: center;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.img_connexion_VPN_Tor{
    text-align: center;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

/***********************************************

                   spécial lien

 ************************************************/

.img_lien {
    text-align: center;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

/***********************************************

             spécial liste des termes

 ************************************************/


/***********************************************
 ************************************************
             version grand ecran
 ************************************************
 ************************************************/

/* utilisation de media queris pour afficher autrement quand l'écran devient asser grand */
@media  screen and (min-width: 780px){
    /***********************************************

                  body

    ************************************************/

    body {
        background-image: url("../images/fond.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;

    }

    /***********************************************

                  header

     ************************************************/

    header {
        position: relative;
        top: 7rem;
        max-width: 58rem;
        margin-left: auto;
        margin-right: auto;
        border-radius: 30px;
    }

    .img_menu_burger {
        max-width: 4rem;
        height: 4rem;
        margin: 1rem;
        border-right: solid 4px black;
        padding-right: 2rem;
    }

    .img_logo_header{
        max-width: 4rem;
        height: 4rem;
        margin: 1rem;
        border-left: solid 4px black;
        padding-left: 2rem;
    }



    /***********************************************

                  main

     ************************************************/

    main {
        max-width: 50rem;
        margin-left: auto;
        margin-right: auto;
        border-radius: 30px;
        background-color: rgba(0, 0, 0, .7);
        padding-right: 8rem;
        padding-left: 8rem;
    }

    main h1 {
        color: black;
        /* utilisation du z-index pour que le titre s'affiche le plus en haut */
        z-index: 1;
        position: relative;
        margin-bottom: 5rem;
    }

    .espace-footer {
        margin-bottom: 9rem;
    }


    /***********************************************

                  footer

     ************************************************/

    footer {
        max-width: 58rem;
        margin-left: auto;
        margin-right: auto;
        border-radius: 30px;
        position: relative;
        bottom: 9.5rem;
    }

    .img_github_logo{
        max-width: 5rem;
        margin: .5rem;
        padding-left: 1rem;
    }

    .img_logo_sans_fond{
        max-width: 15rem;
        margin: .5rem;

    }

    .img_outlook_logo {
        max-width: 5rem;
        margin: .5rem;
        padding-right: 1rem;
    }

    .copyright {
        font-family: 'Russo one', sans-serif;
        font-size: 1rem;
        margin: 0;
        padding: .7rem;
        text-align: center;
    }

    /***********************************************

                  spécial page nav

     ************************************************/


    main nav a {
        transition: all 400ms ease-out;
    }

    main nav a:hover {
        transform: scale(1.1) ;
    }


    /***********************************************

                  spécial page index

     ************************************************/


    /***********************************************

                   spécial page com-secu

     ************************************************/


    /***********************************************

             spécial page nombre utilisateur

     ************************************************/


    /***********************************************

                       spécial Tor-VPN

     ************************************************/


    /***********************************************

                       spécial lien

     ************************************************/


    /***********************************************

                 spécial liste des termes

     ************************************************/
}