.short-stack-regular {
  font-family: "Short Stack", cursive;
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: KinderChild;
  src: url(../font/KinderChild.otf);
}

body{margin:0;
background-attachment: fixed;
background-image:url(../images/japanese-wave-seamless-pattern-free-vector.png) ;

height: 200vh;}

#parallax{
position: relative;    
height: 100vh;
background-color: #f5fabb;
background-size: cover;
overflow: hidden;}

.parallax__layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.layer1{z-index: 6;
    --parallax-speed: 1;
}

.layer2{z-index: 8;
display: flex;
align-items: center;
margin-bottom:;
--parallax-speed: -2;}

.layer2 img{margin-bottom: 200px;}

.layer3{z-index: 4;
display: flex;
justify-content:flex-end;
align-items: flex-end;
--parallax-speed: 2;
margin-bottom: ;
margin-right: ;}

.layer4{z-index: 7;
display:flex ;
align-items: flex-start;
--parallax-speed: -3;
mix-blend-mode: screen;opacity:50% ;}

.layer5{z-index: 2;
display:flex ;
align-items:center;
margin-left: 700px;
--parallax-speed: -1;}

div{display: flex;
align-items: center;}

section{display: flex;
justify-content: center;
align-items: center;
height: 95vh;}


#card{height: 400px;
display: flex;
width: 70%;}


#card .card-item{border:5px solid rgb(255, 248, 150);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
background-size: cover;
background-position: center;
filter: grayscale(100%);
transition: all .5s;}

#card .card-item:hover {filter: none;
flex:5;}

#card .card-item span{transform: rotate(-90deg);}
#card .card-item span:hover{transform: rotate(0);
transition: all .5s;}

#card .card-item:nth-child(1){background-image: url(../images/perso1.png);}
#card .card-item:nth-child(2){background-image: url(../images/perso5.png);}
#card .card-item:nth-child(3){background-image: url(../images/perso4.png);}
#card .card-item:nth-child(4){background-image: url(../images/perso6.png);}
#card .card-item:nth-child(5){background-image: url(../images/perso3.png);}
#card .card-item:nth-child(6){background-image: url(../images/perso2.png);}

#sectionvideo {height:70vh;
width: 100%;}

video{border: 10px rgb(255, 92, 92) solid;
border-radius: 5px;}

#button1{width:450px;
height:60px;
border-radius:11px;
border:none;
font-weight:none;
display: flex;
position: absolute;
padding: 10px;}

#sectionbutton {display: flex;
align-items: center;
height: 10vh;
text-align:center}

#button1 a{font-family:Kinderchild;
font-size:25px;
text-decoration:none;
text-align:center;
color: rgb(253, 253, 253);}

#animal1{height: 35vh;
display: flex;
border: top 20px;}

.pulsate-bck {
	-webkit-animation: pulsate-bck 2s ease-in-out infinite both;
	        animation: pulsate-bck 2s ease-in-out infinite both;}

            @-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#animal1 {height: auto;
width: ;
position: relative;
right: -400px;
bottom: -100px;}

#apropos{height: 60vh;
width: 100%;}

#text{text-align: center;
height: ;
width: ;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px; ;
margin: 0%;
font-family:"Short Stack";
font-size: small;
background-color: white;
border: 5px solid;
border-color: rgb(255, 248, 150);
border-radius: 14px;
padd}

h1{color: #fc4747;}
h2{color: #ff6c6c;}

#hover2{margin: auto;
height: 50vh;}





footer {
  text-align:center;
  flex-direction: column;
  padding: 3px;
  background-color: black;
  color: white;
}





















#button1 {
 appearance: button;
 background-color: rgb(131, 47, 47);
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 20px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 13px 19px;
 text-align: center;
 text-transform: uppercase;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
}

#button1:after {
 background-clip: padding-box;
 background-color: #fc4747;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

button:main, button:focus {
 user-select: auto;
}

button:hover:not(:disabled) {
 filter: brightness(1.2);
}

button:disabled {
 cursor: auto;
}

button:active:after {
 border-width: 0 0 0px;
}

button:active {
 padding-bottom: 10px;
}
  

.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.swing {
    animation : swing 2s both infinite;
}

@keyframes swing {
    20% { transform: rotate(15deg) }
    40% { transform: rotate(-10deg) }
    60% { transform: rotate(5deg) }
    80% { transform: rotate(-5deg) }
    100% { transform: rotate(0deg) }
}