.container {
 padding: 10px;
 margin: 0;
 min-height: calc(100vh - 80px);
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.main-container {
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 10px;
}

.main-container #hero-heading {
 font-size: 6rem;
 margin-bottom: 1rem;
}

.main-container .btn {
 background: rgb(137, 235, 137);
 color: white;
 text-decoration: none;
 box-shadow: 0 0.4rem 1.4rem rgb(137, 235, 137);
 width: 12rem;
 text-align: center;
}

@media screen and (max-width: 700px) {
 .main-container {
  background-size: cover;
  background-position: center;
 }


}