$base: #66CCFF;
$noon:#B85C00;
$night:#330000;
$button:#FFA347;
@mixin size($width, $height:$width){
  width:$width+px;
  height:$height+px;
}
@mixin center-div{
  position: absolute;
  right: 0;
  left: 0;
}
@mixin custom-circ($width, $height:$width){
  width:$width+px;
  height:$height+px;
  border-radius:50%;
}


html{
  background :$base;
}
body{
  width:100%;
  margin:0;
  overflow-x: hidden;
}

.btn{
  background:$button;
}
#main{
 @include center-div;
  z-index: 1111;
  margin: 100px auto;
  @include custom-circ(75);
  text-align: center;
  line-height:70px;
  color:white;
  font-size: 60px;
  font-weight:800;
  padding:0;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  &:hover{
    background:darken($button, 20%);
    
  }
  &.open{
    -webkit-transform: rotate(135deg);
  }
}

#menu{
  width: 500px;
  height: 0px;
  background: darken($base, 30%);
  @include center-div;
  z-index: 1111;
  margin: 185px auto;
  overflow: hidden;
  color:white;
  text-transform: uppercase;
  text-align: center;
  font-family: sans-serif;
  -webkit-transition: all 1s;
  & h1{
    margin-top: 0;
    margin-bottom: 0;
    padding: 20px 0;
    font-size: 45px;
    background: lighten($base, 10%);
    letter-spacing: 0.2em;
  }
  & h5{
    background: darken($base, 40%);
    height: 75px;
    margin: 0;
    font-size: 20px;
    letter-spacing: 0.5em;
    line-height: 75px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    &:hover{
      background:darken($base, 50%);
      letter-spacing: 0.6em;
    }
  }
  &.active{
    height: 390px;
  }
}


.cloud{
  position: absolute;
  z-index: 111;
  left: 100px;
  height: 100px;
  width: 300px;
  border-bottom: 5px solid white;
  overflow: hidden;
  &:after{
    position: absolute;
    content:'';
    top: 60px;
    @include custom-circ(100, 75);
    background:white;
  }
  &:before{
    position: absolute;
    content:'';
    top:20px;
    left: 60px;
    @include custom-circ(150, 100);
    background: white;
  }
  & #sA{
    position: absolute;
    @include custom-circ(120, 100);
    left: 182px;
    top: 65px;
    background: white;
  }
}

// Individual Clouds // 

#cA{
  top: 160px;
  -webkit-transform: scale(1.2);
  -webkit-animation: cloud 25s linear infinite alternate;
}


#cB{
  left: -200px;
  top: 80px;
  -webkit-transform: scale(0.7) scaleX(-1);
  -webkit-animation: cloud 20s linear infinite reverse;
}

#cC{
  top: 265px;
  -webkit-animation: cloud 27s linear infinite reverse;
}

#cD{
  top: 450px;
  -webkit-transform: scale(0.5);
  -webkit-animation: cloud 35s linear infinite alternate;
}

@-webkit-keyframes cloud{
from{
  left:-50vw;
}
  to{
    left:120vw;
  }
}

//footer//
#foot{
  z-index:11;
  width:100%;
  height: 150px;
  position: fixed;
  bottom: 0;
  background:darken($base, 60%);
}


//boat//

.boat-two{
  position: fixed;
  width:25px;
  height:20px;
  right: 0px;
  bottom: 145px;
  background:#666;
   -webkit-animation: sail 35s linear infinite;
  &:before, &:after{
    content:'';
    position: absolute;
    border-top: 20px solid #666;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
  }
  &:after{
    left: -20px;
  }
  &:before{
    left:5px;
  }
  & #flag{
    position: absolute;
    width: 3px;
    height: 30px;
    background: black;
    top: -30px;
    
    &:after{
      content:'';
      position: absolute;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 30px solid #eaeaea;
      left:3px;
      -webkit-animation: wave 1s linear infinite;
    }
  }
}
@-webkit-keyframes wave{
  0%, 100%{
    -webkit-transform:scaleX(1);
    left:3px;
  }
  50%{
    -webkit-transform: scaleX(-0.5);
    left:-19px;
  }
  
}

@-webkit-keyframes sail{
  from{
    right: -10vw;
  }
  to{
    right: 150vw;
  }
  
}