*{
    padding: 0;
    margin: 0;
}


h1
{
color: rgb(253, 250, 253);
font-family: cursive;
}

div.conteneur
{
    /* 
border: 5px rgb(248, 188, 252) solid;
border-color: rgb(158, 212, 183);
 */
 display: flex;
 justify-content: space-around ;
 width: auto; 
 margin: auto;
 background-color: rgb(161, 217, 171);
 align-items: center;
 text-align: center;
 
}


h2
{
    color: rgb(255, 255, 255);
    font-family: cursive;
}
img.totoro
{
    width: 20%;
    height: auto;
    object-fit: contain;
}
img.totoro2
{
    width: 20%;
    height: auto;
    object-fit: contain;

}
img.bouledesuie,img.mononoké,img.mononoké2,img.kiki,img.calcifer,img.chiiro,img.bouledesuie2
{
    width: 1%;
    height: auto;
    margin-right: 2%;
}
div.conteneurmere
{
display: flex;
justify-content: space-around ;
width: auto; 

}

div.animation
{
    clip-path: circle(25%);
    width: 400px;
    height: 400px;
    background: rgb(255, 255, 255);
    position: relative;
    display: grid;
    place-content: center;
}

div.animation::before,
div.animation::after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg,#a1c3fe, #96f6ff,
    #a7ffba, #81fcbf, #baf782, #81fcbf,
    #a7ffba, #96f6ff,#a1c3fe);
    width: 100%;
    height: 100%;
    background-size: 500%;
    z-index: -1;
    transform: scale(1.02);
    animation: animate 20s infinite;
}
div.animation::after {
    filter: blur(20px);
}

@keyframes animate {
  0% { 
      background-position: 0 0; 
	 }
  50% { 
      background-position: 300% 0; 
	 }
  100% { 
      background-position: 0 0; 
	 }
}
div.animation2
{
    clip-path: circle(25%);
    width: 400px;
    height: 400px;
    background: rgb(255, 255, 255);
    position: relative;
    display: grid;
    place-content: center;
}

div.animation2::before,
div.animation2::after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg,#fea1a1, #ff96c0,
    #ffa7e5, #fe92ee, #ff91ed, #eba8ff,#ff91ed,
    #fe92ee, #ffa7e5, #ff96c0,#fea1a1);
    width: 100%;
    height: 100%;
    background-size: 500%;
    z-index: -1;
    transform: scale(1.02);
    animation: animate 20s infinite;
}
div.animation2::after {
    filter: blur(20px);
}

@keyframes animate {
  0% { 
      background-position: 0 0; 
	 }
  50% { 
      background-position: 300% 0; 
	 }
  100% { 
      background-position: 0 0; 
	 }
}
div.animation3
{
    clip-path: circle(25%);
    width: 400px;
    height: 400px;
    background: rgb(255, 255, 255);
    position: relative;
    display: grid;
    place-content: center;
}

div.animation3::before,
div.animation3::after {
    content:'TEST';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg,#a1c3fe, #96f6ff,
    #a7ffba, #81fcbf, #baf782, #81fcbf,
    #a7ffba, #96f6ff,#a1c3fe);
    width: 100%;
    height: 100%;
    background-size: 500%;
    z-index: -1;
    transform: scale(1.02);
    animation: animate 20s infinite;
}
div.animation3::after {
    filter: blur(20px);

}

@keyframes animate {
  0% { 
      background-position: 0 0; 
	 }
  50% { 
      background-position: 300% 0; 
	 }
  100% { 
      background-position: 0 0; 
	 }
}

a{
    position: relative;
    color: #ffffff;
    font-size: x-large;
    font-weight: bold;
    font-family: cursive;
}
figcaption
{
    color: #fe92ee;
}

.music
{
    margin-bottom: 200%;
}