/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  font-family: "Dancing Script", cursive;
	font-size: 18px;
}

/* nav, ul, li { */
	/* margin:0; */
	/* padding 0; */
/* } */

.background-image {
    background-image: url('images/Ginkgo.png'), url('images/papier1.jpg');
    height:100%;
    max-width:864px;
    background-position: center center;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.background-image-symbolique {
    background-image: url('images/Convalaria.png'), url('images/papier1.jpg');
    height:100%;
    max-width:864px;
    background-position: center center;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.background-image-infos {
    background-image: url('images/Eucalyptus.png'), url('images/papier1.jpg');
    height:100%;
    max-width:864px;
    background-position: center center;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.background-image-cagnotte {
    background-image: url('images/Polygonatum.png'), url('images/papier1.jpg');
    height:100%;
    max-width:864px;
    background-position: center center;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.content {
    background: rgba(255, 255, 255, 0.8); /* Transparence pour ne pas cacher l'image */
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.chinese {
	font-size:1rem;
	font-family:Serif;
}

.title:hover {
  opacity: 0;
}

.title:hover .chinese {
  opacity: 1;
}

.date {
	font-size: 2rem;
}

span {
    position: absolute;
    display: block;
    text-shadow: 
        -1px 0 1px #c6bb9f, 
        0 1px 1px #c6bb9f, 
        5px 5px 10px rgba(0, 0, 0, 0.4),
        -5px -5px 10px rgba(0, 0, 0, 0.4);
    position: absolute;
    display: block;
}


h1 {
	font-size: 2em;
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
}

h1, span {
    margin: 0;

}

p {
    font-size: 1.1em;
    color: #666;
    margin: 10px 0;
}
a:link{
text-decoration:none;
color:black;
}

a:hover{
font-weight:bold;
}

a:visited {
 text-decoration:none;
 color:black;
}

.bold {
 text-decoration:none;
font-weight:bold; 
color:orange;
}

.italic {
	font-style: italic;
}

/* @media (max-width: 768px) { */
    /* h1 { */
        /* font-size: 2rem; */
    /* } */

    /* p { */
        /* font-size: 1rem; */
    /* } */
/* } */

/* @media (max-width: 480px) { */
    /* h1 { */
        /* font-size: 0.5rem; */
    /* } */

    /* p { */
        /* font-size: 0.9rem; */
    /* } */
/* } */

.bas {
	background: rgba(255, 255, 255, 0.8);
    /* max-width: 600px; */
    max-width: 600px;
    /* width: 100%; */
	text-align:center;
	margin-left: auto;
    margin-right: auto;
	position: absolute;
	bottom: 0;
	color: #666;
	padding-bottom: 20px;
	padding-left:0 px;
}

.bas a {

}

nav {
		width:100%;
		margin: 0 auto;
}

nav ul{
		list-style-type:none;
}

nav li {
	list-style-type:none;
	margin-left:0px;
		float:left;
		width:25%;
		text-align:center;
		font-size:13px;
}

nav li a {
  display: block ;
  /* background: #c00 ; */
  /* color: #fff ; */
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  /* line-height: 1em ; */
  text-align: center ;
  text-decoration: none ;
  /* padding: 4px 0 ; */
}

nav a{
	border-bottom: 2px solid transparent;
}

a:hover{
		color: orange;
		border-bottom: 1px solid gold;
		font-weight:normal;
}