:root {
  --bg        : #f5f0e8;
  --text      : #0d0d0d;
  --accent1   : #ff5c00;
  --accent2   : #ffd600;
  --accent3   : #00d4ff;
  --accent4   : #b8ff3f;
  --border    : #0d0d0d;
  --bw        : 3px;
  --shadow    : 5px 5px 0px #0d0d0d;
  --shadow-lg : 8px 8px 0px #0d0d0d;
  --card-bg   : #ffffff;
}

[data-theme="dark"] {
  --bg        : #0d0d0d;
  --text      : #f5f0e8;
  --border    : #f5f0e8;
  --shadow    : 5px 5px 0px #f5f0e8;
  --shadow-lg : 8px 8px 0px #f5f0e8;
  --card-bg   : #1a1a1a;
}

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

body {
  font-family      : 'DM Mono', monospace;
  background-color : var(--bg);
  color            : var(--text);
  min-height       : 100vh;
  padding          : 2rem 1rem 5rem;
  transition       : background-color 0.3s, color 0.3s;
}

#theme-btn {
  position        : fixed;
  top             : 1.1rem;
  right           : 1.1rem;
  z-index         : 99;
  width           : 46px;
  height          : 46px;
  border          : var(--bw) solid var(--border);
  background      : var(--accent2);
  color           : #0d0d0d;
  cursor          : pointer;
  box-shadow      : var(--shadow);
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : transform 0.12s, box-shadow 0.12s;
}

#theme-btn:hover {
  transform  : translate(-2px, -2px);
  box-shadow : var(--shadow-lg);
}

#theme-btn:active {
  transform  : translate(3px, 3px);
  box-shadow : none;
}

.wrapper {
  max-width : 620px;
  margin    : 0 auto;
}

.profile {
  text-align    : center;
  margin-bottom : 2.5rem;
  animation     : fadeUp 0.55s 0.05s ease both;
}

.avatar-wrap {
  display       : inline-block;
  position      : relative;
  margin-bottom : 1.4rem;
}

.avatar-wrap::after {
  content       : '';
  position      : absolute;
  inset         : 0;
  border-radius : 50%;
  border        : var(--bw) solid var(--border);
  background    : var(--accent1);
  transform     : translate(7px, 7px);
  z-index       : -1;
  transition    : background 0.3s;
}

.avatar-wrap img {
  width         : 112px;
  height        : 112px;
  border-radius : 50%;
  border        : var(--bw) solid var(--border);
  display       : block;
  object-fit    : cover;
}

h1 {
  font-family    : 'Space Grotesk', sans-serif;
  font-size      : clamp(2rem, 7vw, 3rem);
  font-weight    : 900;
  letter-spacing : -2px;
  line-height    : 1;
  text-transform : uppercase;
}

h1 .highlight {
  display    : inline-block;
  background : var(--accent1);
  color      : #fff;
  padding    : 0 10px;
  margin-top : 5px;
}

.tagline {
  display        : inline-block;
  margin-top     : 0.9rem;
  font-size      : 0.78rem;
  font-weight    : 500;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  border         : var(--bw) solid var(--border);
  padding        : 5px 16px;
  background     : var(--accent2);
  color          : #0d0d0d;
  box-shadow     : 3px 3px 0 var(--border);
}

.section-label {
  font-family    : 'Space Grotesk', sans-serif;
  font-size      : 0.68rem;
  font-weight    : 800;
  text-transform : uppercase;
  letter-spacing : 0.2em;
  opacity        : 0.45;
  margin-bottom  : 0.75rem;
  margin-top     : 2.2rem;
}

#links-container {
  display        : flex;
  flex-direction : column;
  gap            : 11px;
}

.link-card {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 13px 18px;
  background      : var(--card-bg);
  border          : var(--bw) solid var(--border);
  box-shadow      : var(--shadow);
  text-decoration : none;
  color           : var(--text);
  font-family     : 'Space Grotesk', sans-serif;
  font-weight     : 700;
  font-size       : 0.97rem;
  opacity         : 0;
  animation       : fadeUp 0.45s ease both;
  transition      : transform 0.12s ease, box-shadow 0.12s ease;
}

.link-card:hover {
  transform  : translate(-3px, -3px);
  box-shadow : var(--shadow-lg);
}

.link-card:active {
  transform  : translate(3px, 3px);
  box-shadow : none;
}

.link-card.accent-1 {
  border-left : 6px solid var(--accent1);
}

.link-card.accent-2 {
  border-left : 6px solid var(--accent3);
}

.link-card.accent-3 {
  border-left : 6px solid var(--accent4);
}

.link-left {
  display     : flex;
  align-items : center;
  gap         : 13px;
}

.link-icon {
  width           : 36px;
  height          : 36px;
  border          : 2px solid var(--border);
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
}

.link-card.accent-1 .link-icon {
  background : var(--accent1);
  color      : #fff;
}

.link-card.accent-2 .link-icon {
  background : var(--accent3);
  color      : #0d0d0d;
}

.link-card.accent-3 .link-icon {
  background : var(--accent4);
  color      : #0d0d0d;
}

.link-icon svg {
  width  : 17px;
  height : 17px;
}

.arrow-icon {
  width       : 18px;
  height      : 18px;
  flex-shrink : 0;
  transition  : transform 0.15s;
}

.link-card:hover .arrow-icon {
  transform : translateX(4px);
}

.socials-label {
  text-align : center;
}

#socials-container {
  display         : flex;
  justify-content : center;
  gap             : 11px;
  flex-wrap       : wrap;
  opacity         : 0;
  animation       : fadeUp 0.5s 1.1s ease both;
}

.social-btn {
  width           : 50px;
  height          : 50px;
  border          : var(--bw) solid var(--border);
  background      : var(--card-bg);
  box-shadow      : var(--shadow);
  display         : flex;
  align-items     : center;
  justify-content : center;
  text-decoration : none;
  color           : var(--text);
  transition      : transform 0.12s, box-shadow 0.12s;
}

.social-btn:hover {
  transform  : translate(-3px, -3px);
  box-shadow : var(--shadow-lg);
}

.social-btn:active {
  transform  : translate(3px, 3px);
  box-shadow : none;
}

.social-btn svg {
  width  : 20px;
  height : 20px;
}

.social-btn[data-id="whatsapp"] {
  background   : #25D366;
  color        : #fff;
  border-color : #25D366;
}

.social-btn[data-id="twitter"] {
  background   : #1d9bf0;
  color        : #fff;
  border-color : #1d9bf0;
}

.social-btn[data-id="instagram"] {
  background   : #e1306c;
  color        : #fff;
  border-color : #e1306c;
}

.social-btn[data-id="telegram"] {
  background   : #0088cc;
  color        : #fff;
  border-color : #0088cc;
}

.footer {
  text-align     : center;
  margin-top     : 3rem;
  font-size      : 0.75rem;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  opacity        : 0;
  animation      : fadeUp 0.5s 1.5s ease both;
}

@keyframes fadeUp {
  from {
    opacity   : 0;
    transform : translateY(22px);
  }

  to {
    opacity   : 1;
    transform : translateY(0);
  }
}