body{
   /* commentaire */
    background: deepskyblue;
    min-height: 300vh;
}

.sujet {
position: relative;
top: 200px;
}

.gradient {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        rgba(20, 20, 20, 0) 10%,
        rgba(20, 20, 20, 0.25) 25%,
        rgba(20, 20, 20, 0.5) 50%,
        rgba(20, 20, 20, 0.75) 75%,
        rgba(20, 20, 20, 1) 100%
      );
    background-size: cover;
  }

/* The island continually moves and appears to be alive.
I added move animation to the island.

L'île continue de bouger et semble être en vie.
J'ai ajouté des éléments animés à l'île. */

@keyframes bouger {
    0% {left:0px;}
    100% {left:80vh;}
}

    .montagne {
        position: relative;
        animation: bouger 3s linear infinite alternate;

        width: 0px;
        height: 0px;
        border-bottom: 500px solid #ffffff;
        border-left: 480px solid transparent;
        border-right: 480px solid transparent;
      }

      .text_1{
        font: sans-serif;
        font-size: 15pt;
        color: white;
      }


      .poil_1 img{
        margin: 75px 118px 71px -175px;
     }

     .poil_2 img{
        margin: -95px 88px 71px -180px;
     }

     .poil_3 img{
        margin: -171px 27px 101px -246px;
     }

     .poil_4 img{
        margin: -244px 27px 209px -195px;
     }

     .poil_5 img{
        margin: -267px 0px 222px -81px;
     }

     .poil_6 img{
        margin: -312px 20px 250px -147px;
     }

     .poil_7 img{
        margin: -435px 2px 364px -146px;
     }

     .sain img{
        margin: -495px -94px 1px -359px;
     }

     .buisson_1 {
        background-color: antiquewhite;
        border-radius: 50%;

        width: 20px;
        padding-bottom: 20px;

        margin: -162px -94px -10px 120px;
     }

     .buisson_2 {
        background-color: greenyellow;
        border-radius: 50%;

        width: 20px;
        padding-bottom: 20px;

        margin: -45px -94px 1px 65px;
     }

     .buisson_3 {
        background-color: cornflowerblue;
        border-radius: 50%;

        width: 20px;
        padding-bottom: 20px;

        margin: 40px 40px 40px -3px;
     }

     .buisson_4 {
        background-color: coral;
        border-radius: 50%;

        width: 20px;
        padding-bottom: 20px;

        margin: -196px 34px 197px 65px;
     }

     .buisson_5 {
        background-color: fuchsia;
        border-radius: 50%;

        width: 20px;
        padding-bottom: 20px;

        margin: -202px 0px 215px 9px;
     }

     .puits {
        background-color: aquamarine;
        border: 5px dotted tan;
        border-radius: 50%;

        width: 200px;
        padding-bottom: 40px;

        margin: -191px 0px 52px 68px;
    }

    @keyframes blink-effect{
        50%{
            opacity: 0;
        }
     }

     .demi-cercle_1 {
        position: relative;
        animation-name: blink-effect;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: step-end;

        background-color: darksalmon;
        width: 50px;
        height: 60px;
        border-radius: 150px 150px 0px 0px;

        margin: -103px 136px 204px -341px;
     }

     .demi-cercle_2 {
        position: relative;
        animation-name: blink-effect;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: step-end;

        background-color: saddlebrown;
        width: 50px;
        height: 60px;
        border-radius: 150px 150px 0px 0px;

        margin: -281px 12px 42px -206px;
     }

     .demi-cercle_3 {
        position: relative;
        animation-name: blink-effect;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: step-end;

        background-color: cornsilk;
        width: 50px;
        height: 60px;
        border-radius: 150px 150px 0px 0px;

        margin: -178px 139px 0px -273px;
     }


     /* There is a well on the island.
     I represented the presence of water with pixel art.

     Il y a un puits sur l'île.
     J’ai représenté la présence de l'eau avec de l'art pixelisé.*/

     .pixel {
      background: transparent;
      margin: -23px 62px 56px 131px;
      height: 1px;
      width: 1px;
      border-radius: 50%;
      color: lightcyan;
      box-shadow:
      2px 1px, 6px 1px,
      1px 2px, 3px 2px, 5px 2px, 7px 2px,
      0 3px, 4px 3px, 8px 3px,
      4px 4px,
      4px 5px,
      4px 6px,
      4px 8px;
      transform: scale(10);
    }


    /* The area around the mountain is said to be empty.
    I thought it would be interesting if there were elements that created an island below the mountain.
    Since this mountain was made by humans,
    I thought it would be nice to add a human figure below the mountain.
    So, I added pixel art as an additional element.

    La zone autour de la montagne est dite être vide.
    J'ai pensé que ce serait intéressant s'il y avait des éléments créant une île en dessous de la montagne.
    Étant donné que cette montagne a été faite par des humains, j'ai pensé qu'il serait bien d'ajouter une figure humaine en dessous de la montagne.
    Donc, j'ai ajouté de l'art pixelisé en tant qu'élément supplémentaire. */

  .pixel_background{
         background: transparent;
         margin: 218px 0px 0px 165px;
         height: 1px;
         width: 1px;
         color: seashell;
         box-shadow:
         20px 3px, 21px 3px, 22px 3px,
         16px 4px, 17px 4px, 18px 4px, 19px 4px, 23px 4px, 24px 4px, 25px 4px, 26px 4px,
         14px 5px, 15px 5px, 28px 5px,
         12px 6px, 13px 6px, 29px 6px,
         11px 7px, 12px 7px, 30px 7px,
         10px 8px, 31px 8px,
         9px 9px, 32px 9px, 23px 9px,
         8px 10px, 24px 10px, 32px 10px, 34px 10px, 35px 10px,
         7px 11px, 24px 11px, 33px 11px, 36px 11px, 38px 11px,
         6px 12px, 23px 12px, 15px 12px, 37px 12px, 39px 12px,
         5px 13px, 15px 13px, 22px 13px, 39px 13px,
         4px 14px, 14px 14px, 21px 14px, 30px 14px, 40px 14px,
         3px 15px, 13px 15px, 20px 15px, 30px 15px, 40px 15px,
         2px 16px, 12px 16px, 19px 16px, 40px 16px,
         1px 17px, 12px 17px, 18px 17px, 41px 17px,
         2px 18px, 12px 18px, 18px 18px, 31px 18px, 40px 18px,
         2px 19px, 12px 19px, 18px 19px, 32px 19px, 39px 19px,
         1px 20px, 13px 20px, 19px 20px, 26px 20px, 27px 20px, 28px 20px, 29px 20px, 33px 20px, 37px 20px, 38px 20px,
         1px 21px, 14px 21px, 20px 21px, 24px 21px, 25px 21px, 30px 21px, 34px 21px, 35px 21px, 36px 21px,
         2px 22px, 15px 22px, 21px 22px, 23px 22px, 31px 22px,
         1px 23px, 12px 23px, 16px 23px, 22px 23px, 24px 23px, 25px 23px, 31px 23px,
         1px 24px, 11px 24px, 17px 24px, 19px 24px, 21px 24px, 23px 24px, 26px 24px, 32px 24px, 37px 24px,
         2px 25px, 12px 25px, 18px 25px, 19px 25px, 20px 25px, 27px 25px, 33px 25px, 38px 25px, 39px 25px,
         2px 26px, 13px 26px, 18px 26px, 21px 26px, 26px 26px, 29px 26px, 33px 26px, 40px 26px,
         1px 27px, 16px 27px, 17px 27px, 22px 27px, 27px 27px, 29px 27px, 34px 27px, 41px 27px,
         2px 28px, 15px 28px, 23px 28px, 26px 28px, 30px 28px, 34px 28px, 37px 28px, 42px 28px,
         24px 29px, 25px 29px, 30px 29px, 34px 29px, 38px 29px, 43px 29px,
         23px 30px, 24px 30px, 31px 30px, 35px 30px, 39px 30px, 40px 30px, 44px 30px,
         23px 31px, 32px 31px, 35px 31px, 41px 31px, 45px 31px,
         6px 32px, 22px 32px, 33px 32px, 36px 32px, 42px 32px, 46px 32px, 47px 32px, 49px 32px,
         7px 33px, 21px 33px, 22px 33px, 34px 33px, 37px 33px, 41px 33px, 44px 33px, 48px 33px, 50px 33px,
         8px 34px, 20px 34px, 35px 34px, 38px 34px, 42px 34px, 43px 34px, 45px 34px, 46px 34px, 47px 34px, 49px 34px,
         9px 35px, 19px 35px, 36px 35px, 39px 35px,
         10px 36px, 18px 36px, 35px 36px, 40px 36px, 41px 36px, 43px 36px,
         11px 37px, 12px 37px, 16px 37px, 17px 37px, 34px 37px, 37px 37px, 42px 37px, 44px 37px,
         13px 38px, 14px 38px, 15px 38px, 35px 38px, 36px 38px, 38px 38px, 39px 38px, 40px 38px, 41px 38px, 43px 38px;
         transform: scale(20);
      }

      .pixel_decoration{
         background: transparent;
         top: 1500px;
         border-radius: 80%;
         margin: 0px 0px 0px 0px;
         color: blanchedalmond ;
         height: 0.5px;
         width: 0.5px;
         box-shadow:
         3px 2px, 65px 2px, 70px 2px,
         5px 3px, 17px 3px, 59px 3px, 67px 3px,
         16px 4px, 13px 4px, 60px 4px,
         8px 5px, 63px 5px, 68px 5px,
         3px 7px, 68px 7px,
         2px 9px, 6px 9px, 69px 9px,
         3px 10px, 5px 10px,
         3px 12px, 70px 12px,
         2px 14px, 68px 14px,
         2px 16px, 69px 16px,
         1px 17px, 67px 17px,
         1px 18px, 68px 18px,
         3px 20px, 70px 20px,
         1px 22px, 69px 22px,
         2px 24px, 70px 24px,
         3px 26px, 68px 26px,
         2px 28px, 70px 28px,
         2px 30px, 68px 30px,
         1px 33px, 71px 33px,
         3px 35px, 70px 35px,
         2px 37px, 5px 37px, 68px 37px, 70px 37px;
         transform: scale(18);
      }

      .pixel_terre {
         background: transparent;
         border-radius: 50%;
         margin: 0px 0px 0px 0px;
         color: gold;
         height: 0.5px;
         width: 0.5px;
         box-shadow:
         5px 41px, 11px 41px, 20px 41px, 30px 41px, 40px 41px, 50px 41px, 63px 41px, 69px 41px,
         3px 42px, 7px 42px, 9px 42px, 16px 42px, 22px 42px, 24px 42px, 28px 42px, 33px 42px, 38px 42px, 48px 42px, 59px 42px, 66px 42px, 69px 42px, 71px 42px,
         1px 43px, 2px 43px, 5px 43px, 8px 43px, 11px 43px, 14px 43px, 15px 43px, 18px 43px, 20px 43px, 21px 43px, 29px 43px, 34px 43px, 39px 43px, 43px 43px, 44px 43px, 47px 43px, 48px 43px, 51px 43px, 52px 43px, 56px  43px, 62px 43px, 63px 43px, 67px 43px, 70px 43px;
         transform: scale(18);
      }



 #heart {
   position: absolute;
    font-size: 100px;
    animation: padam 2s infinite forwards;
    left: 500px;
    top: 1000px;
    z-index:99;
    margin-top:0;
    transform-origin: 65px 65px;
  }
  #heart p{margin-top: 0;}
 @keyframes padam {
    0% {color:#691114; transform: scale(1);}
    50% {color:#fc030b; transform: scale(1.3);}
    100% {color:#691114; transform: scale(1);}
  }

.text_1{
  font-size: 13pt;
  font-family: "oxygen";
  margin: 30px;
  top: 400px;
}

h3:hover{
  width: 150%
}