body {
      font-family: "Titillium Web", serif;
    }
    
    h1, .h1 {
      font-size: 17px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 30px;
      text-align: left;
    }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 10px;
  }

  .image-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
  }

  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
    .card {
      background: #1e1e1e;
      border-radius: 8px;
      overflow: hidden;
      font-weight: 300;
      font-style: normal;
      box-shadow: 0 0 1px 1px #00ffff20; /* Glowing */
      transition: box-shadow 0.1s ease-in-out;
    }
    .card:hover {
      background-color: #1a1f25;
      box-shadow: none;
    }
    .card img {
      width: 100%;
      height: auto;
    }
    .card img:hover {
    transform: scale(1.01);
    }
    .card-content {
      padding: 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .card-content-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;
    }
    .card-content-sold {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-bottom: 4px;
    }
    .card-content-seller {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-left: 10px;
      margin-right: 10px;
    }
    .card-content-buyer {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-left: 10px;
      margin-right: 10px;
    }
    .card-title {
      font-size: 1rem;
      margin-top: 0px;
      margin-bottom: 0px;
      color: #8a8a91;
    }
    .collection-name {
      font-size: 1rem;
      color: #c7c7c7;
      margin-left: 5px;
      margin-bottom: 0px;
    }
    .card-rarity {
      padding: 5px;
      font-size: 1rem;
      color: #f1c40f;
      margin-bottom: 0px;
    }
    .card-rarity-2 {
      align-self: flex-end;
      padding: 5px;
      font-size: 1rem;
      color: #f1c40f;
      margin-bottom: 0px;
    }
    .hr {
        color: #fffff;
    }
    .sale-type {
      display: flex;
      font-size: 15px;
      margin-top: 2px;
      margin-right: 10px;
      align-items: center;
      color: #c7c7c7;
    }
    .sale-type-2 {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      margin-right:10px;
    }
    .card-price {
      font-size: 1.2rem;
      color: #c7c7c7;
      margin-left:5px;
    }
    .card-price-2 {
      font-size: 1.2rem;
      color: #f9f9f9;
    }
    .card-seller {
      font-size: 0.8rem;
      color: #c7c7c7;
      margin-left: 5px;
    }
    .card-seller-2 {
      font-size: 1rem;
      text-decoration: none;
      color: #bc397a;
    }
    .down {
        color: #cb5b5b;
    }
    .card-buyer {
      font-size: 0.8rem;
      color: #c7c7c7;
      margin-left: 5px;
      margin-bottom: 0px;
    }
    .card-buyer-2 {
      font-size: 1rem;
      text-decoration: none;
      color: #bc397a;
      margin-bottom: 5px;
    }
    .up {
        color: #80cb5b;
    }
    .card-link {
      text-decoration: none;
    }
    .collection-link {
      text-decoration: none;
      color: #c7c7c7;
    }
    

  .light-theme {
    background-image: url('./img/bg.jpg');
	color: black;
	transition: background-color 0.5s ease, color 0.5s ease;
  }


  .dark-theme {
    background-color: #212529;
    color: white;
	transition: background-color 0.5s ease, color 0.5s ease;
  }


  #themeToggleBtn {
    position: absolute;
	font-size: 12px;
	height: 20px;
	width: 20px;
    top: 17px;
    right: 15px;
    background-color: #333;
    color: white;
    border: none;
    padding: 0 0 0;
    cursor: pointer;
    border-radius: 50px;
  }

  #themeToggleBtn:hover {
    background-color: #555;
  }
    
    
        .status-container {
            display: flex;
            align-items: center;
            margin-top: 0px;
            gap: 10px;
            font-size: 18px;
            font-family: "Titillium Web", serif;
        }

        .status-indicator {
            width: 6px;
            height: 6px;
            background-color: limegreen;
            border-radius: 50%;
            box-shadow: 0 0 5px limegreen;
            animation: blink 2s infinite alternate;
        }

        @keyframes blink {
            0% { opacity: 1; }
            100% { opacity: 0.2; }
        }
    
    .checkmark { color: green; }
    .error { color: red; }
    /* Стили для кнопки подключения */
    .connect {
      display: inline-block;
      padding: 5px 10px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      border: 1px solid #ffffff50;
      border-radius: 5px;
      background: #333;
      text-transform: uppercase;
    }
    .connect:hover {
      transform: scale(1.05);
      cursor: pointer;
    }
    
        .top {
            display: flex;
            justify-content: flex-end;
            margin-top: 5px;
            margin-right: 50px;
            font-size: 18px;
            font-family: "Titillium Web", serif;
        }
        
.top2 {
    display: flex;
    justify-content: space-between; /* Распределяет элементы по краям */
    align-items: center; /* Выравнивает элементы по вертикали */
    width: 100%;
    margin-top: 10px;
}
.left {
    /* Элемент слева */
}
.right {
    margin-right: 55px;
}
.margin-right {
    margin-right: 20px;
}

    
    
  .custom-tooltip {
    position: relative;
  }

  .custom-tooltip::after {
    content: attr(data-title);
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    background-color: #;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .custom-tooltip:hover::after {
    opacity: 1;
  }