/* Responsivity */
@media screen and (max-aspect-ratio: 260/600){
  #app_bg{
    /*background:pink;*/

  }
  #header_title #APP_title{
    /*display: none;*/
  }
  #app_content{
    height: calc(90% - var(--app-header-height) - 0em);
  }
  .questions_button{
    font-size: 1.0em;
  }
}
@media screen and (min-aspect-ratio: 260/600){
  #app_bg{
    /*background:red;*/
  }
  .question_pic_container{
    width: calc( 37% - 0.7em );
  }
}
@media screen and (min-aspect-ratio: 300/455){
  #app_bg{
    /*background:blue;*/
  }
  .question_pic_container{
    width: calc( 28% - 0.7em );
  }
}
@media screen and (min-aspect-ratio: 380/460){
  #app_bg{
    /*background:yellow;*/
  }
  .question_pic_container{
    width: calc( 24% - 0.7em );
  }
  .question_menu #APP_title{
    font-size:2em;
  }
  .question_btn{
    font-size: 4em;
  }

}
@media screen and (min-aspect-ratio: 525/450){
  #app_bg{
    /*background:purple;*/
  }
 .question_menu #APP_title{
   font-size:1.5em;
 } 
 #question_next{
   width: calc(50% - 0.5em);
 }
 #question_btns{
   max-width: 90%;
 }
 #question_btns_container {
    display: flex; 
  }
 .question_menu #APP_title{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
 } 


 .APP_popup_window{
  flex-wrap: wrap;
  flex-direction: row;
 }
  .APP_popup_line {
    border-left: 2px inset gray;
    padding: 0.5em;
  }
  #next_question_auto_container hr {
    display: none;
  }


  .APP_menu.edition_menu {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #questions_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .questions_button {
    margin: 1em;
  }


  .edition_menu #APP_title{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}

@media screen and (min-aspect-ratio: 600/360){
  #app_header{
    /*background:grey;*/
  }
  #app_content{
    width: calc(90% - 0em);
    height: calc(100% - var(--app-header-height) - 0em);
  }
  #app{
    height: calc(100% - 0em);
  }
}

@media screen and (min-aspect-ratio: 530/300){
	#app_header{
		/*background:blue;*/
	}
  #question_zone {
    display: flex;
  }
	#question_next{
		margin: 0.1em 0.5em;
	}
	.question_pic_container{
		width: calc( 33% - 0.7em );
	}
	#question_btns_container{
		width: 50%;
	}
	.question_menu {
	  display: flex;
	  flex-wrap: wrap;
	}
	.question_menu #APP_title{
		width: 100%;
	}
	#question_pics {
	  width: calc(50% - 2em);
	}
	#question_btns_container{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

@media screen and (min-aspect-ratio: 570/270){

  #app_header{
    /*background:red;*/
  }

	.question_pic_container{
		width:calc(24% - 0.7em);
    height:fit-content;
	}
	#question_pics{
		width: calc(72% - 2em);
	}
	 #question_btns_container {
    width: 32%;
  }

  #APP_popup_window {
    position: fixed;
    bottom: 0;
  }
}

@media screen and (min-aspect-ratio: 820/290){
  #app_header{
    /*background:purple;*/
  }
  .question_menu #APP_title{
    /*display: none;*/
  }

  #APP_popup_window_title, #APP_popup_window_title_hr{
    display: none;
  }
  #APP_popup_window{
    padding:0;
  }


  .questions_button{
    font-size: 1.5em;
  }

}

@media screen and (min-aspect-ratio: 960/260){
  #APP_popup_window{
    font-size:0.8em;
  }
}




/* Computer fullscreen */
@media screen and (min-width: 1400px){
  .APP_menu_button{
    font-size:1.2em;
  }
}



/* --- Main menu --- */

@media screen and (min-aspect-ratio: 1000/850){
  #MM_buttons_container{
    /*margin-top: 0;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .MM_button {
    width: 42%;
  }
}
@media screen and (min-aspect-ratio: 915/440){
  .MM_button img{
    height:2em;
  }
}

@media screen and (max-aspect-ratio: 550/780){
  .MM_button_title{
    font-size: 1.0em;
  }
}
@media screen and (max-aspect-ratio: 450/780){
  .MM_button img {
    height: 2em;
    width: 2em;
  }
}
@media screen and (max-aspect-ratio: 410/780){
  .MM_button{
    width: 80%;
  }
}
@media screen and (max-aspect-ratio: 370/800){
  .MM_button_title{
    font-size: 0.7em;
  }
  .MM_button img {
    height: 1.5em;
    width: 1.5em;
  }
}