:root {
  --vp-c-brand-1: #149ef8;
  --vp-c-brand-2: #0434ad;
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #34a3fe 30%, #8d44ff);

  --vp-home-hero-image-background-image: linear-gradient(-45deg, #d0e9ff 50%, #a2d8f4 50%);
  --vp-home-hero-image-filter: blur(44px);

  --vp-c-gray-1: #eee;
  --vp-c-gray-2: #aaa;
  --border-radius-1: 10px;
  --border-radius-2: 20px;
  --border-radius-3: 40px;
  --vp-font-family-base: 'Poppins', 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
  'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', 'Heiti SC',
  'Microsoft YaHei', 'DengXian', sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --vp-font-family-mono: 'Cousine', monospace;

  --red: #ef4444;
  --liteyuki-color: #149ef8;
  --button-radius: 6px;


}

.dark {
  --vp-home-hero-image-background-image: linear-gradient(-45deg, #004785 50%, #0374ad 50%);
  --vp-c-gray-1: #333;
  --vp-c-gray-2: #666;
}

.tab-buttons {
  padding: 7px;
  flex: 1;
  display: flex;
  justify-content: flex-start;
  height: 60%;
  align-items: center;
}


.tab-title {
  text-align: center;
  justify-content: center;
  flex: 1;
}

.item-search-box {
  border-radius: 100px;
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
}

.search-box-div {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}

.item-search-box {
  width: 80%;
}

.item-card {
  position: relative;
  border-radius: 15px;
  background-color: var(--vp-c-gray-1);
  height: 160px;
  padding: 16px;
  margin: 10px;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.item-name {
  font-size: 20px;
  margin-bottom: 10px;
}

.item-description {
  color: var(--vp-c-gray-2);
  font-size: 13px;
  white-space: pre-wrap;
}

.author-info {
  display: flex;
  justify-content: left;
  align-items: center;
}

.author-name {
  font-size: 15px;
  font-weight: normal;
}

.avatar {
  border-radius: 50%;
  margin: 0 10px;
}


/*store*/

.store-tabs {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.publish-button {
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 10px;
  background-color: var(--vp-c-brand-1);
  color: white;
  font-size: 15px;
  cursor: pointer;
}

.pub-window {
  input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid #ccc;
  }
}

.pub-option {
  margin: 10px;
  padding: 5px;
  border: 2px solid var(--vp-c-gray-1);
  border-radius: var(--button-radius);
  background-color: var(--vp-c-gray-1);

  &.close {
    color: white;
  }

  &.submit {
    background-color: var(--vp-c-brand-1);
  }
}