.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


body {
  background-color: #240404;
  background-image: url(img/reddamask.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  color: #d6c8b4;
  font-family: "Silkscreen", sans-serif;
  overflow:hidden;
  margin:0;
  height:100vh;
}


.button-item a {
  display:inline-block;
  background-color:transparent;
  color: #d6c8b4;
  text-decoration: none;
  cursor:pointer;
  transition:transform 0.3s ease, background-color 0.3s ease;
  transform: perspective(600px) scale(2) rotate(0deg);
  transform-origin: left center;
}
.button-item a:hover {
  display: inline-block;
  color:#240404;
  text-decoration: line-through; /* why no work bruh */
  transform: perspective(600px) scale(3) rotate(-3deg)
}
.button-item:hover {
 transform:perspective(600px) scale(1.03) rotate(2deg); 
}
ul {
  list-style:none;
  padding-left:0;
}
.custom-bullet {
 position:relative;
 padding-left:0;
 margin-bottom:-80px;
}
.custom-bullet::before {
 content:"";
 display:list-item;
 vertical-align:middle;
 width:120px;
 height:120px;
 margin:0px;
 background-image: url(img/bonepile.png);
 background-size:contain;
 background-repeat: no-repeat;
}
.hover-text {
 display: none;
  position: absolute;
  left: 12px;
  top: 160%;
  transform: translateY(-160%);
  background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 2; 
}
.custom-bullet:hover .hover-text {
  display: inline-block;
}