*{
  padding: 0;
  margin: 0;
  font-family: verdana, sans-serif;
}
.container{
  position: relative;
  height: 100vh;
  width: 100%;
  background: #669966;
  overflow: hidden;
}
.half-circle{
  background: #3F3F3F;
  position: absolute;
  border-radius: 50%;
  
  -webkit-transition: all ease-in-out .2s;
  -moz-transition: all ease-in-out .2s;
  -o-transition: all ease-in-out .2s;
  transition: all ease-in-out .2s;
}
.top{
  height: 150px;
  top: -150px;
  left: -11%;
  width: 122%;
}
.right{
  height: 102%;
  width: 150px;
  right: -150px;
  top: -1%;
}
.bottom{
  height: 150px;
  bottom: -150px;
  left: -11%;
  width: 122%;
}
.left{
  height: 102%;
  width: 150px;
  left: -150px;
  top: -1%;
}
.container.stretch{
  .top{
    top: -120px;
  }
  .right{
    right: -90px;
  }
  .bottom{
    bottom: -120px;
  }
  .left{
    left: -90px;
  }
}
.button{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(132, 183, 132, 0.9);
  color: #efefef;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
}