body {
font-family: sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #000;
color: #fff;
padding: 20px;
text-align: center;
}

h1 {
font-size: 2em;
}

img {
width: 100px;
border-radius: 50%;


}

img {
    transform: scale(1);
    transition: transform 0.3s ease-in;
  }
  
  img:hover {
    transform: scale(1.3);
    transition: transform 0.5s ease-in;
  }

main {
max-width: 960px;
margin: 0 auto;
}

section {
padding: 5px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
margin-bottom: 10px;
}

footer {
background-color: #ccc;
padding: 20px;
text-align: center;
}

@media (max-width: 768px) {
main {
max-width: 100%;
}
}

.insta{
    font-size: 25px;

}

h1{
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

 @-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  
.aide{
    position: absolute; /* postulat de départ */
    left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */

}








  /*!
 *
 * bttn.css - https://ganapativs.github.io/bttn.css
 * Version - 0.2.4
 * Demo: https://bttn.surge.sh
 *
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Ganapati V S (@ganapativs)
 *
 */
/* standalone - .bttn-jelly */
.bttn-default {
    color: #fff;
  }
  .bttn-primary,
  .bttn,
  .bttn-lg,
  .bttn-md,
  .bttn-sm,
  .bttn-xs {
    color: #1d89ff;
  }
  .bttn-warning {
    color: #feab3a;
  }
  .bttn-danger {
    color: #ff5964;
  }
  .bttn-success {
    color: #28b78d;
  }
  .bttn-royal {
    color: #bd2df5;
  }
  .bttn,
  .bttn-lg,
  .bttn-md,
  .bttn-sm,
  .bttn-xs {
    margin: 0;
    padding: 0;
    border-width: 0;
    border-color: transparent;
    background: transparent;
    font-weight: 400;
    cursor: pointer;
    position: relative;
  }
  .bttn-lg {
    padding: 8px 15px;
    font-size: 24px;
    font-family: inherit;
  }
  .bttn-md {
    font-size: 20px;
    font-family: inherit;
    padding: 5px 12px;
  }
  .bttn-sm {
    padding: 4px 10px;
    font-size: 16px;
    font-family: inherit;
  }
  .bttn-xs {
    padding: 3px 8px;
    font-size: 12px;
    font-family: inherit;
  }
  .bttn-jelly {
    margin: 0;
    padding: 0;
    border-width: 0;
    border-color: transparent;
    background: transparent;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    font-size: 20px;
    font-family: inherit;
    padding: 5px 12px;
    overflow: hidden;
    border-radius: 50px;
    background: #fff;
    color: #1d89ff;
    -webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
  }
  .bttn-jelly:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: currentColor;
    content: '';
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  .bttn-jelly:hover,
  .bttn-jelly:focus {
    box-shadow: 0 1px 8px rgba(58,51,53,0.4);
    -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .bttn-jelly:hover:before,
  .bttn-jelly:focus:before {
    opacity: 0.15;
    -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .bttn-jelly.bttn-xs {
    padding: 3px 8px;
    font-size: 12px;
    font-family: inherit;
  }
  .bttn-jelly.bttn-xs:hover,
  .bttn-jelly.bttn-xs:focus {
    box-shadow: 0 1px 4px rgba(58,51,53,0.4);
  }
  .bttn-jelly.bttn-sm {
    padding: 4px 10px;
    font-size: 16px;
    font-family: inherit;
  }
  .bttn-jelly.bttn-sm:hover,
  .bttn-jelly.bttn-sm:focus {
    box-shadow: 0 1px 6px rgba(58,51,53,0.4);
  }
  .bttn-jelly.bttn-md {
    font-size: 20px;
    font-family: inherit;
    padding: 5px 12px;
  }
  .bttn-jelly.bttn-md:hover,
  .bttn-jelly.bttn-md:focus {
    box-shadow: 0 1px 8px rgba(58,51,53,0.4);
  }
  .bttn-jelly.bttn-lg {
    padding: 8px 15px;
    font-size: 24px;
    font-family: inherit;
  }
  .bttn-jelly.bttn-lg:hover,
  .bttn-jelly.bttn-lg:focus {
    box-shadow: 0 1px 10px rgba(58,51,53,0.4);
  }
  .bttn-jelly.bttn-default {
    background: #fff;
    color: #1d89ff;
  }
  .bttn-jelly.bttn-primary {
    background: #1d89ff;
    color: #fff;
  }
  .bttn-jelly.bttn-warning {
    background: #feab3a;
    color: #fff;
  }
  .bttn-jelly.bttn-danger {
    background: #ff5964;
    color: #fff;
  }
  .bttn-jelly.bttn-success {
    background: #28b78d;
    color: #fff;
  }
  .bttn-jelly.bttn-royal {
    background: #bd2df5;
    color: #fff;
  }