body {
  background-image: url(../img/backgroundcloud.png);

  @media (max-width: 700px) {
    background-image: url(../img2/backgroundCLOUD.jpg);
    background-position: center;
 
  }
  
}
hr {
  color: #acedff;
  background-color: #acedff;
  animation-name: hr; 
  animation-duration: 0.3s; 
  animation-timing-function:ease-in;
  }

    @keyframes hr {
    0% { width: 0; }
    100% { width: 20%; }
    }

body header {

  @media (max-width: 700px) {
    font-size: 2.5em;
  }

  & h1 {
    text-shadow: #acedff 5px 5px 3px;
    @media (max-width: 700px) {
      width: min-content;
    }

  }


  & a.discover button {
      color: #acedff;
      border: 4px solid #acedff;
      text-shadow: none;
      box-shadow: none;

        &:hover {
          background-color: #acedff;

            & span {
              background-image: url(../img/backgroundcloud.png);
            }
        }
    }

  }

  main {
    display: flex;
    flex-direction: column;
    align-items: center;

    & .accueilButton button {
      
      color: #acedff;
      border: 2px solid #acedff;

        &:hover {
          background-color: #acedff;

          

        }

    }
  }

  main section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  main h2 {
    @media (max-width: 700px) {
      font-size: 3rem;
  }
  }



  footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  

  }