@font-face {
   font-family: police1;
 src: url(fonts/FlorDeRuina-Semilla.ttf)
}

@font-face {   
font-family: police2;
src: url(fonts/Grandola-Regular.otf);
}

#portable {
  display: none;
}

#defaultCanvas0 {
    position: fixed;
    top:0;
    left:0px;
    z-index: -10;
}

h1 {
 font-family: police1;
 color: #ffffff;
 font-size: 100px;
}

.gauche h2 {
  margin-top: 0px;
}

.droite h2 {
  margin-top: 0px;
}



h2 {
font-family: police2;
color: #ffffff;
background-color: rgb(0, 4, 127);
;

}


body {
background-color: rgb(0, 42, 255);
font-family: police2;
color: #ffffff;
text-align: center;
}


.gauche {
  display: inline-block;
  width: 46%;
  vertical-align: top;
  margin-bottom: 10px;
}

.droite {
  display: inline-block;
width: 46%;
vertical-align: top;
 margin-bottom: 10px;

}

img {
  width: 100%;
}




.bloc {
position: relative;
display: inline-block;
width: 40%
}


h3 {
font-family: police2;
color: #ffffff;
background-color: rgb(0, 4, 127);  
}



#container {
display: flex;

}


/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {

  #portable {
  display: block;
}

  #ordi {
  display: none;
}

 @font-face {
   font-family: police1;
 src: url(fonts/FlorDeRuina-Semilla.ttf)
}

@font-face {   
font-family: police2;
src: url(fonts/Grandola-Regular.otf);
}

#defaultCanvas0 {
    position: fixed;
    top:0;
    left:0px;
    z-index: -10;
}

h1 {
 font-family: police1;
 color: #ffffff;
 font-size: 50px;
}

h2 {
font-family: police2;
color: #ffffff;
background-color: rgb(0, 4, 127);
;

}


body {
background-color: rgb(0, 42, 255);
font-family: police2;
color: #ffffff;
text-align: center;
}


.gauche {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.droite {
  display: inline-block;
width: 100%;
vertical-align: top;

}

img {
  width: 100%;
}


  .bloc {
position: relative;
display: inline-block;
width: 20%
}


h3 {
font-family: police2;
color: #ffffff;
background-color: rgb(0, 4, 127);  
}



#container {
display: flex;

}






















}