html{
background: -moz-linear-gradient(#f4ac71bf,#f7ac6fbc, #f4a361d2);
    opacity: 2em;
    background-attachment: fixed;
    scroll-behavior: smooth;
}

 body {
    font-size:20px;
    margin-left: 4em;
    margin-right: 4em;
    margin-bottom: 5em;
    margin-top: 2em; 
}

.textimage{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap : 5px;
    /*height : 100%;*/
    text-align: center;
    }

.grilleauto {   
    border-radius: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap : 60px;
    text-align: center;
    scroll-margin-top: 25px;
    padding: 10px;
    margin: 10px;
}
.galerie {
    display: flex;
    gap : 60px;
}
h1{
    text-shadow: 3px 3px 10px, rgba(0,0,0,0.5);
    color:cornsilk;
    font-size: 6.0rem;
    font-family: "manihot", sans-serif;
    text-align: center;
    margin: 0em;
    text-decoration: none;
}

h2{ 
    text-indent: 1em;
    color :#db723e;
    /* font-family: "slack-casual", sans-serif; */
    font-family: "manihot", sans-serif;
    text-align: left;
    font-size: 2rem;
    margin: 2em;
    letter-spacing: 0.1rem;
}

h4{
    text-shadow: 3px 3px 10px, rgba(0,0,0,0.5);
    color:darkolivegreen;
    font-size: 7.0rem;
    font-family: "manihot-dingbats", sans-serif;
    text-align: center;
    margin: 0em;
    margin-bottom: 2rem ;
}

p {
    margin: 0px;
    padding: 0px;
    font-family: "manihot", sans-serif;
    text-decoration: none;
}

p a {
    display: flex;
    flex-direction: column;
    color: currentColor;
    text-decoration: none;
    }

/* mettre transform: scale(1.1) pour faire zoomer les images et pas dézoomer
p:hover img {
  transform: scale(1.1);
}*/

img {
    border-radius: 15px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex: 1;
    /*filter: grayscale(1);
    mix-blend-mode: multiply;*/
    transition: all .5s;
}

.droite{
    transform: rotate(15deg);
}
.milieu_gauche{
    transform: rotate(-5deg);
}

.milieu_droite{
    transform: rotate(5deg);
}

.gauche{
    transform: rotate(-15deg);
}

/*margin = marge ; padding = marge intérieure*/

.choix {
    display: flex;
    max-width: 800px;
    gap: 170px;
    margin: auto;
    align-items: start;
}
.choix p {
    padding: 1em;
}
.choix img {
    margin:-1em -1em .5em -1em;
    width: calc(100% + 2em);
}

  .float-zoom
  {opacity: 0;
  transform: scale(0.8) translateY(0);
  animation: floatZoomIn 7s ease-in-out infinite;
}

@keyframes floatZoomIn
  {0% {opacity: 0;
  transform: scale(0.8) translateY(0);}
  50% { opacity: 1;
  transform: scale(1.1) translateY(-15px);}
  70% {transform: scale(1) translateY(-7px);}
  100% {opacity: 1;
  transform: scale(1) translateY(0);}}