@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';


.my-path {
  fill:none;
  stroke:#287551;
  stroke-width:2;
}


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }


.area {
    max-height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }


.tree {
    color: hsl(138, 23%, 39%);
    width: 80vw;
    max-width: 35rem;
    width: 100%;
    height: auto;
    display: block;
  }


.flower {
    color: hsl(0, 55%, 63%);
    width: 80vw;
    max-width: 35rem;
    width: 100%;
    height: auto;
    display: block;
  }


svg#bee {
    color: hsl(184, 9%, 34%);
    position: absolute;
    width: 50px;
    height: auto;
  }


.before_footer {
  position:relative;
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: #364f58; 
  text-align: center;
  color: rgb(0, 0, 0);
  box-sizing: border-box;
  padding: 1rem;
  height: 500px;
}


.before_footer_content {
  position: relative;
  z-index: 10
}


.wave-top {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
}


.letterize {
  color: #000000;
  font-weight: 100;
  font-size: 1.5vw;
  display: flex;
  align-items: end;
  justify-content: center;
  text-align: center;
  font-family: "Khula", sans-serif;
  height: 70px;
  box-sizing: border-box;
  margin: 0;
}


.wrapper {
  height: 15vh;
  display: flex;
  align-items: end;
  justify-content: center;
  background: #162c47;
  overflow: hidden;
}


.logo-svg {
  transform: scale(2);
  backface-visibility: hidden;
  @media screen and (min-width: 768px) {
    transform: scale(3);
  }
}