* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}
:root {
  --main-color: #0078ff;
  --first-color: #fff;
  --second-color: #1e1e1e;
  --bg-navbar: #040404;
  --transition-time: 0.5s;
  scroll-padding-top: 60px;
}
ul {
  list-style: none;
}

img {
  display: block;
}

.bg-img {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#206ec8d5),
      to(#206ec8d5)
    ),
    url(./../images/overlay-bg.jpg);
  background-image: -o-linear-gradient(#206ec8d5, #206ec8d5),
    url(./../images/overlay-bg.jpg);
  background-image: linear-gradient(#206ec8d5, #206ec8d5),
    url(./../images/overlay-bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
::-webkit-input-placeholder {
  text-transform: capitalize;
  font-size: 14px;
}
::-moz-placeholder {
  text-transform: capitalize;
  font-size: 14px;
}
:-ms-input-placeholder {
  text-transform: capitalize;
  font-size: 14px;
}
::-ms-input-placeholder {
  text-transform: capitalize;
  font-size: 14px;
}
::placeholder {
  text-transform: capitalize;
  font-size: 14px;
}
/* active nav */

/* body:not(body:has(:target)) .my-a[href="#home"]::after,
body:has(#home:target) .my-a[href="#home"]::after,
body:has(#about:target) .my-a[href="#about"]::after,
body:has(#services:target) .my-a[href="#services"]::after,
body:has(#work:target) .my-a[href="#work"]::after,
body:has(#blog:target) .my-a[href="#blog"]::after,
body:has(#contact:target) .my-a[href="#contact"]::after {
    width: 100%;
    ;
} */