@font-face {
    font-family: "PicNic";
    src: url("fonts/PicNic.woff") format("woff"),
         url("fonts/PicNic.woff2") format("woff2");
}

@font-face {
	font-family: 'PicNic';
	src: url('fonts/picnic-regular-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('fonts/PicNic.woff') format('woff'), 
         url("fonts/PicNic.woff2") format("woff2"),
	     url('fonts/picnic-regular-webfont.ttf')  format('truetype'),
	     url('fonts/picnic-regular-webfont.svg') format('svg');
	}

@font-face {
    font-family: "Unbounded";
    src: url("fonts/Unbounded-Light.woff") format("woff"),
         url("fonts/Unbounded-Light.woff2") format("woff2"),
         url('fonts/Unbounded-Light.eot?#iefix') format('embedded-opentype'),
         url('fonts/Unbounded-Light.ttf') format('truetype'),
         url('fonts/Unbounded-Light.svg') format('svg');
    font-weight: normal;
}

@font-face {
    font-family: "Unbounded";
    src: url("fonts/Unbounded-Medium.woff") format("woff"),
         url("fonts/Unbounded-Medium.woff2") format("woff2"),
         url('fonts/Unbounded-Medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/Unbounded-Medium.ttf') format('truetype'),
         url('fonts/Unbounded-Medium.svg') format('svg');
    font-weight: bold;
}

@font-face {
     font-family: "Accrosport";
    src: url("fonts/Accrosport.woff") format("woff"),
         url("fonts/Accrosport.woff2") format("woff2"), 
         url('fonts/Accrosport.eot?#iefix') format('embedded-opentype'),
         url('fonts/Accrosport.ttf') format('truetype'),
         url('fonts/Accrosport.svg') format('svg');/**UTILISER EN BAS DE CASSE**/
} 


html, body {
  margin: 0;
  padding: 0;
   overflow-x: hidden;
}

h1{
    font-family: "PicNic";
    font-size: 6.5vh;
    color: white;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5vh;
}



h2{
    font-family: "Unbounded";
    font-weight: bold;
    font-size: 3vh;
    font-kerning: auto;
    color: white;
    text-align: center;
}

h3{
    font-family: "Accrosport";
    font-size: 8vh;
    color: white;
    text-align: center;
     max-width: 100%;
    margin-right: 10%;
    margin-left: 10%;
}

p{
    font-family: "Unbounded";
    font-weight: normal;
    font-size: 2vh;
    font-kerning: auto;
    color: white;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    
} 


ul{
    font-family: "Unbounded";
    font-weight: normal;
    font-size: 1.5vh;
    font-kerning: auto;
    color: white;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    list-style: none;
} 
a,
a:visited {
    color: white;
    opacity: 50%;
    text-decoration: none;
}

a:hover{
    color:white;
    opacity: 100%;
}

nav{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;

    background-color: #FFBCE3;

    display: flex;
    justify-content: center;
    padding-top: 30%;

    transition: left 0.4s ease;
    z-index: 999;
    }

nav li{
    margin-top: 10%;  
    font-family: "Unbounded";
    font-weight: bold;
    font-size: 3vh;
    font-kerning: auto;
    color: white;
    text-align: center;  
}

nav.active {
    left: 0;
  }

#icons {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1000;

    cursor: pointer;
    font-size: 4rem;
    color: white;
}

nav li{
    list-style: none;
}

.tout{
     min-height: 100vh;

    background:
        linear-gradient(
            to bottom,
            rgba(255,188,227,0) 0%,
        rgba(255,188,227,1) 10%,
        rgba(255,188,227,1) 100%
        ),
        url(images/ZEN4.webp);

    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    
}



#savoir{
    margin-top: 10%;
    margin-bottom: 5%;

}

#premiere p{
    background-image: url(images/coucherdesoleillavande.webp);
    background-size: 100rem;
    border-radius: 60px;
    margin-left: 13%;
    margin-right: 13%;
    padding: 17%;
}

#deuxieme p{
    background-image: url(images/coucherdesoleil3.webp);
    background-size: 100rem;
    border-radius: 60px;
    margin-left: 13%;
    margin-right: 13%;
    padding: 17%;
}

#troisieme p{
    background-image: url(images/OIF.webp);
    background-size: 100rem;
    border-radius: 60px;
    margin-left: 13%;
    margin-right: 13%;
    padding: 17%;
}

#quatrieme p{
    background-image: url(images/fesse.webp);
    background-size: 100rem;
    background-position: center;
    border-radius: 60px;
    margin-left: 13%;
    margin-right: 13%;
    padding: 17%;
}

#cinquieme p{
    background-image: url(images/arcenciel.webp);
    background-size: 100rem;
    border-radius: 60px;
    margin-left: 13%;
    margin-right: 13%;
    padding: 17%;
}

.arrow{
text-align: center;
margin-bottom: 40%;
}

#huitieme p{
    padding-bottom: 15%;

}

#neuvieme ul a,
#neuviene ul a:visited {
    color: rgb(255, 255, 255);
    opacity: 1;
    text-decoration: underline;
    font-size: 2vh;
}

#wc{
     display: block;
    width: 40%;
    max-width: 220px;
    height: auto;

    margin: 50% auto 30%;
}