Vous êtes sur la page 1sur 2

*, body {

margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
cursor: none;
}

nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
transition: all 0.3s ease-out;
}
/* Animation NavBar */
.anim-nav {
background: #333;
color: #F1F1F1;
border-bottom: 1px solid #F1F1F1;
}

.liste {
width: 100%;
height: 100%;
list-style-type: none;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 20px;
}
.item {
margin: 0 10px;
font-size: 22px;
}

.home {
height: 100vh;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.home h1 {
font-size: 100px;
padding-left: 100px;
padding-top: 200px;
color: #222;
}

p {
padding: 50px 100px;
text-align: justify;
}

/* Effet au clic */
.clickAnim {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(0,0,0,0.8);
opacity: 0;
position: absolute;
z-index: 1000;
transform: scale(0);
transform-origin: center;
animation: clickAnim 1s ease-in-out;
}
@keyframes clickAnim {
0% { transform: scale(0); opacity: 0;}
50% { transform: scale(2); opacity: 1; }
100% { transform: scale(0); opacity: 0; }

/* Curseur personnalisé */

.cursor {
pointer-events: none
}
.cursor__ball {
position: fixed;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 10000;
}
circle{
fill: #f7f8fa;
}