/* Index/homepage styling */

.navbar-nav li {
  background-color:rgba(0, 0, 102,0.8);
  box-shadow: 2px 2px 5px 2px rgb(180, 186, 203);
}

.navbar-nav li:hover {
  background-color:rgba(51,0,0,0.8) !important;
  box-shadow: 0 4px 8px 0 #e0d1d1, 0 6px 20px 0 rgba(210, 189, 189,0.19);
}

.navbar-nav li a,
.navbar-text {
  color: white;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
     1px  1px 0 black,
     1px  1px 0 black;
}
.navbar-nav li a:hover,
.navbar-text:hover {
  color: white;
  text-shadow:
     -1px -1px 0 black,
      1px -1px 0 black,
     -1px  1px 0 black,
      1px  1px 0 black;
}

.btn,
.color-picker-wrapper,
#reset-bg-btn,
#logout-button {
  background-color: rgba(0, 0, 102,0.8);
  color: white;
  text-shadow:
     -1px -1px 0 black,
      1px -1px 0 black,
     -1px  1px 0 black,
      1px  1px 0 black;
  box-shadow: 2px 2px 5px 2px rgb(180, 186, 203);
}

.btn:hover,
.color-picker-wrapper:hover,
#logout-button:hover,
#reset-bg-btn:hover {
  background-color: rgba(51,0,0,0.8);
  box-shadow: 0 4px 8px 0 #e0d1d1, 0 6px 20px 0 rgba(210, 189, 189,0.19);
}

.container-center {
  background-color: rgba(0,0,51,0.8);
  border: 2px solid black;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin: auto;
  transition: background-color .2s ease, transform 0.2s ease;
  box-shadow: 2px 2px 5px 2px rgb(180, 186, 203);
}

.container-center:hover {
  transform: scale(1.15);
  background-color:rgba(51,0,0,0.8) !important;
  border:2px solid white !important;
}


.custom-file-upload:hover {
  background-color:rgba(51,0,0,0.8) !important;
  box-shadow: 0 4px 8px 0 #e0d1d1, 0 6px 20px 0 rgba(210, 189, 189,0.19);
}


@media screen and (max-width: 600px) {
  .container {
    flex: 100%;
    max-width: 100%;
  }
}