/*Ces propriétés sont pour tout le body*/
body {
    background-color: black;
    color           : white;
    font-family     : Arial, Helvetica, sans-serif;
    margin          : 0;
}

/*Voici le CSS pour le menu*/
/*-----------------------*/
#menu ul {
    display        : flex;
    font-weight    : bold;
    justify-content: center;
    font-size      : 1.15em;
    margin         : 0;
    text-align     : center;
}

#menu ul li {
    display        : flex;
    list-style     : none;
    justify-content: center;


}

#menu ul li a {
    padding        : 1.35em;
    text-decoration: none;
}

#active_menu {
    background-color: white;
    color           : black;
}

#menu ul li a:not(#active_menu) {
    background-color: black;
    color           : white;
}


#menu ul li a:hover {
    background-color: rgb(241, 160, 53) !important;
    color           : black !important;
}


/*Le icon du menu mobile*/
#menu_icon {
    position      : absolute;
    top           : 5px;
    right         : 5px;
    display       : none;
    flex-direction: column;
    margin-bottom : 200px;
    margin        : 5px;
    float         : right;
}

#menu_icon * {
    width           : 30px;
    height          : 4px;
    background-color: white;
    margin          : 3px;
}

/*Pour qu'on a un "feedback" d'avoir cliqué */
#menu_icon:active {
    border: 1px solid white;
}


/*Les ids "#bg_<page>_n°" sont les images de fond-écran */
#bg_home_1 {
    background-image: url(../media/img/mars_2_fullhd.jpg);
    background-size : cover;
}

#bg_home_2 {
    background-image: url(../media/img/earth.jpg);
    background-size : stretch;
}

#bg_home_3 {
    background-image: url(../media/img/spacex_mars.jpg);
    background-size : stretch;
    height          : 67rem;
}



#bg_earth_vs_mars_2 {
    background-image : url(../media/img/2k_stars.jpg);
    background-repeat: repeat;
    height           : fit-content;

}


#bg_colonies_1 {
    background-image: url(../media/img/spacex_mars.jpg);
    background-size : cover;
    height          : 65em;
}




/*Les id avec le préfix #img_<site>_n°*/
/*sont les images utilisés sur les sites.*/
#img_earth_vs_mars_1,
#img_earth_vs_mars_2,
#img_economy_1,
#img_economy_2 {
    display        : flex;
    height         : 50%;
    width          : 50%;
    align-self     : center;
    justify-content: center;
    margin-left    : 2em;
    margin-right   : 2em;
}


#img_economy_2 {
    width : 30vw;
    height: 30vw;
}

/*Display pour le site Earth vs Mars (eva)*/

#eva_container {
    display       : flex;
    flex-wrap     : wrap;
    flex-direction: column;
    align-items   : center;

}

#eva_element_1,
#eva_element_2 {
    display  : flex;
    flex-wrap: nowrap;
}


#eva_container h2 {
    position: absolute;
    left    : min(90%, 10rem);
}

#eva_1_txt,
#eva_2_txt {
    flex-direction: column;
    margin-left   : 1em;
    margin-right  : 1em;
}

/*Display pour le site "Economy"*/
/*-------------------------*/
#economy_container {
    display       : flex;
    align-items   : center;
    flex-direction: row;
    flex-wrap     : wrap;
}

#economy_element_1,
#economy_element_2 {
    display: flex;
}

#economy_container_title {
    margin : 0;
    display: block;
}


/*Pour le drop-down des sources de contenu*/
#content_sources {
    width     : 8.5em;
    font-style: italic;
    cursor    : pointer;
}

#content_sources:hover {
    text-decoration: underline;
}

#content_sources::selection {
    background-color: transparent;
}


#sources_list {
    display   : none;
    list-style: none;
}

#source_economy_artemis {
    margin    : inherit;
    margin-top: 45vh;
}

#sources_container {
    display    : flex;
    margin-left: 2em;
}

#arrow_sources {
    padding-top: 0.8em;
}


/*Display pour le site "Colonies"*/
/*------------------------*/
#colonies_container {
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
}

#colonies_map {
    border: 0;
    width : 75%;
    height: 60vh;
}


/*Style pour le site "SpaceX / NASA*/
/*---------------------------------/*

/*Pour les articles NASA + SPACEX*/
#spacex_nasa_container {
    display        : flex;
    justify-content: space-around;
    margin         : 0 inherit;
    padding        : 0;

}

#spacex_nasa_element_1 h2,
#spacex_nasa_element_2 h2 {
    text-align: center;
}


#spacex_nasa_element_1,
#spacex_nasa_element_2 {
    margin-left : 2em;
    margin-right: 2em;
    width       : 45%;
}


/*IMGs de la gallerie en bas*/
#spacex_nasa_imgSw_1,
#spacex_nasa_imgSw_2,
#spacex_nasa_imgSw_3,
#spacex_nasa_imgSw_4 {
    z-index        : -1;
    width          : 90%;
    height         : auto;
    display        : flex;
    justify-content: center;
    align-self     : center;
    margin         : auto;
}

#spacex_nasa_imgSw_2,
#spacex_nasa_imgSw_3,
#spacex_nasa_imgSw_4 {

    display: none;
}

/*Conteneur des controls de la gallerie*/
#spacex_nasa_controls {
    display        : flex;
    justify-content: space-around;
    background     : rgba(0, 0, 0, 0.5);

}


/*Explications des images*/

#spacex_nasa_img_expl {
    text-align: center;
    width     : 75%;
}

/*Les boutons gauche + droits pour la gallerie*/
#spacex_nasa_btn_left,
#spacex_nasa_btn_right {
    background-color: transparent;
    border          : 1px solid white;
    width           : 2em;
    height          : 2em;
    padding         : 0.7em;
}



#spacex_nasa_btn_left {
    transform: rotate(180deg);
}

#spacex_nasa_btn_left:hover,
#spacex_nasa_btn_right:hover {
    background-color: white;

}



/*Tous les liens, qui se trouven dans un texte*/
.internal_link {
    color          : white;
    font-style     : italic;
    text-decoration: underline;
}

.external_link {
    color          : white;
    font-style     : italic;
    text-decoration: inherit;
}

.external_link:hover {
    text-decoration: underline;
}

/*Le vidéo dans le fond-écran du site "Earth vs Mars"*/
/*https://www.w3schools.com/howto/howto_css_fullscreen_video.asp*/

#bg_video_rotate {
    position        : absolute;
    left            : 0;
    top             : -5px;
    height          : 67rem;
    /*VERY IMPORTANT: show the video as actual background*/
    z-index         : -1;
}

#bg_vid_btn {
    position       : absolute;
    left           : 2em;
    width          : 200px;
    font-size      : 18px;
    padding        : 10px;
    border         : 1px solid white;
    background     : transparent;
    color          : #fff;
    cursor         : pointer;
    text-decoration: none;

}

#bg_vid_btn:hover {
    background-color: white;
    color           : black;
}

video {
    display: flex;
    height : auto;
    width  : 100%;
}

/*Tous les images de fond-écran ont ces propriétés*/
.bg_image {
    background-repeat  : no-repeat;
    background-size    : cover;
    background-position: top center;
    height             : 67rem;
    object-fit         : cover;

}

/*Les styles pour le tableau du site "Earth vs Mars"*/
/*------------------------------------------------*/
table {

    margin-top     : 14em;
    border-collapse: collapse;
    margin-bottom  : 15em;
    max-width      : 90%;

}


/*La table data, qui n'est pas premier ou dernier enfant*/
/*--> celui au centre a une bordure gauche + droite*/
td:not(:first-child):not(:last-child) {
    border-left : 1px solid white;
    border-right: 1px solid white;

}

th {
    font-size     : 1.3em;
    padding-bottom: 7px;
    text-align    : center;
}


td:first-child {
    text-align: right;
}

td {
    border-top: 1px solid white;
    padding   : 20px 20px 20px 20px;
    font-size : 1em;
}

/*Les données du tableau, milieu + droite*/
td:not(:first-child) {
    text-align: center;
}

/*Derniere ligne*/
tr:last-child {
    border-bottom: 1px solid white;

}

#table_container {
    display        : flex;
    align-items    : center;
    justify-content: center;
}



/*Le style pour le texte des sources des images */
/*-------------------------------------------*/
.img_source {
    text-decoration: none;
    color          : white;
    font-style     : italic;
    font-size      : 0.6em;
    position       : absolute;
    right          : 3em;
    margin-top     : 49em;
}


.img_source:hover,
.img_source_spacex_nasa:hover {
    text-decoration: underline;
}

#img_source_eva_2 {
    width  : 5rem;
    padding: 0;

    position: absolute;
    left    : 3em;
}


.img_source_spacex_nasa a {
    text-decoration: none;
    color          : white;
    font-style     : italic;
    font-size      : 0.6em;
    position       : absolute;
    right          : 3em;
    margin-top     : 4em;
}


.img_source_spacex_nasa a:hover {
    text-decoration: underline;
}



/*Le titre principal des pages*/
#home_title h1 {
    font-size       : 2.5em;
    padding-top     : 17.5rem;
    text-align      : center;
    background-color: transparent;
    margin          : 0;
}

#economy_title h1,
#spacex_nasa_title h1,
#colonies_title h1 {
    font-size       : 2.5em;
    text-align      : center;
    background-color: transparent;
    margin          : 0;
    padding-top     : 7.5rem;
}


#home_title p,
#economy_title p,
#spacex_nasa_title p,
#colonies_title p {
    text-align: center;
    font-size : 1.2em;
    margin    : 2em;
    margin-top: 5rem;
}


#economy_title p,
#colonies_title p {
    margin       : auto;
    margin-top   : 2em;
    margin-bottom: 2em;
    width        : min(75%, 60em);

}



/*Les header, titres d'un certain article*/
h2 {
    background-color: transparent;
    font-size       : 2.25rem;
}

/*La classe text contient des articles et des h2*/
.text p {
    background-color: transparent;
    font-size       : 1.1em;
    padding-left    : 10px;
    padding-right   : 10px;
}

.text {
    margin    : auto;
    width     : min(90%, 80rem);
    text-align: justify;
}

/*Les iframe-embeds, comme des vidéos YT, et des cartes*/

iframe {
    border: none;
}

/*Les boutons "Learn More" sur le Home*/
.learn_more p {
    text-align: center;
}

.learn_more h2 {
    padding-top: 25rem;
    text-align : center;
    margin     : 0;
}

.container_learn_more {
    display       : flex;
    flex-direction: column;
}

.button_learn_more {
    justify-content : center;
    font-size       : 1em;
    font-weight     : bold;
    color           : white;
    background-color: transparent;
    border          : 2px white solid;
    margin          : auto;
    padding-top     : 1.5em;
    padding-bottom  : 1.5em;
    padding-left    : 2em;
    padding-right   : 2em;
    text-decoration : none;

}

.button_learn_more:hover {
    background-color     : white;
    color                : black;
    text-decoration-color: black;
    text-decoration      : underline;
}

/*La vidéo YOUTUBE du site Economy*/
#economy_video {
    display        : flex;
    justify-content: center;
}
/*Le pied de page*/

footer {
    margin-top     : 2em;
    border-top     : 1px solid white;
    display        : flex;
    flex-direction : row;
    justify-content: space-around;
    height         : 5rem;
    text-decoration: none;
}


footer * {
    text-align     : center;
    margin         : auto;
    color          : white;
    justify-content: space-around;
    width          : 150px;
}


/*Voici le CSS pour un écran plus petit (mobile / PC)*/
/*--------------------------------------*/
@media screen and (max-width: 800px) {

    #menu ul {
        flex-direction: column;
        text-align    : center;
        align-items   : center;
        padding       : 0;

    }


    #menu ul li a {

        width : 55vw;
        margin: auto;
    }



    /*On montre que le menu actif par défaut*/
    #active_menu {
        display: block;
    }


    #unactive_menu_1,
    #unactive_menu_2,
    #unactive_menu_3,
    #unactive_menu_4 {
        display: none;
    }


    #menu_icon {
        display: flex;
        border : 1px solid transparent;
    }

    /*Site Earth vs mars*/
    /*La vidéo sur earth vs mars n'est pas montrée*/

    #bg_video_rotate {
        display: none;
    }

    #bg_vid_btn {
        display: none;
    }


    #eva_container>* {
        flex-direction : column;
        justify-content: center;
        align-items    : center;
    }

    #img_earth_vs_mars_2 {
        order: 2;
    }

    #bg_earth_vs_mars_1 {
        background-image: url(../media/img/planets_mobile_1800_4.png);
        background-size : contain;
        width           : 100%;
    }


    /*Site economy*/


    #economy_container {
        flex-direction: column;
        flex-wrap     : wrap;
    }

    #economy_element_1,
    #economy_element_2 {
        flex-direction: column;
    }



    /*Site SpaceX / NASA */
    #spacex_nasa_container {
        flex-direction: column;
    }

    #spacex_nasa_element_1,
    #spacex_nasa_element_2 {
        width: auto;
    }


}


/*Handheld = mobile*/
@media handheld {

    /*Site Earth vs mars*/
    /*La vidéo sur earth vs mars n'est pas montrée*/

    #bg_video_rotate {
        display: none;
    }

    #bg_vid_btn {
        display: none;
    }

    #bg_earth_vs_mars_1 {
        background-image: url(../media/img/planets_mobile_1800_4.png);
        background-size : contain;
        width           : 100%;
    }

}