@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
/* --------------------- */

body {
  background-color: rgba(13, 110, 253);
  background-blend-mode: darken;
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a{
  color:rgb(131, 100, 243); 
}
a:hover{
  color:rgb(115, 79, 248); 
}
/* --------------------- */

/* NAVBAR */
.navbar {
  /* background: rgba(92, 0, 150, 0.75) !important; */
  background: rgba(92, 0, 150, 1) !important;
}

.offcanvas {
  background: rgba(92, 0, 150, 0.918) !important;
}

.navbar-toggler {
  background-color: transparent !important;
}
/* --------------------- */

/* HEADER */
header {
  min-height: 50vh;
  background-color: rgba(13, 110, 253);
  background-blend-mode: darken;
  background-image: url("../images/bg.jpg");
}

header h1 {
  font-size: 50px !important;
  padding: 10px;
  width: 100%;
  text-align: center;
  font-family: "DM Sans", serif;
  font-weight: 300;
}
/* --------------------- */

/* MAIN */
main #portfolio {
  background-color: rgba(0, 0, 0, 0.911) !important;
}

.portfolio .portfolio-filters li {
  font-weight: 300;
}
.portfolio .portfolio-filters li:hover {
  color: aqua;
}
.portfolio .portfolio-filters li.filter-active {
  /* color: rgb(141, 164, 236); */
  color: rgb(127, 247, 127);

  /* option2 */
  /* background-color: rgb(56, 101, 235); */
  /* padding:10px 5px; */
  /* color:white;  */
  /* border-radius: 10px;  */
}
/* --------------------- */

/* FOOTER */
footer {
  font-weight: 300;
  background-color: rgb(0, 0, 0);
}

#footer2 {
  background-color: rgb(111, 0, 255);
}

#footer2 a {
  color: white;
  transition: ease 600ms;
}
#footer2 a:hover {
  text-decoration: underline;
}

footer li {
  list-style: none;
}

footer a {
  color: rgba(13, 110, 253);
}
footer a:hover {
  color: rgb(5, 74, 177);
}

footer h3 {
  font-weight: 300;
  font-size: 20px;
}
#footer1 h3:first-child {
  padding: 10px 0;
}

/* ---icons--- */
.bi {
  color: white;
  font-size: 20px;
}
.bi:hover {
  color: orange;
}
.bi::before {
  margin: 10px;
}
/* --------------------- */

#scroll-top {
  background-color: rgb(0, 0, 0);
}
/* --------------------- */