body{
  margin:0;
  background:#000;
  font-family:Arial, sans-serif;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* верхний блок */
.about{
  width:90%;
  max-width:700px;
  margin-top:40px;
  padding:30px;
  background:rgba(20,20,20,0.8);
  backdrop-filter:blur(10px);
  border-radius:25px;
  text-align:center;
  box-shadow:0 15px 40px rgba(0,0,0,0.9);
  z-index:1;
}

/* Радужный неон */
.title{
  font-size:42px;
  font-weight:bold;
  background:linear-gradient(
    90deg,
    #ff0000,
    #ff9900,
    #ffff00,
    #00ff00,
    #00ffff,
    #0066ff,
    #cc00ff
  );
  background-size:400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: rainbow 6s linear infinite, glow 2s infinite alternate;
  text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #38bdf8;
}

@keyframes rainbow{
  0%{background-position:0%}
  100%{background-position:400%}
}

@keyframes glow{
  from{ text-shadow:0 0 15px #fff,0 0 25px #fff,0 0 40px #38bdf8; }
  to{ text-shadow:0 0 30px #fff,0 0 50px #fff,0 0 70px #38bdf8; }
}

/* контейнер карточек */
.container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:70px;
  margin-top:60px;
  padding:40px;
  max-width:1300px;
  z-index:1;
}

/* карточки */
.card{
  position:relative;
  width:300px;    /* фиксированная ширина */
  height:360px;   /* фиксированная высота */
  border-radius:20px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background-size:cover;
  background-position:center;
  box-shadow:0 0 15px #fff, 0 10px 30px rgba(255,255,255,0.2);
  transition:0.3s;
  opacity:1;
}

.card:hover{
  box-shadow:0 0 25px #fff, 0 0 50px #38bdf8;
  transform:translateY(-5px);
}

/* текст в карточке */
.info{
  position:absolute;
  top:20px;
  left:20px;
  background:rgba(0,0,0,0.7);
  padding:15px 20px;
  border-radius:15px;
  max-width:calc(100% - 40px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.info h2{
  font-size:26px;
  margin:0 0 5px 0;
  text-shadow:0 2px 10px #fff;
}

.info p{
  font-size:15px;
  margin:2px 0;
}

/* дополнительная инфа */
.more{
  position:absolute;
  bottom:50px;
  left:20px;
  width:calc(100% - 40px);
  background:rgba(255,255,255,0.05);
  padding:12px;
  border-radius:20px;
  text-align:left;
  opacity:0;
  transform:translateY(20px);
  transition:0.35s;
}

.more p{
  font-size:20px;
  margin:10px 0;
}

.card:hover .more{
  opacity:1;
  transform:translateY(0);
}

/* картинки */
.me{
  background-image:
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url("IMG_20260308_150405_091.jpg");
}

.friend1{
  background-image:
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url("Снимок экрана 2025-10-02 195930.png");
}

.friend2{
  background-image:
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url("Снимок экрана 2025-10-02 185730.png");
}

.friend3{
  background-image:
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url("IMG_20260308_132856_104.jpg");
}

.friend4{
  background-image:
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url("IMG_20260308_145956_615.jpg");
}

.friend5{
  background-image:
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url("IMG_20260308_150815_758.jpg");
}

/* адаптация под телефон */
@media (max-width:1000px){
  .container{
    justify-content:center;
    gap:50px;
    flex-wrap:wrap;
  }
  .card{
    width:90%;
    height:300px;
  }
  .title{
    font-size:36px;
  }
}

/* canvas */
#particles{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}