/* responsive.css */
/* 调整响应式样式 */

/* 小屏幕下的样式 */
@media screen and (max-width: 768px) {

  .header-img {
    margin-right: 3vw;
  }

  .header-signature {
      font-size: 18px;
  }

  .card-title {
      font-size: 20px;
      margin: 5px;
  }

  .card-background .keywords span {
      font-size: 18px;
  }

  .card-container.lecture {
    padding: 1vw;
  }

  .card.lecture.stack.active {
    padding: 1vw;
  }
  
  .card-container.folder {
    padding-top: 2vw;
    padding-bottom: 2vw;
  }

}

/* 超小屏幕下的样式 */
@media screen and (max-width: 480px) {
  .header-title {
    font-size: min(10vw, 10vh);
  }
  
  .header-content {
    margin-left: 1.5vw;
  }

  .header-img {
    margin-right: 3vw;
  }
  
  .header-signature {
    font-size: 16px;
  }

  .info-panel {
    width: 98vw; /* 超小屏幕下卡片几乎占满宽度 */
  }

  .card {
    width: 98vw; /* 宽度只比页面宽度窄一点 */
  }

  .card-title {
    font-size: 18px;
    margin: 3px;
  }

  .card-background .keywords span {
    font-size: 16px;
  }
}

/* 暗黑模式下的样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(75, 75, 75);
  }
  .header {
    background: rgba(150, 150, 140); 
  }
  .info-panel {
    background-color: rgba(190, 190, 180, 0.5); 
  }
  .card {
    background-color: rgb(150, 150, 140);
  }
}