<template>
    <div id="mainContainer">
      <Infobulle></Infobulle>
      <TitleDiv></TitleDiv>
      <InfoDiv></InfoDiv>
      <GraffOver></GraffOver>
    </div>
</template>

<style scoped>
  /*================= Mise en page:
    => Mobile First : par défaut, moins de 500px
    => Tablette et PC format haut : de 500 à 1000px
    => PC large : à partir de 1000px
  */

  /*+++++++++++++++++ COPYBOX
      ================ PC HAUT/IPAD
      @media(min-width:650px){}
      ================ PC LARGE
      @media(min-width:1300px){}
  */

  #mainContainer{
    background-color: transparent;
    width:100%;
    position:absolute;
    inset:0;
    height:233%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 0;
  }
  /*================ PC LARGE*/
  @media(min-width:1300px){
    #mainContainer{
      flex-direction: row;
      height:100%;
    }
  }
</style>

<script>
  export default {
    name : 'App',
    mounted(){
      document.documentElement.setAttribute("data-theme", "light")
      console.log("Vue root app is fully loaded!");
    }
  };
</script>
