@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Rajdhani:wght@300;400;500;600;700&display=swap');
/* https://devicon.dev/  */
/* .rajdhani-light {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.rajdhani-regular {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rajdhani-medium {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.rajdhani-semibold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.rajdhani-bold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
} */

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
  background-color: black;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
}

header{
  height: 30vh; /*or flex: 0 0 33vh; */
  padding: 0 5%; /*topdown 0, leftright 5%  */
  display: flex;
  justify-content: center;
  align-items:center;
  /* background: url(../public/img/header-background.jpg); */
  background-size: 100% 100%;
}

.header-text{
  /* font-size: min(calc(4.5vw + 3vh),25vh); */
  font-size: min(8vw, 25vh);
  color: rgb(130, 22, 231);
  user-select: none;
  /* text-shadow: x-offset y-offset blur-radius color; */
  text-shadow: 
  0 0 5px #0ff,
  0 0 10px #0ff,
  0 0 20px #0ff,
  0 0 40px #0ff;
  transition: text-shadow 0.2s;
}

.header-text:hover{
  text-shadow: 
  0 0 5px #0ff,
  0 0 10px #0ff,
  0 0 20px #0ff,
  0 0 40px #0ff,
  0 0 80px #0ff;
}

.card-grid{
  position: relative; 
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); 
  gap:20px;
  padding:20px;
}

.neon-bg {
  position: absolute;      
  top: 0;
  left: 0;
  width: 100%;             
  height: 100%;
  background: linear-gradient(
    45deg,
    #ef8fef,
    #ff00ff,
    #8f258f,
    #470647
  );
  background-size: 800% 800%;     
  animation: neonFlow 5s linear infinite;
  filter: blur(50px);              
  opacity: 0.2;                    
  z-index: 0;                    
}

@keyframes neonFlow {
  0%   { background-position: 0% 50%; } 
  /*background-position: 水平方向(X)  垂直方向(Y); */
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.project-card{
  display: flex;
  flex-direction: column;
  /* background-color: rgb(228, 202, 202); */
  text-decoration: none;
  color: rgb(130, 22, 231);
  font-weight: bold;
  border:5px solid blue;
  border-radius: 12px;
  transition: box-shadow 0.2s, transform 0.2s;
  z-index: 1;
  box-shadow: 0 0 20px #f0f;
  position: relative;
}
.project-card.disabled {
  cursor: default;
}
.project-card.disabled::before{
  content: "Coming Soon";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: rgb(130, 22, 231);
  text-shadow: 
    2px 2px 5px #0ff;
  font-size: 4rem;
  z-index: 2;
  transition: text-shadow 0.5s;
  /* pointer-events: none;    */
/* border-radius: 12px;
/* border: 2px solid white; */
}

.project-card.disabled:hover::before{
  text-shadow: 
  0 0 5px #0ff,
  0 0 15px #0ff,
  0 0 25px #0ff,
  0 0 35px #0ff;
}
.project-card:hover{
  box-shadow: 
    0 0 5px #f0f,
    0 0 10px #f0f,
    0 0 20px #f0f,
    0 0 40px #f0f;/*right5 down5 blur5  */
  transform: scale(1.02);
}
.project-card:hover:not(.disabled) .project-header h2{
  text-shadow: 
  0 0 5px #0ff,
  0 0 15px #0ff,
  0 0 22px #0ff,
  0 0 30px #0ff;
  transition: text-shadow 0.3s;
}

.project-header{
  border-bottom: 5px solid blue;
  flex: 1;
}
.project-header h2{
  margin:0;
  padding: 1.5% 5%;
  font-size: max(3vw, 35px);
  overflow: hidden;
  text-shadow: 2px 2px 3px#0ff;
  /* border: 1px solid white; */
}
.project-header p{
  font-size: 1.2em;
  color:rgb(176, 96, 96);
  margin: 0;
  padding: 1% 5%;
  /* border: 1px solid red; */
}

.project-tech{
  flex:3;
  font-size: max(2vw,25px);
  overflow: auto;
}
.project-tech ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

  padding: 0;
  margin: 0; 
  width: 100%;
  min-width: 100px;
  height: 100%;
  min-height: 200px;
  gap: 25px;

  white-space: nowrap;
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* border: 1px solid white; */
}
.project-tech li{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* border:1px solid red; */
}

.tech-items{
  display:grid;
  grid-template-columns: 1fr 1fr;
  /* border: 1px solid; */
}

.tech-item{
  text-align: center;
  padding: 10px 10px;
  /* margin: 0 5%; */
  /* border: 1px solid yellow; */
}
.tech-item img{
  min-width: 50px;
  width: 4vw;
  height: auto;
  filter:drop-shadow(0 0 5px white);
  transition: transform 0.2s, filter 0.2s;
}
.tech-item img:hover{
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px white);
}

.tech-item-label{
  font-size: max(15px, 0.48em);
  color: rgb(176, 96, 96);
}