---
---

@use 'sass:math';
@use 'main
{%- if jekyll.environment == 'production' -%}
  .bundle
{%- endif -%}
';

/* 生成动画 */
@keyframes infirot {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

.icon-loading1 {
  display: inline-block;
  animation: infirot 1s linear infinite;
  -webkit-animation: infirot 1s linear infinite;
}

@function random_range($min, $max) {
  $rand: math.random();
  $random_range: $min + math.floor($rand * (($max - $min) + 1));
  @return $random_range;
}

#animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;

  @keyframes animate {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
    }
    100% {
      transform: translateY(-1200px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
    }
  }

  @media all and (min-width: 1200px) {
    .animation-circle {
      position: absolute;
      left: var(--circle-left);
      bottom: -300px;
      display: block;
      background: var(--circle-background);
      width: var(--circle-side-length);
      height: var(--circle-side-length);
      animation: animate 25s linear infinite;
      animation-duration: var(--circle-time);
      animation-delay: var(--circle-delay);
      pointer-events: none;

      @for $i from 0 through 50 {
        &:nth-child(#{$i}) {
          --circle-left: #{random_range(0%, 100%)};
          --circle-background: rgba(#{random_range(0, 255)}, #{random_range(0, 255)}, #{random_range(0, 255)}, 0.06); // 最后一个数为透明度
          --circle-side-length: #{random_range(20px, 200px)};
          --circle-time: #{random_range(10s, 45s)};
          --circle-delay: #{random_range(0s, 25s)};
        }
      }
    }
  }

  @media all and (max-width: 1199px) {
    .animation-circle {
      display: none;
    }
  }
}


/* append your custom style below */
/* 覆盖主题的博客帖子边框样式 */
.card-wrapper.card {
  border: 3px solid #e3e5e7 !important; /* 使用更显眼的蓝色边框 */
  padding: 2px; /* 适中的内边距 */
  margin-bottom: 2px; /* 适中的下边距 */
  border-radius: 8px; /* 适中的圆角 */
  background-color: #f9f9f9; /* 淡灰色背景，增强边框的对比 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加平滑过渡效果 */
}

.card-wrapper.card:hover {
  transform: translateY(-5px); /* 鼠标悬停时轻微上移 */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

/* 侧边栏背景及文字样式设置 */
#sidebar {
  background-image: url('/assets/img/background-dark.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

#sidebar .site-title a {
  color: #ffffff; 
  text-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
#sidebar .site-subtitle {
  color: #ffffff;
  text-shadow: 2px 2px 3px rgba(0,0,0, 0.7);
}
#sidebar .sidebar-bottom .mode-toggle, #sidebar a {
  color: #ffffff;
}
#sidebar .sidebar-bottom .btn {
  color: var(--sidebar-btn-color);
}