:root {
  --border: 0px;
  --bg: rgba(25,25,25,0.7);
  --bgdropdown: rgba(25,25,25,1);
  --color: rgba(255,255,255,1);
}

html {
    height: 100%
}


/*element.style {
 background: center center / fill repeat fixed rgb(0, 0, 0) !important;
}
*/

body {
    margin: 0px;
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-weight: bold;
    height: 100%;
    /*font-family: 'VG5000', sans-serif;*/
    background-color: rgba(0, 0, 0, 255); 
    color: var(--color);
    font-size: calc(0.95vh + 0.95vw);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    background-size: 100% 1000% !important;
    background-position-x: 50% !important;
    background-position-y: 100% !important;

}

div {
    box-sizing: border-box;
}

#background_view, #splash {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

#background_view {
    z-index: 0;
}

#splash {
    display: flex;
    align-items: center;
    font-style: italic;
    padding: 2vh;
    z-index: 400;
   
}

.splash_title {
    margin-top: 20vh;
    text-align: center;
    font-size: 15vh;
    color: #fff;
}

.splash_sub {
    padding-top: 2vh;
    font-size: large;
    color: #fff;
    text-align: center;
    font-size: 3vw;
}

.background_media {
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
    object-position: center;
}


#header {
    border: var(--border) solid #cc0;
    background-color: rgba(0,0,0,0);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 96vw;
    margin-left: 2vw; 
    margin-right: 2vw; 
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 3vh;
}

#header_left, #header_right {
    border: var(--border) solid #cc0;
    flex-wrap: wrap;
    align-items: center;
    padding: 1vh;
    background-color: var(--bg);
}

#header_right {
    display: none;
    flex-direction: column;
}

#header_left {
    display: flex;
    flex-direction: row;
}

#header_picto> img {
    height: 2vh;
    margin-right: 1vw;
}

#location, #about {
    border: var(--border) solid #cc0;
    padding: 1vh;
    border-radius: 0.5vh;
}

#locs, #location, #location_bg {
    display: inline;
}


#location {
    z-index: 1;
    position: relative;
}


#location_bg {
    z-index: 0;
    position: absolute;
    background-color: rgba(60, 60, 60, 0.9);
    border-right: 2px solid rgba(92, 92, 92, 0.9);
    display: none;
}


#about {
    cursor: pointer;
}




.show {
  display: block;
}

#dropdown-menu, #show-list {
    display:flex;
    flex-direction: row;
    align-items: center;
}

#locations {
    padding-right: 1vh;
}

#show-list {
    display: none;
    flex-direction: column;
    background-color: var(--bgdropdown);
    padding: 1vh;
}

#header_alt {
    display: none;
    align-items: center;
    margin-top: 3vh;
    height: 6vh;
    position: fixed;
    width: 12vw;
    left: calc(50% - 6vw);
    justify-content: center;
    z-index: 500;
}

#intro_video {
    display: none;
    position: absolute;
    background-color: #000000;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}

#close_overlay {
    display: none;
    justify-content: center;
    align-items: center;
    position:fixed;
    top: 0;
    height: 7.5vh;
    width: 7.5vh;
    left: 0;
    padding: 7.5vh;
    z-index: 1001;
    cursor: pointer;
}

#close_overlay > img {
    object-fit: fill;
    width: 7.5vh;
    height: 7.5vh;
}

.figures {
    font-weight: bold;
    text-decoration: underline;
}

#fullscreen_video {
    display: none;
    justify-content: center;
    align-items: center;
    position:fixed;
    top: 0;
    height: 7.5vh;
    width: 7.5vh;
    right: 0;
    padding: 7.5vh;
    z-index: 1001;
    cursor: pointer;
}

#fullscreen_video > img {
    object-fit: fill;
    width: 7.5vh;
    height: 7.5vh;
}


#intro_video > iframe, #info_about {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 1000;
}

#info_about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10vw;
    padding-left: 5vw;
    padding-right: 5vw;
    font-weight: normal;
    line-height: calc(2.6vh + 1.5vw);
    font-size: calc(2.4vh + 1.2vw);
}

#info_about > .title1 {
    line-height: calc(2.9vh + 1.8vw);
    font-size: calc(2.4vh + 1.2vw);
    font-weight: bold;
}

#info_about > .title2 {
    line-height: calc(2.6vh + 1.5vw);
    font-size: calc(2.2vh + 1.1vw);
    font-weight: bold;
}

@media (orientation: portrait) {
    #info_about {
        font-size: 2.2vh;
        line-height: 2.8vh;
    }
}

a, a:visited, a:hover, a:active {
    color: #fff;
}

#info_video, #info_more, #info_link {
    z-index: 500;
    height: 6vh;
    width: 6vh;
    padding: 0.5vh 0.75vh;
    cursor: pointer;
}

.centered_content {
  display: flex;
  width: 100vw;
  background-color: none;
  justify-content: center;
  position: absolute;
  z-index: 1000;
}

.info_tooltip {
  flex-direction: column;
  background-color: var(--bg);
  color: #fff;
  border-radius: 6px;
  padding: 2vh 2vh;
}

#hamburger {
    height: 2vh;
    width: 2vh;
    cursor: pointer;
}

.menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.15vh;
    cursor: pointer;
}


#top-container {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

#dropdown-list {
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 2vh 2vw;
    width: 96vw;
}


.menu-item-img {
    height: 1.25vh;
    padding-right: 1vh;
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: #fff;
  border-radius: 6px;
  padding: 2vh 2vh;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 120%;
}

.tooltiptext {
    width: 30vw;
}

.ttt {
    display: flex;
}


.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent  var(--bg);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}



#data {
    position: fixed;
    bottom: 0;
    left: 0;
    border: var(--border) solid #cf0;
    background-color: rgba(0,0,0,0);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 96vw;
    margin-left: 2vw; 
    margin-right: 2vw; 
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

#data_main {
    border: var(--border) solid #cf0;
    background-color: rgba(0,0,0,0);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}


#data_left, #data_right, #data_left2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
}


#data_right_header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    margin: 2vh 0 0 0;
}

.data_gray, .data_hide, .data_reveal {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 1vh 0 1vh;
}

.data_gray {
    justify-content: space-between;
    background-color: var(--bg);
}


.data_hide, .data_reveal {
    /*margin: 0 0 0 1vw;*/
    /*padding: 1.25vh 1vh;*/
    justify-content: flex-end;
    /*height: 5vh;*/
    cursor: pointer;
}


.data_reveal {
    display: flex;
    display:none;
    background-color: var(--bg);
    height: 5vh;
    align-items: center;
}

#harvest {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 5vh;
    margin-bottom: 2vh;
    background-color: var(--bg);
}

#harvest-days {
    flex-grow: 2;
}


.data_hide> img, #toggle_icon_up> img {
    object-fit: fill;
    height: 2.5vh;
}

.data_icons, .data_labels, .data_values {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    padding: 1vh;
    display: inline-block;
    vertical-align: middle;
}

.data_labels {
    flex-grow: 4;
    vertical-align: middle;
}

.data_values {
    flex-grow: 2;
}


.data_title {
    display: flex;
    align-items: center;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-bottom: 2vh;
}

.data_icon, .data_label, .data_value {
    height: 2.5vh;
    margin: 0.5vh;
}

.data_icon > img {
    height: 2vh;
    width: auto;
}


#toggle_icon_left {
    padding-right: 1vh;
}


#toggle_icon_left.live {
    display: none !important;
}

#toggle_icon_right.live {
    display: flex !important;
    background-color: var(--bg);
    padding: 1vh;
}

#toggle_icon_left.replay {
    display: none !important;
}

#toggle_icon_right.replay {
    display: flex !important;
    background-color: var(--bg);
    padding: 1vh;
}



/* Squary to portrait*/
@media (max-aspect-ratio: 1/1) {


    #toggle_icon_left.live {
        display: flex !important;
    }

    #toggle_icon_right.live {
        display: none !important;
    }

    .background_media {
        height: calc(100vw / 1);
        scale: 1;
    }
    .data_icon, .data_label, .data_value {
        height: 1.8vh;
        margin: 0.5vh;
    }
    .data_icon > img {
        height: 1.8vh;
    }
    .data_title {
        margin-bottom: 1vh;
    }
    
    #data_left #planet-container {
        width: 100% !important; /* En mode portrait ou petits écrans, prendre toute la largeur */
    }
    
    
 
}

/* Squary */
@media (min-aspect-ratio: 1/1) {

    .data_toggle {
        /*visibility: hidden;*/
    }

    #data {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }

    #data_left, #data_right, #data_left2 {
        width: auto;
    }



}

@media (max-aspect-ratio: 9/16) {
    #locations {
        display: none;
    }
    body {
        font-size: 2.8vw;
        /*border: 1px solid #ff0000;*/
    }

    .tooltiptext {
        width: 50vw;
    }

}

@media (max-aspect-ratio: 16/10) { /* Landscape and below*/
    #background_view {
        /*width: 100;*/
        /*height: 100%;*/
    }
}

@media (min-aspect-ratio: 16/10) { /* Landscape ++ */
    #background_view {
        width: 100%;
        height: 110%;
        top: -5%;
    }
}

@media (min-aspect-ratio: 3) {
    body {
        font-size: 2.8vh;
    }
}


@media screen and (max-aspect-ratio: 4/3) { /* 4/3 to portrait */

    #background_view {
        /*border: 10px solid #3d8099;*/
        width: 100vw;
        /*height: 100vw;*/
    }

    

    .data_icons, .data_labels, .data_values {
 
    padding-bottom: 0vh;
    padding-top:0vh;
    }

    .data_gray, .data_hide, .data_reveal {
    padding: 0 0 0 0;
    }

    #harvest {
    margin-bottom: 0vh;
    margin-left:0;
    }

    #data_right_header {
    margin: 0vh 0 0 0;
    }

    .data_title {  
    padding-top:1vh; 
    padding-bottom: 0.5vh;
    }

    .life_support_cost   {   
    padding-top: 0.5vh;
    }

    .splash_title {
        margin-top: 20vh;
        font-size: 15vw;
    }

    .splash_sub {
        padding-top: 2vh;
        font-size: 3vw;
    }
}

#planet-container {
    position: relative; /* Assure que les enfants absolus sont positionnés par rapport à ce conteneur */
    padding: 0; /* Supprime le padding pour ajuster précisément la hauteur */
    width: 30vw; /* Largeur responsive par rapport à la fenêtre */
    height: 10vw; /* Hauteur proportionnelle à la largeur */
    background-color: var(--bg); /* Couleur de fond dynamique */
    display: flex; /* Utilise Flexbox pour l'alignement */
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement les enfants */
    justify-content: flex-end; /* Centre verticalement les enfants en bas */
    min-height: 25vh; /* Ajuste la hauteur minimale pour contenir la planète et le texte */
    max-width: 100%; /* Empêche de dépasser la largeur de la fenêtre */
}

#sphere-container {
    width: 100%; /* Prend toute la largeur disponible du conteneur parent */
    height: 100%; /* Prend toute la hauteur disponible du conteneur parent */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    position: relative; /* Positionnement relatif pour rester dans le flux du conteneur parent */
    z-index: 1; /* Place la sphère derrière le texte */
}

.text-container {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 5px;
    z-index: 2;
    text-align: center;
}

.text-info {
    display: flex;
    flex-direction: row; /* Ajoute les textes en ligne */
    justify-content: space-between; /* Aligne l'étiquette à gauche et la valeur à droite */
    align-items: center; /* Centre verticalement les éléments */
    width: 100%;
    margin-top: 5px; /* Ajoute de l'espace entre les lignes */
}

.left-text {
    flex: 1; /* Permet à l'étiquette de croître et de s'aligner à gauche */
    text-align: left; /* Aligne le texte à gauche */
}

.right-text {
    flex: 1; /* Permet à la valeur de croître et de s'aligner à droite */
    text-align: left; /* Aligne le texte à gauche pour correspondre au style des valeurs dans .data_values */
    padding-left: 1vw; /* Optionnel : ajoute un espacement entre l'étiquette et la valeur */
}