body{
  background-color: #007bff52;
}
.btn{
  color: black;
  margin-bottom: .4rem;
}
.jumbotron{
  background-color:#8e8dd0; 
  margin-top: 6rem;
}
.card{
  margin-bottom: 4rem;
}
.card-header{
  font-size: 1.5em;
  font-weight: bold;
  background-color: #a6aeb58a;
}
.card-text{
    margin-top: 1em;
}
ul li{
  text-align:left;
  margin-bottom: 30px;
}
.custom-img{
  height: 3em;
}
.custom-img2{
  height: 2em;
  padding: .3em .3em .3em .3em;
  border-radius: .3em;
}
.custom-img2:hover{
  background-color: #ffc1077a;
}
.custom-img3{
    height: 2rem;
    padding: .1rem;
    border-radius: .4rem;
}
.fade1{
  opacity: 0.1;
}
body div h4{
  margin-bottom: 3rem;
}
.modal-header{
  background-color: #3fff007a;
}
.nav-link{
  color: black;
}
.nav-link:hover{
  background-color: #ffc1077a;
  border-radius: .3em;
}
#unmerged{
  background-color: #ffe000b3;
  cursor: pointer;
}
#unmerged:hover{
  background-color: green;
}
#top-nav-id{
  background-color: #3aa953;
  border-bottom: .4em solid #008068;
}
#bot-nav-id{
  background-color: #3aa953;
  border-top: .4em solid #008068;
}
.front{
  position: relative;
  text-align: center;
  font: 2.5em sans-serif;
}
#name1{
  position: relative;
  text-align: center;
  font-weight: bold;
}
#name2{
  right: 12em;
}
#name3{
  opacity: 0.01
}
.home-btn{
  margin: 1em 2em 1em 2em;
  padding: 0.5em 2em 0.5em 2em;
  opacity: 0.01;
}

form {
  text-align: left;
  box-shadow: 0 2px 3px #ccc;
  border: 1px solid black;
  padding: 2%;
  margin-bottom: 5%;
  border-radius: 15px;
}

.h4-warn{
  padding: 0 .5em;
  border: solid red .2em;
  border-radius: .7em;
}

#home-cnt{
  margin-top: 6em;
}

/*  when the screen width is greater than 400px, apply these properties  */
@media ( min-width: 400px) {
  #home-cnt{
    margin-top: 10em;
  }
}