body {
  background-color: #ffffff;
  color: #000000;
}

.jumbotron {
  color: #ffffff;
  margin-bottom: 0;
  background: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%);
  background-attachment: fixed, scroll;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  /* background-size: 400% 400%; */
  /* position: relative; */
  animation: gradient 10s ease infinite;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#pip h1 {
  bottom: 17vw;
  right: 2vw;
  text-shadow: #333333 1px 1px 1px, #333333 0px 0px 4px;
  padding: 0px 20px;
  margin-left: 5px;
  font-size: 5vw;
  color: #ffffff;
}

#pip p {
  bottom: 13vw;
  right: 9vw;
  text-shadow: #333333 1px 1px 1px, #333333 0px 0px 4px;
  padding: 0px 20px;
  font-size: 2vw;
  color: #ffffff;
}

#profileImg {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

nav {
  background: linear-gradient(to left, #326496 20%, #647dc8);
  text-shadow: #333333 1px 1px 1px, #333333 0px 0px 4px;
  /* padding: 8px 20px; */
  margin: auto;
  color: #ffffff;
}

.dropdown-menu,
.dropdown-item {
  background: linear-gradient(to left, #326496 20%, #647dc8);
  text-shadow: #333333 1px 1px 1px, #333333 0px 0px 4px;
  color: #ffffff;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu:focus {
  background: linear-gradient(to left, #194b7d 50%, #647dc8);
  text-shadow: #333333 1px 1px 1px, #333333 0px 0px 4px;
  color: #ffffff;
}

.dropdown-menu .dropdown-item.disabled {
  background: linear-gradient(to left, #326496 20%, #647dc8);
  color: #c1c1c1;
}

.card-subtitle {
  color: #808080;
}

#skillList ul > li:hover {
  background: #f0f0f0;
}
#skillList ul > li {
  padding: 4px 0px;
  min-height: 25px;
}

#skillList ul > li .skill-rating {
  float: right;
}
#skillList ul > li .skill-rating .bi {
  color: lightgrey;
  font-size: 14px;
  margin: auto 1px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

#skillList ul > li .skill-rating .bi {
  color: #647dc8;
}
#skillList ul > li:hover .skill-name {
  font-weight: bold;
}
#skillList ul > li:hover .skill-rating .bi {
  margin: auto 3px;
  color: #326496;
}

input:focus,
textarea:focus {
  background-color: #f5f58c;
}

#socialicons td {
  padding: 10px;
}

.dark-mode {
  background-color: #000000;
  color: #ffffff;
}

.dark-mode .jumbotron {
  background: linear-gradient(
    to bottom,
    #071b26 0%,
    #071b26 30%,
    #8a3b12 80%,
    #240e03 100%
  );
  background-attachment: fixed, scroll;
  background-repeat: no-repeat;
  background-position: center;
  /* background: linear-gradient(to bottom, #010A10 30%,#59230B 80%,#2F1107 100%); */
}

.dark-mode nav {
  background: linear-gradient(to left, #071b26 20%, #8a3b12);
  text-shadow: #333333 1px 1px 1px, #333333 0px 0px 4px;
  /* padding: 8px 20px; */
  margin: auto;
  color: #ffffff;
}

.dark-mode .dropdown-menu,
.dark-mode .dropdown-item {
  background: linear-gradient(to left, #071b26 20%, #8a3b12);
  color: #ffffff;
}

.dark-mode .dropdown-menu .dropdown-item:active,
.dark-mode .dropdown-menu .dropdown-item:hover,
.dark-mode .dropdown-menu:focus {
  background: linear-gradient(to left, #240e03 50%, #8a3b12);
  color: #ffffff;
}

.dark-mode .dropdown-menu .dropdown-item.disabled {
  background: linear-gradient(to left, #071b26 20%, #8a3b12);
  color: #c1c1c1;
}

.dark-mode .card,
.dark-mode .card *,
.dark-mode .card a,
.dark-mode .card-subtitle {
  background-color: #2b2b2b;
  border-color: #2b2b2b;
  color: #ffffff;
}

.dark-mode #skillList,
.dark-mode #skillList * {
  background-color: #2b2b2b;
  border-color: #2b2b2b;
  color: #ffffff;
}

.dark-mode #skillList ul > li .skill-rating {
  float: right;
}
.dark-mode #skillList ul > li .skill-rating .bi {
  color: darkgrey;
  font-size: 14px;
  margin: auto 1px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.dark-mode #skillList ul > li:hover,
.dark-mode #skillList ul > li:hover * {
  background: #535353;
}
.dark-mode #skillList ul > li {
  padding: 4px 0px;
  min-height: 25px;
}

/* .dark-mode #skillList ul > li .skill-rating .bi { color:#F0F0F0 } */
.dark-mode #skillList ul > li:hover .skill-name {
  font-weight: bold;
}
.dark-mode #skillList ul > li:hover .skill-rating .bi {
  margin: auto 3px;
  color: #ffffff;
}

.dark-mode #socialicons {
  background: #535353;
}

.dark-mode #connectModal .modal-content {
  background-color: #2b2b2b;
  border-color: #2b2b2b;
  color: #ffffff;
}

.dark-mode #contactFormOnly div[id^="block"] input,
.dark-mode #contactFormOnly div[id^="block"] textarea {
  background-color: #535353;
  color: #ffffff;
}

.dark-mode ::placeholder {
  color: #ffffff;
}

/* @media (min-width: 768px) 
{
    #pip h1 {
      font-size: 3.5rem;
    }
} */