#hero {
  width: 100%;
  height: 100vh;
  background: url("../assets/img/background.jpg") top right no-repeat;
  background-size: cover;
  position: relative;
}

#hero:before {
  content: "";
  background: rgba(54, 54, 73, 0.55);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero p span {
  color: #ffb86c;
}

.typed {
  background-color: #6272a4;
  padding: 0.2% 0.5%;
  border-radius: 30px;
}

a {
  color: #ffb86c;
  transition: all 0.4s ease-in-out;
}

a:hover {
  color: #f1fa8c;
}

body {
  background-color: #282a36;
  word-wrap: break-word;
}

.count-box:hover {
  box-shadow: 0 0 18px #09090ba2;
}

.rounded-own {
  border-radius: 50px;
}

.error-h6 {
  color: #ffb86c;
}

.error-p {
  /* green color of the Dracula scheme*/
  color: #50fa7b;
}

.svg {
  fill: #ffb86c;
  transition: all 0.4s ease-in-out;
}

.svg:hover {
  fill: #f1fa8c;
}