@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300&display=swap');
body{
	/*font-family: "Vazirmatn", sans-serif;*/
  overflow-x: hidden;
	background-color: #dfdfca54;
}
a{
	text-decoration: none;
}
.link{
	color: #139d13;
	font-size: 27px;
  margin-right: 12px;
}
.header{
	text-align: center;
	margin: 15px 0;
  font-family: "Vazirmatn", sans-serif;
}
.controler{
	display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  width: 450px;
  margin: 0 auto;
  flex-direction: column;
  font-family: "Vazirmatn", sans-serif;
}
ul li{
	list-style: none;
}
li {
  padding: 6px 0;
  margin: 6px 0; 
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.icon {
  /* Centering is perfect */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 1. Using rem for a scalable size */
  width: 3rem;
  height: 3rem;
  
  /* 2. A more robust way to create a circle */
  border-radius: 50%;
  
  background-color: #a0acbd;
  color: #fff;
  cursor: pointer;

  /* 3. Add a smooth transition for hover effects */
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.listIcon .icon-name {
  width: 100%; /* مطمئن می‌شود که عنصر عرض کانتینر والد را می‌گیرد */
  
  /* سه خط اصلی برای کوتاه کردن متن */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* برای زیبایی بیشتر */
  margin-top: 10px;
  color: #555;
  font-size: 14px;
}
/* 4. Add a hover effect for better user feedback */
.icon:hover {
  background-color: #818c9b; /* Slightly darker shade */
  transform: scale(1.1); /* Makes the icon pop */
}
.listIcon {
  display: grid;
  /* این خط جادوی اصلی است */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px; /* ایجاد فاصله بین آیکون‌ها */
  padding: 20px; /* ایجاد فاصله از لبه‌های کانتینر */
  list-style: none; /* حذف نقطه‌های کنار لیست */
}
.listIcon li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.listIcon li:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: #007bff; /* یک رنگ دلخواه برای هاور */
}

.listIcon .material-symbols-outlined {
  font-size: 40px; /* اندازه آیکون */
  /*margin-bottom: 10px;*/
}
.message{
	width: 400px;
  display: grid;
  justify-content: center;
  align-content: center;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: 15px;
}
@media screen and (max-width: 500px){
  body{
    overflow-x: hidden;
    margin: 5px;
  }
  .controler{
    padding: 5px 15px;
    width: 100%;
  }
  .icon{
    width: 45px;
    height: 45px;
  }
  li div{
    font-size: 12px;
  }
  li{
    width: 90px;
  }
  .listIcon{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: hidden;
  }
  .message{
    width: 100%;
    /*margin: -5px 5px;*/
  }
  .alert{
    margin: 5px;
  }
}