@font-face {
  font-family: "cyberpunk-regular";
  src: url("/css/cyberpunk-regular.woff2");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%; /* 确保 HTML 和 body 高度为 100% */
  margin: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: rgb(1, 6, 47);
  overflow-x: hidden; /* 防止水平滚动条出现 */
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%; /* 占满高度 */
  width: 100%; /* 占满宽度 */
  position: relative;
  background-color: rgb(1, 6, 47); /* header背景颜色一致 */
}

.header-content,
.header-content::after {
  font-family: 'cyberpunk-regular';
  width: 700px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 75px;
  line-height: 80px;
  color: rgb(243, 239, 8);
  cursor: pointer;
  position: relative;
}

.header-content::after {
  content: 'Muji Togawa';
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: -5px -2px 0 rgb(0, 183, 255),
    5px 2px 0 rgb(0, 255, 115);
  visibility: hidden;
}

.header-content:hover::after {
  animation: san 1s;
  animation-timing-function: steps(1, end);
}

/* 基本样式 */
.header-content {
  font-family: 'cyberpunk-regular';
  text-align: center;
  color: rgb(243, 239, 8);
}

/* 在桌面端显示为一行 */
.header-title, .header-subtitle {
  display: inline-block;
  font-weight: bold;
  line-height: 80px; /* 保持行高一致 */
}

.header-title {
  font-size: 75px; /* 可以调整字体大小 */
}

.header-subtitle {
  font-size: 75px; /* 可以调整字体大小 */
}

@keyframes san {
  0% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(-7px, 6px);
    visibility: visible;
  }

  10% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(7px, -6px);
  }

  20% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(6px, 0px);
  }

  30% {
    clip-path: inset(80% -5px 5% 0);
    transform: translate(-9px, 6px);
  }

  40% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(-5px, -4px);
  }

  50% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(-7px, -6px);
  }

  60% {
    clip-path: inset(80% -5px 5% 0);
    transform: translate(-9px, 6px);
  }

  70% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(4px, 8px);
  }

  80% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(5px, 5px);
  }

  90% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(6px, -5px);
  }

  100% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(1px, 5px);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 20px; /* arrow距底部距离 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  width: 30px;
  height: 30px;
  border: solid #ffffff;
  border-width: 0px 4px 4px 0px;
  transform: rotate(45deg);
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(45deg);
  }
  40% {
    transform: translateY(-10px) rotate(45deg);
  }
  60% {
    transform: translateY(-5px) rotate(45deg);
  }
}

main.content {
  background-color: rgb(1, 6, 47);
  width: 100%;
  height: 100vh;
}

.container {
  text-align: center;
  margin-top: 7%;
  font-family: Arial, sans-serif;
  color: white;
}

.c1 {
  text-align: center;
  width: 360px;
  height: 360px;
  border: 4px solid #6495ED;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  display: block;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);/*从0度开始*/
  }
  100% {
    transform: rotateZ(360deg);/*360度结束*/
  }
}

.project-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;  /* 强制所有card在同一行上 */
  max-width: 1200px;
  margin: 20px auto;
}

.project-card {
  width: 23%;
  padding: 20px;
  border-radius: 5px;
  color: white;
  margin: 10px;
  display: flex;  
  flex-direction: column; 
  transition: all .2s;
}

a {
  text-decoration: none; 
  outline: none; 
  color: white; 
  }

.project-card:hover {
  transform: translateY(-20px);
  box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
}

.project-card h2 {
  margin-top: 0;
  font-size: 24px;
  margin-bottom: 5px;
  text-decoration: none;
}

.blue { background-color: #5DADE2; }
.pink { background-color: #EC7063; }
.gray { background-color: #85929E; }
.green { background-color: #52BE80; }

.project-card h3 {
  font-size: 18px;
  margin-top: 0;
  text-decoration: none;
}

button {
  background-color: #ffffff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 5%;
}

@media only screen and (max-width: 1000px) {
  .header-content {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;    /* 居中对齐 */
  }

  .header-title, .header-subtitle {
    display: block; /* 确保每个元素占一行 */
  }
  
  .project-grid {
    display: flex;
    flex-wrap: wrap;     /* 允许换行 */
    justify-content: center; /* 中心对齐 */
    gap: 30px;           /* 卡片之间的间距 */
    max-width: 1200px;
    margin: 20px auto;
  }
  
  .project-card {
    width: calc(50% - 20px); /* 减去间距 */
    padding: 20px;
    border-radius: 5px;
    color: white;
    margin: 0; /* 将 margin 改为 0，以免干扰宽度计算 */
    display: flex;
    flex-direction: column;
    transition: all .2s;
  }
  

}