::before,
::after {
  z-index: 0;
  margin: 0;
  padding: 0px;
  height: 100%;
  box-sizing: border-box;
}

.flex-d-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body, html {
  margin: 0px;
  padding: 0;
  width: 100%;
}

.full-width {
  width: 100%;
  margin: 0;
}

.delius-unicase-regular {
  font-family: "Delius Unicase", serif;
  font-weight: 400;
  font-style: normal;
}

.delius-unicase-bold {
  font-family: "Delius Unicase", serif;
  font-weight: 700;
  font-style: normal;
}

h1 {
  font-family: "Delius Unicase" ;
  font-weight: 700;
  font-size: 55px;
  color: #9B72CF;
  text-align: center;
}

h2 {
  font-family: "Delius Unicase" ;
  font-weight: 400;
  font-size: 35px;
  color: #FF8C00;
  text-align: center;
}

.headline {
justify-content: center;
}

.container {
  width: 100%;
  height: 910px;
  background-image: url('pics/back.png'); 
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  justify-content: space-between;
  align-content: space-between;
  }

  .row {
    display: contents;
  }

  .col {
    box-sizing: border-box;
  }
/* line 1 */

  .cloud-1 {
    transition-property: translate();
    transition-duration: 18s;
    transition-delay: 0.2s;
    margin-top: 100px;
    transition-timing-function: linear;
  }    
  
  .cloud-1:hover {
    transform: translate(700px, 0);
  }

  .cloud-2 {
    transition-property: translate();
    transition-duration: 17s;
    transition-delay: 0.2s;
    transition-timing-function: linear;
  }    
  
  .cloud-2:hover {
    transform: translate(1000px, 0);
  }

  .plane {
    transition-property: translate();
    transition-duration: 9s;
    transition-delay: 0.2s;
    margin-left: 380px;
    transition-timing-function: ease-in;
  }    
  
  .plane:hover {
    transform: translate(-1400px, 0);
  }

    /* line 2 */

  .bike {
    transition-property: translate();
    transition-duration: 3s;
    transition-delay: 0.3s;
    margin-top: 20px;
    margin-left: 20px;
    transition-timing-function: linear;
  }    
  
  .bike:hover {
    transform: translate(1400px, 0);
  }

  .air-balloon {
    transition-property: translate();
    transition-duration: 16s;
    transition-delay: 0.2s;
    margin-top: 105px;
    transition-timing-function: ease-in-out;
  }    
  
  .air-balloon:hover {
    transform: translate( 0px, -500px);
  }

  .ball {
  transition-property: translate();
  transition-duration: 5s;
  transition-delay: 0.2s;
  margin-top: 150px;
  margin-left: 160px;
  transition-timing-function: ease-out;
  }    
    
  .ball:hover {
    transform: translate(-800px, 0);
  }