@charset "UTF-8";
/* CSS Document */

html {
  min-height:100vh;
    min-width: 100vw;
}

body {
    
  margin: 0;0;0;0;
    min-height:100vh;
    min-width: 100vw;
  
background-repeat : no-repeat;
    background-image:url("fascia.jpg"); margin-left:0; margin-right: 0; background-attachment:fixed; background-size: cover; }

    
@font-face {
   font-family: "Ma police";
   src: url("Lucida Handwriting Italic.ttf");
}

/*RESPONSIVE DESIGN*/

@media (max-width:329px) {
    div#titre{
        font-size: 150%;
        /*color:hotpink;*/
    }
    
    p.citation1{
       font-size: 80%;
       /* color:hotpink;*/
    }
    
   p.citation2{
       font-size: 80%;
       /* color:hotpink;*/
    }
    
   ul#menu{
        font-size:60%;
       /* color:hotpink;*/
       display:grid;
    }
    
   
}

@media (min-width:330px) and (max-width:610px)
    {
    div#titre{
        font-size: 170%;
        /*color:darkmagenta;*/
    }
    
    p.citation1{
       font-size: 110%;
       /* color:darkmagenta;*/
    }
    
   p.citation2{
       font-size: 110%;
       /* color:darkmagenta;*/
    }
    
   ul#menu{
        font-size:70%;
       /* color:darkmagenta;*/
       display:grid;
    }
    
   
}

@media (min-width:611px) and (max-width:799px) {
    div#titre{
        font-size: 200%;
       /* color:orange;*/
    }
    
    p.citation1{
       font-size: 140%;
       /* color:orange;*/
    }
    
   p.citation2{
       font-size: 140%;
      /*color:orange;*/
    }
    
   ul#menu{
        font-size:80%;
          /*  color:orange;*/
    }
}




@media (min-width:800px) and (max-width:999px) {
    div#titre{
        font-size: 250%;
       /* color:white;*/
    }
    
    p.citation1{
       font-size: 180%;
       /* color:white;*/
    }
    
   p.citation2{
       font-size: 180%;
        /*color:white;*/
    }
    
   ul#menu{
        font-size:90%;
            /*color:white;*/
    }
}

@media (min-width:1000px) and (max-width:1299px) {
    div#titre{
        font-size: 280%;
        /*color:blue;*/
    }
    
    p.citation1{
       font-size: 210%;
       /* color:blue;*/
    }
    
   p.citation2{
       font-size: 210%;
       /* color:blue;*/
    }
    
   ul#menu{
        font-size:95%;
        /* color:blue;*/
    }
}


@media (min-width:1300px){
       div#titre{
        font-size: 300%;
        /*color:yellowgreen;*/
    }
    
    p.citation1{
       font-size: 220%;
        /*color:yellowgreen;*/
    }
    
   p.citation2{
       font-size: 220%;
       /* color:yellowgreen;*/
    }
    
   ul#menu{
        font-size:95%;
        /* color:yellowgreen;*/
    }
}



/*MENU DU HAUT*/



ul#menu{
     min-width:auto;
    width:auto; height:auto;
    margin: auto;
    padding:0;
    text-align: center;
     margin-top: 2%;
    margin-bottom: 2%;
   /* background-color:red;*/
    padding-top:2%;padding-bottom:2%;
    
}


li.menu{
/* on place les liens du menu horizontalement */
    display: inline-block;
    padding:0;
}



li a {
    text-decoration: none;
   
	color:#000;
    font-family: "Ma police", "lucida handwriting", cursive, serif;
    font-size:120%;
	line-height:200%;
    width:auto;
     padding: 20px; /*espacement entre chaque titre du menu*/
    /*touche aux menus du haut (texte, couleur, espacement etc.)*/
}
    
    span.titre_accueil 
{ 
color:#5b6a82;   
	}



#menu a:hover{ opacity: 0.5; 
filter: alpha(opacity=30); 
	}

/*TITRE DE LA PAGE*/

#titre { 
    font-family: "Ma police", "lucida handwriting", cursive, serif;
font-size:310%;
text-align:center; 

left: 0; right: 0; top:20%;
    width:auto;
    
    margin-top: 2%;
    margin-bottom: 2%;
    /*background-color:yellow;*/
	}


/*TEXTE DE LA PAGE*/
    
    
div#texte_accueil {
    text-align: center; 
font-family: "Georgia";
    width: auto;

  column-count: 2;
    column-gap: 40%;
    
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left:2%;
    padding-right:2%;
    padding-bottom:2%;
   /* background-color: aqua;*/
    
    }


.citation1 {
    
    line-height:140%;
    font-style: italic;
    font-family: "garamond";
    width:auto;height: auto;
    left:5%; top:5%;
   
    font-size: 250%;
    
}

.citation2 {
    
    line-height:140%;
    font-style: italic;
    font-family: "garamond";
    width:auto;height: auto;
 padding-top:5%;
   font-size: 250%;
}

/*IMAGE DE FOND */

#fascia {
 opacity:0.75;
       
}

/*PIED DE PAGE*/

footer{
    /*background-color: pink;*/
    bottom:0%;
 
}

img#logo {
 
    width: 30%;
    height: 30%;
    padding-left:30%; padding-right:35%;padding-bottom:0%;
    
}