@font-face {
    font-family: 'HaloHandletter' ;
    font-style: regular;
    src: url('./HaloHandletter.otf') format('TrueType');
}
@font-face {
    font-family: 'Quicksand_Book' ;
    font-style: regular;
    src: url('./Quicksand_Book.otf') format('TrueType');
}



@media all and (min-width: 721px) {
html{
    font-size: 25px;
  }
}
@media all and (max-width: 720px) {
html{
    font-size: 3.47vw;
  }
}

html {
  height: 100%;
    width:100%;
}
html, body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}

img {
    width: 100%;
}

body{
	background-color: /*#81c0ba*/white ;
	color: black;
    font-size:1em;
    height: 100%;
    width:100%;
    font-family: "Quicksand_Book";
}

#centre {
    background-color: #ffffff ;
    /*background-image:url(images/fond.svg);
    background-size: contain ;*/
    max-width: 721px;
    width:100%;
    max-height:1727px;
    height:239.6vw;
    margin:auto;
    overflow:hidden;
    position:relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


#dessin_eva {
    position: absolute;
    overflow:hidden;
    width: 80%;
    max-height:500px;
    height: 70.875vw;
    margin: 10px 10% 0 10%;
    top: 0%;
}

#feuille_famille {
    position: absolute;
    width: 100%;
    max-height:500px;
    height: 70.875vw;
    margin:0;
    top: 0%;
}

#texte1 {
    position:absolute;
    overflow:hidden;
    top:30.3%;
    width:100%;
    /*left:8%; */
    overflow:hidden;
    background: none ;
    font-size:2.62em;
    text-align: center;
    color:#000000;
    font-family: "HaloHandletter";
    z-index:200;

}

#photo {
    position: absolute;
    width: 100%;
    max-height:526px;
    height: 72.95vw;
    margin:0;
    top: 33.3%;
    z-index:100;
    /*overflow: hidden;*/

}

#photo_emile {
    position: absolute;
    top: 13%;
    left: 9%;
    margin: 0 auto;
    width: 78%;
    min-width: 80%;
    height:auto;
}

#lien {
    position: absolute;
    top: 15%;
    margin: 0 auto;
    left:11%;
    width: 78%;
    max-height:370px;
    height: 49.24vw;
    z-index:400;


}

#encadre {
    position: absolute;
    width: 100%;
    max-height:526px;
    height: 72.95vw;
    margin:0;
    top: 0%;


}
#texte2 {
    position:absolute;
    overflow:hidden;
    top:61.5%;
    width:100%;
    /*left:8%; */
    overflow:hidden;
    background: none ;
    font-size:2em;
    text-align: center;
    color: #81c0ba ;
    font-family: "HaloHandletter";
    z-index:200;


}

#texte3 {
    position:absolute;
    overflow:hidden;
    top:65%;
    width:100%;
    /*left:8%; */
    overflow:hidden;
    background: none ;
    font-size:1.21em;
    line-height: 1.2em;
    text-align: center;
    color: #000000 ;

}

#feuilles_éloi {
    position: absolute;
    width: 100%;
    /*max-height:300px;
    height: 25.875vw;*/
    height: 15%;
    margin:0;
    top: 0%;
}

#éloi {
    position:absolute;
    overflow:hidden;
    top: 71.2%;
    width:100%;
    /*left:8%; */
    overflow:hidden;
    background: none ;
    font-size:5.16em;
    text-align: center;
    color: #000000 ;
    font-family: "HaloHandletter";

}

#date {
    position:absolute;
    overflow:hidden;
    top:78.5%;
    width:100%;
    /*left:8%; */
    overflow:hidden;
    background: none ;
    font-size:0.93em;
    text-align: center;
}

#couffin {
    position: absolute;
    width: 100%;
    /*max-height:300px;
    height: 25.875vw;*/
    height: 15%;
    margin:0;
    top: 0%;
}

#basdepage {
    background: none;
    position:absolute;
    bottom:0px;    
    width:100%;
    height:5.5%;
    text-align: center;

}

#basdepage .adresse_titre {
    color: #d3a384 ;
    font-family: "HaloHandletter";
    font-size:1.5em;
    line-height: 0.7em;
}
#basdepage .adresse1 {
    color: #000000 ;
    font-size:0.74em;
    line-height: 1em;

}
#basdepage .adresse2 {
    color: #000000 ;
    font-size:0.802em;
    line-height: 1.1em;

}


#basdepage .adresse_mail {
    color: #000000 ;
    font-size:0.65em;

}

#basdepage a {
    text-decoration:none;
    color:inherit;


}

#basdepage a:hover{
    text-decoration:underline;
    color:inherit;
}

#feuille_adresse {
    position: absolute;
    width: 100%;
    /*max-height:300px;
    height: 25.875vw;*/
    height: 15%;
    top: 0%;
}


/* Place aux ballons !  */

#ballon_1 {
    max-width: 57px;
    width: 7.9vw;
    max-height: 76px;
    height: 10.54vw;
    position:absolute;
    overflow:hidden;
    top:5.9%;
    left:10%;
    border-radius: 50% / 50% ;
    background: rgba(0, 0, 0, 0) ;    
}

#ballon_2 {
    max-width: 44px;
    width: 6.1vw;
    max-height: 62px;
    height: 8.6vw;
    position:absolute;
    overflow:hidden;
    top:5.9%;
    left:24.5%;
    border-radius: 50% / 50% ;
    background: rgba(0, 0, 0, 0) ;    
}

#ballon_3 {
    max-width: 39px;
    width: 5.41vw;
    max-height: 57px;
    height: 7.9vw;
    position:absolute;
    overflow:hidden;
    top:7.6%;
    left:43%;
    border-radius: 50% / 50% ;
    background: rgba(0, 0, 0, 0) ;    
}

#ballon_4 {
    max-width: 38px;
    width: 5.41vw;
    max-height: 50px;
    height: 6.93vw;
    position:absolute;
    overflow:hidden;
    top: 7%;
    left:56.4%;
    border-radius: 50% / 50% ;
    background: rgba(0, 0, 0, 0) ;    
}

#ballon_5 {
    max-width: 44px;
    width: 6.1vw;
    max-height: 68px;
    height: 9.43vw;
    position:absolute;
    overflow:hidden;
    top:6%;
    left:66%;
    border-radius: 50% / 50% ;
    background: rgba(0, 0, 0, 0) ;    
}

#ballon_6 {
    max-width: 38px;
    width: 5.27vw;
    max-height: 62px;
    height: 8.60vw;
    position:absolute;
    overflow:hidden;
    top:9.5%;
    left:77%;
    border-radius: 50% / 50% ;
    background: rgba(0, 0, 0, 0) ;    
}

.ballon_int {
    position:absolute;
    min-width:150%;
    min-height:150%;
    overflow: hidden;
}