@font-face {
    font-family: 'Helvetica Neue';
    font-family: 'Helvetica Neue', sans-serif;
    font-family: 'Helvetica 25 UltraLight', sans-serif;
    font-family: 'Helvetica 35 Thin', sans-serif;
    font-family: 'Helvetica 45 Light', sans-serif;
    font-family: 'Helvetica 55 Roman', sans-serif;
    font-family: 'Helvetica 65 Medium', sans-serif;
    font-family: 'Work Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
}



body {
height: 1300px;
background: rgb(214,238,246);
background: linear-gradient(180deg, rgba(214,238,246,1) 0%, rgba(255,249,244,1) 26%, rgba(255,221,221,1) 44%, rgba(255,249,244,1) 62%, rgba(214,238,246,1) 100%);
}

img {
  max-width: inherit;
  max-height: inherit;
  height: inherit;
  width: inherit;
  object-fit: cover;
}

p {
  font-size: 2vw;
  font-family: 'Work Sans';
  line-height: 0;
}
 
h1 {
  font-size: 6.5vw;
  font-family: 'Work Sans';
  font-weight: 300;
  line-height: 0;
 /* margin-top: -13px;*/
}

h2 {
  font-size: 4vw;
  font-family: 'Work Sans';
  font-weight: 400;
  line-height: 0.8;
 
}

h3 {
  font-size: 1.1vw;
  font-family: 'Work Sans';
  font-weight: 400;
  line-height: 0;
 
}

.navigation {
    position: absolute;
    top: 0%;
    left: 1%;
   
    z-index: 10;
   

}


.quote {
  position: absolute;
  top: 0%;
  left:25%;
  margin: -5;
  padding: -5;
}

.title { 
  position: absolute;
  right: 1%;
  top: 0%;
  width: 40%;
/*margin: -5px;*/
text-align: right;
/*position: fixed;
  z-index：5;*/
  /*overflow: hidden;
  display: flex;*/
}



.building1 { 
  position: absolute;
  left: 39%;
  top: 21%;
  width: 23%;
padding-top: 60px;
  z-index: 0
  /*overflow: hidden;
  display: flex;*/
}

.building2 { 
  position: absolute;
  left: 50%;
  top: 21%;
  width: 23%;
padding-top: 60px;
  z-index: 0
  /*overflow: hidden;
  display: flex;*/
}

.trees { 
  position: absolute;
  left: 0%;
  top: 29%;
 /*padding-top: 100px;*/
  padding-top: 1%;
  width: 88%;
  overflow: hidden;
  display: flex;
  z-index: 2
}

.stairs { 
  position: absolute;
  left: 0%;
  top: 29%;
  width: 90%;
  padding-top: 26%;
  z-index: 2;
  /*overflow: hidden;
  display: flex;*/
}


.sailboat { 
  position: absolute;
  left: 33%;
  top: 90%;
  width: 30%;
  padding-top: 60px;
  z-index: 3;
  transition: all 3s ease;
  
}

.sailboat:hover {
animation: sail 3s linear infinite alternate;
cursor: pointer;
}

@keyframes sail {
  0% {
    transform: rotate(0deg) translate(0px) rotate(0);
  }

  50% {
    transform: rotate(20deg) translate(90px) rotate(-20deg);
  }


  100% {
    transform: rotate(80deg) translate(-50px) rotate(-80deg);
  }
}

 /*animation: animate 2s linear infinite alternate;
}*/



/*.sailboat:hover {
  animation: boat;
  cursor: pointer;
}*/

@keyframes boat {
  0% {
    transform: rotate(90deg) translate(150px) rotate(-90deg);
  }

  100% {
    transform: rotate(0deg) translate(150px) rotate(0);
  }
}

.swan { 
  position: absolute;
  left: 51%;
  top: 145%;
  width: 40%;
  padding-top: 60px;
  z-index: 3;
}

.swan {
  animation: yAxis 2.5s infinite ease-in;
}

.swan::after {
  animation: yAxis 2.5s infinite ease-out;
}

@keyframes xAxis {
  50% {
    animation-timing-function: ease-in;
    transform: translateX(20px);
  }
}

@keyframes yAxis {
  50% {
    animation-timing-function: ease-out;
    transform: translateY(-20px);
  }
}



.water { 
  position: absolute;
  left: 31%;
  top: 145%;
  width: 55%;
  padding-top: 60px;
  z-index: 1;
}

#ripple {
  transition: all 0.5s ease-in-out;

}

#ripple .cls-1 { 
 /*fill: lightblue;*/
background: rgb(214,238,246);
background: radial-gradient(circle farthest-corner at center center, #FFFFFF 0%, #7DD0FA 100%);
}

#ripple:hover {
  -webkit-transform: scale(1.2);
/*  transform: scale(1.2);*/
  /*animation: waterRipple;*/
  cursor: pointer;
}

/* @keyframes waterRipple {
  0% { transform: scale(1);
}

  50% { transform: scale(1.5);
}

  100% { transform: scale(1);
  }
}
*/