@tailwind base;
@tailwind components;
@tailwind utilities;

.home-color {
  background: #151616;
}
.content-bg-color {
  background: #171b1a;
}

/* #sidebarContainer {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0.5rem;
  background-color: #2423238d;
  z-index: 1000;
} */

.progress-bar-custom-widthMax {
  width: 705px;
}

.nav-item {
  padding: 0.5rem 1rem;
  color: #fff;
  text-decoration: none;
}

.nav-item.active {
  text-decoration: underline;
  color: yellow;
}

.hex {
  width: 70px;
  height: 382px;
  background: #000000;
}

.triangle {
  width: 0;
  height: 0;
  position: relative;
  top: -142px;
  left: 62px;
  border-left: 10px solid transparent; /* Adjust the width of the left border */
  border-right: 65px solid transparent; /* Adjust the width of the right border */
  border-top: 100px solid #171b1a; /* Adjust the height and color of the triangle */
  position: relative;
}

.verticle-text {
  writing-mode: vertical-lr;
}
.verticle {
  position: relative;
  top: -20px;
  left: -40px;
}
.nav-icon {
  transition: transform 0.3s ease-in-out;
}

.nav-icon:hover {
  transform: scale(1.2);
}

.home-stripes {
  background-image: linear-gradient(
    45deg,
    #0f0f0f 25%,
    #000000 25%,
    #000000 50%,
    #0f0f0f 50%,
    #0f0f0f 75%,
    #000000 75%,
    #000000 100%
  );
  background-size: 22.63px 22.63px;
}

@media (max-width: 784px) {
  .triangle,
  .hex,
  .verticle-text,
  .verticle {
    display: none;
  }
}

@media (max-width: 867px) {
  /* Medium devices */
  .progress-bar-custom-widthMax {
    width: 580px;
  }
}

@media (max-width: 639px) {
  /* Small devices */
  .progress-bar-custom-widthMax {
    width: 320px;
  }
}