html {
  box-sizing: border-box;
}
*,
*:after,
*:before {
  box-sizing: inherit;
}
html,body 
{
  height: 100%;
}
body {
  font-family: "brownstdlight"; src: url("../fonts/brown.std.light.otf");
  margin: 0;
}

@font-face { font-family: "brownstdlight"; src: url("../fonts/brown.std.light.otf"); }
@font-face { font-family: "brownstdreg"; src: url("../fonts/brown.std.regular.otf"); }
@font-face { font-family: "brownstdbold"; src: url("../fonts/brown.std.bold.otf"); }

.people{
position:absolute;
display: inline;
z-index: 21;
font-size: 5em;
padding-top: 30px;
-webkit-animation:  infinite linear;
animation: infinite linear;
}

h1 {

}

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: rgba(0,0,0,0.5);
  font-size: 2rem;
  min-height: 100%;
  height: 100vh;
}

.Quick-navigation {
  position: fixed;
  z-index: 1;
  margin: 0;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.Quick-navigation-item {
  color: rgb(92, 149, 230);
  text-decoration: none;
  font-size: 3em;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
  padding: 0.5em;
  display: block;
}
.Quick-navigation-item:hover,
.Quick-navigation-item.current {
  color: lightblue;
}
/**/
#A {
background: linear-gradient(240deg, #2080ce, #328cf5,#fddbff, #177aee, #5999f2, #8da9ff, #fddbff,#a7bcfd, #b8d5fd, #c8dfff , #fddbff, #c8dfff, #e1ecfd, #ffffff);
background-size: 1000% 1000%;

-webkit-animation: bg 24s ease infinite;
animation: bg 24s ease infinite;}

@-webkit-keyframes bg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bg { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}

}

#E {
  background-color:white;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
  /*background-color:linear-gradient(270deg, #1d7ab9, #b7e3f7);
  background-size: 400% 400%;
  -webkit-animation: bg 6s ease infinite;
-moz-animation: bg 6s ease infinite;
animation: bg 6s ease infinite;*/
  margin-left: -20;
  margin-right: -20;
  padding:0;
}


/*waves*/
.wrap {
  -webkit-transform-origin: center;
          transform-origin: center;
  margin: 0;
  text-align: center;
  padding: 0;
  min-width: 40%;
  max-width: 100%;
  height: 100%;
  max-height: ;
  overflow: hidden;
  transform-origin: center;
}

.windsensor {
  display: inline-block;
  position: relative;
  z-index:10;
  width:55px;
  height:40px;
  margin: 3.5px;
  border-top-left-radius: 100%;
  border-bottom-right-radius: 100%;
  color: blue;
  box-shadow: 3px 3px 3px 0;
  -webkit-animation:  infinite linear;
  animation: infinite linear;
  animation-duration: ;
}


/*lessthan50*/
@-webkit-keyframes rotateless {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

/*80degree*/
@-webkit-keyframes rotate80 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  
  50% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*90degree*/
@-webkit-keyframes rotate90 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  
  50% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*100degree*/
@-webkit-keyframes rotate100 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  
  50% {
    -webkit-transform: rotate(100deg);
            transform: rotate(100deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*more than 100degree*/
@-webkit-keyframes rotatemore {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*boat animation*/
@-webkit-keyframes rotateboat {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}



/*css boat*/
#boat {
  display: block;
  background: #328cf5;
  width: 130px;
  height: 40px;
  position: absolute;
  top: 170px;
  right: -130px;
  transform: rotate(0deg);
  border-width: 3px 3px 9px 2px;
  border-color: white;
  border-style: solid;
  border-top-left-radius: 32%;
  border-bottom-left-radius: 69%;
  border-bottom-right-radius: 13%;
  box-shadow: rgba(0, 0, 0, 0.20) 9px 9px 0 9px inset;
  z-index: 3;
}
#boat:before {
  content: "";
  display: block;
  background: transparent;
  width: 130px;
  height: 42px;
  border-width: 2px 2px 6px 1px;
  border-color: transparent;
  border-style: solid;
  border-top-left-radius: 30%;
  border-bottom-left-radius: 66%;
  border-bottom-right-radius: 13%;
  box-shadow: rgba(0, 0, 0, 0.20) -9px -3px 1px 3px;
}