@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --cor-primaria: slateblue;
  --cor-secundaria: #252525;
  --font-titulo: "Bebas Neue", serif;
  --font-site: "Poppins", serif;
  --bs-border-color: white !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5em !important;
  overflow-x: hidden !important;
}

body {
  font-family: var(--font-site);
}

#particles-js {
  position: absolute;
  height: 100vh !important;
  width: 100vw !important;
  z-index: -1;
}

#navBarVertical {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 100vh;
  transform: rotate(180deg);
}

.bebas {
  font-family: var(--font-titulo);
  line-height: 1 !important;
}

.display-1 {
  font-size: 12rem;
}

.display-2 {
  font-size: 9rem;
}

.smooth {
  transition-duration: 0.4s;
}
.smooth:hover {
  transform: scale(1.02) !important;
}

.bg-dark {
  background-color: var(--cor-secundaria) !important;
}

.bg-footer{
  background: url("../img/bg-footer.png");
  background-repeat: no-repeat; 
  width: 100vw;
}
.justificar{
  text-align: justify !important;
}
.link{
  text-decoration: none;
}
.text-primary,
.slateblue,
.link:hover,
.nav-link:hover {
  color: var(--cor-primaria) !important;
}
.bg-primary, .btn-primary {
  background-color: var(--cor-primaria) !important;
  border: none; 
} 
#astronauta {
  transform: translate(40%, 0);
  pointer-events: none;
}

#filterProjects .nav-link, .link {
  color: white !important;
}

#filterProjects .nav-link.active {
  color: slateblue !important;
}

/* BRANDS */
#linkedin:hover {
  color: #004182 !important;
}
#instagram:hover {
  color: #c13584 !important;
}
#github:hover {
  color: #4078c0 !important;
}
#behance:hover {
  color: #1769ff !important;
}
#dribbble:hover {
  color: #ea4c89 !important;
}
#codepen:hover {
  color: #0ebeff !important;
}
#flickr:hover {
  color: #0063dc !important;
}
#sketchfab:hover {
  color: #1caad9 !important;
}
#whatsapp:hover {
  color: #25d366 !important;
}

/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--cor-primaria);
}