* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  scrollbar-width: thin;
  color-scheme: dark;
}

@font-face {
  font-family: "Inter";
  src: url(../../assets/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf);
}
body {
  background: rgb(20, 20, 20);
  color: white;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  font-weight: 500;
  height: 100vh;
}

.effect {
  border-radius: 50%;
  background: rgba(100, 100, 100, 0.7);
  opacity: 0.3 !important;
  transition: 0.2s;
  position: absolute;
  width: 70px;
  height: 70px;
  transform: scale(0.3);
  z-index: -1;
}

.active {
  opacity: 1;
  transform: scale(1);
}

.inactive {
  opacity: 0;
}

#container {
  height: 100%;
}
#container .wrapper {
  height: 100%;
}
#container header {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 10px;
}
#container header .headerContainer {
  padding: 10px 20px;
}
#container a {
  color: inherit;
  text-decoration: none;
}
#container button {
  background: rgb(60, 60, 60);
  font-family: inherit;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
}
#container main {
  height: 100%;
}
#container .app {
  height: 100%;
}
@keyframes RGB {
  0% {
    background: rgba(0, 18, 25, 0.7);
  }
  10% {
    background: rgba(0, 95, 115, 0.7);
  }
  20% {
    background: rgba(10, 147, 150, 0.7);
  }
  30% {
    background: rgba(148, 210, 189, 0.7);
  }
  40% {
    background: rgba(233, 216, 166, 0.7);
  }
  50% {
    background: rgba(238, 155, 0, 0.7);
  }
  60% {
    background: rgba(202, 103, 2, 0.7);
  }
  70% {
    background: rgba(187, 62, 3, 0.7);
  }
  80% {
    background: rgba(174, 32, 18, 0.7);
  }
  90% {
    background: rgba(155, 34, 38, 0.7);
  }
  100% {
    background: rgba(0, 18, 25, 0.7);
  }
}
#container .app .follower {
  filter: blur(170px);
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: -1;
  animation: RGB 10s linear infinite;
}
#container .app .projects {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 5px;
}
#container .app .projects .projectsItemContainer {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.03);
  z-index: 0;
  height: 140px;
  transition: 0.3;
}
#container .app .projects .projectsItemContainer .projectsItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#container .app .projects .projectsItemContainer .projectsItemCompany {
  color: rgb(199, 76, 81);
  color: rgb(10, 150, 170);
  color: rgb(150, 85, 255);
}
#container .app .projects .projectsItemContainer .projectsItemDevices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: rgb(170, 170, 170);
}
#container .app .projects .projectsItemContainer .projectsItemDevices small {
  text-transform: capitalize;
}
#container .app .projects .projectsItemContainer .game {
  color: rosybrown;
}
#container .app .projects .projectsItemContainer .pc small {
  text-transform: uppercase !important;
}
#container .app .projects .projectsItemContainer button {
  background: transparent;
  font-weight: 600;
  border-radius: 77px;
  background: rgba(255, 255, 255, 0.11);
  color: rgb(247, 247, 247);
  padding: 8px 13px;
}
#container .app .projects .projectsItemContainer button:hover {
  background: white;
  color: black;
}/*# sourceMappingURL=style.css.map */