:root{
  --bg:#050608;
  --text:#f3f4f6;
  --muted: rgba(243,244,246,.72);
  --panel: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
}

@font-face{
  font-family:"AngelFont";
  src: url("../fonts/1.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family:"AngelFont", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  /* курсор */
  cursor: url("assets/offline.webp") 16 16, auto;
}

a, button, input{
  cursor: url("assets/offline.webp") 16 16, pointer;
}

/* IMPORTANT: чтобы кнопки работали */
#particles{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* <-- вот это фиксит "кнопки не работают" */
}

.topline{
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  letter-spacing: 0.8px;
  line-height: 1.2;
  user-select: none;
  z-index: 5;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0 8px rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.12);
}

.caret{
  display:inline-block;
  width:10px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{opacity:0;} }

.wrap{
  min-height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 92px 16px 44px;
  position: relative;
  z-index: 2;
}

.center{
  width: min(820px, 94vw); /* шире */
  display:flex;
  flex-direction: column;
  gap: 16px;
}

/* AVATAR */
.avatarWrap{
  width: 100%;
  display:flex;
  justify-content:center;
}

.avatar{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;

  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 
    0 0 20px rgba(255,255,255,.15),
    0 18px 60px rgba(0,0,0,.55);

  background: rgba(255,255,255,.04);
}

.panel{
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;      /* больше */
  padding: 18px 20px;       /* больше */
  backdrop-filter: blur(10px);
}

.h{
  margin: 0 0 12px 0;
  font-size: 14px;
  letter-spacing: .6px;
  color: var(--text);
  opacity: .92;
}

.projects{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.card{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 16px;       /* больше */
  border-radius: 18px;      /* больше */
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  color: var(--text);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  will-change: transform;
}

.card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

.cardAvatar{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 15px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  user-select:none;
}

.cardText{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.cardTitle{ font-size: 15px; opacity:.96; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cardSub{ font-size: 12px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.links{
  width: 100%;
  display:flex;
  justify-content:center;
  gap: 16px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.link, .linkbtn{
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  padding: 0 !important;
  margin: 0 !important;

  color: #ffffff !important;
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.6px;
  opacity: .85;

  text-decoration: none;
}

.linkbtn:focus,
.linkbtn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}


.link:hover, .linkbtn:hover{
  opacity: 1;
  text-shadow: 0 0 12px rgba(255,255,255,.35);
  text-decoration: none;
}

.email{ color: var(--muted); }

/* SOUND CONTROLS */
.soundWrap{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.soundBtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  color: #fff;
}

.volume{
  width: 130px;
  accent-color: #ffffff;
  opacity: .9;
}