style.css

body {
  background-image: url(background.jpg);
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: space-between;

}

.navbar {
  display: block;
}

.ranime {
  width: auto;
  height: auto;
}

.howTo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0,0,0,0.5);
  color: white;
  margin: 2% 15%;
  margin-top: 3%;
  text-shadow: .1em .1em .1em black, -.1em -.1em .1em black;
  padding-left: 3em;
  padding-right: 3em;
}

.howTo h2 {
  font-weight: bolder;
  text-align: center;

}

.list {
display: flex;
justify-content: center;
color: white;
text-shadow: .1em .1em .1em black, -.1em -.1em .1em black;
}

.search-buttons {
  display: flex;
  justify-content: space-around;
  padding-top: 3em;
}

.form-group {
  margin: 1vh;
  opacity: .85;
}

.searchButton {
  color: #B50729;
  font-weight: bolder;
}

.search {
  margin-right: .3em;
  width: 20em;
  height: 2.5em;
}

.custom-select {
  margin-right: .3em;
}

.hide {
  display: none;
}


.info {
  height: 100%;
}

.box {
  padding-top: 2em;

}

.card-block {
  margin: 10px;
  padding: 10px;
  background-color: #007f5b;
  border-radius: 10px;
}

img.card-img-top {
  max-width: auto !important;
  height: 20em !important;
}

.card-text {
  color: #83FFD9;
}

.button {
    background-color: #B50729;
    border-radius: 10px;
    border: 0px;
    color: #7AF6D1;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .ranbtn {
    background-color: #B50729;
    color: #83FFD9;
    border: 0px;
  }

  .footer {
    bottom: 0px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #007f5b;
    color: #83FFD9;
  }