/* Murada Prime: avatar, social chips, link rows as numbered lines of code. */
.rounded-avatar{
  width:144px;height:144px;padding:4px;border-radius:50%;object-fit:cover;display:block;margin:0 auto;
  background:var(--ring);
  box-shadow:-16px 0 54px -6px rgba(255,47,208,.8),16px 0 54px -6px rgba(30,155,255,.8);
  animation:ring-turn 7s linear infinite;
}

.social-icon-div{display:flex!important;justify-content:center;flex-wrap:wrap;gap:8px;margin:20px 16px 22px;padding:0}
.social-link{
  display:grid;place-items:center;width:42px;height:42px;border-radius:8px;
  border:1px solid var(--line);background:rgba(160,150,255,.05);color:var(--text);
  transition:border-color .2s,color .2s,box-shadow .2s;
}
.social-icon{font-size:16px;padding:0;color:inherit!important}
.social-link:hover{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 18px -4px var(--magenta)}
.social-link:nth-child(n+3):hover{border-color:var(--violet);color:#b58cff;box-shadow:0 0 18px -4px var(--violet)}
.social-link:nth-child(n+4):hover{border-color:var(--blue);color:var(--blue);box-shadow:0 0 18px -4px var(--blue)}

/* Editor gutter: the rows number themselves. */
.column{counter-reset:line}
.button-entrance{counter-increment:line;margin:0;border-top:1px solid var(--line)}
.button-entrance:nth-of-type(3n+1){--c:var(--magenta)}
.button-entrance:nth-of-type(3n+2){--c:#a56bff}
.button-entrance:nth-of-type(3n){--c:var(--blue)}

.button{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:12px 20px 12px 0;
  color:var(--text);font:400 14px/1.35 var(--mono);text-align:left;
  transition:background-color .2s;
}
.button::before{
  content:"";flex:none;order:-1;width:18px;height:18px;
  background:var(--c,#a56bff);
  -webkit-mask:var(--i,none) center/contain no-repeat;mask:var(--i,none) center/contain no-repeat;
}
/* Gutter number. */
.button .icon{display:none}
.button-entrance>.button{padding-left:58px}
.button-entrance{position:relative}
.button-entrance::before{
  content:counter(line,decimal-leading-zero);position:absolute;z-index:1;left:0;top:0;bottom:0;width:44px;
  display:grid;place-items:center;font-size:12px;color:var(--comment);
  border-right:1px solid var(--line);background:rgba(160,150,255,.04);pointer-events:none;
}
.button::after{
  content:"->";order:1;margin-left:auto;font-weight:700;color:var(--c,#a56bff);
  transition:transform .2s;
}
.button:hover,.button:focus-visible{background:rgba(160,150,255,.09);color:#fff}
.button:hover::after,.button:focus-visible::after{transform:translateX(4px)}

.button{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 6 .5l3-3a4 4 0 0 0-6-5.500l-1 1M14 10a4 4 0 0 0-6-.5l-3 3a4 4 0 0 0 6 5.500l1-1'/%3E%3C/svg%3E")}
.button-default.email{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.500'/%3E%3Cpath d='m3.500 6.500 8.500 7 8.500-7'/%3E%3C/svg%3E")}
.button-whatsapp{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.500-5A9 9 0 1 1 8 19.500z'/%3E%3Cpath d='M9 8.500c-.5 3 3.500 7 6.500 6.500l.8-1.600-2-1-1 .8c-1-.5-1.700-1.200-2.200-2.200l.8-1-1-2z'/%3E%3C/svg%3E")}
.button-strava{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.500 12H7l2.500-7 4.500 14 2.500-7h5'/%3E%3C/svg%3E")}
.button-playstore{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.500' y='2.500' width='11' height='19' rx='2'/%3E%3Cpath d='M10.500 18.500h3'/%3E%3C/svg%3E")}
.button-peertube{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.500'/%3E%3Ccircle cx='8.500' cy='9.500' r='1.600'/%3E%3Cpath d='m3.500 17 5-4.500 3.500 3 3.500-3.500 5 5'/%3E%3C/svg%3E")}

:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* A band of light crosses a row when it is chosen. */
.button{overflow:hidden}
.button-entrance>.button:hover,.button-entrance>.button:focus-visible{
  background:linear-gradient(100deg,rgba(255,47,208,.13),rgba(139,61,255,.13) 50%,rgba(30,155,255,.13));
}
.button-entrance{transition:box-shadow .25s}
.button-entrance:hover{box-shadow:inset 2px 0 0 var(--c,#a56bff)}