:root{
    /*LINKS PROPERTIES*/
    --quick-links-button-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.384);
    --external-links: invert(00%);
    --external-links-line: rgba(167, 167, 167, 0.836);
} 

html[data-theme="dark"] {
    /*LINKS PROPERTIES*/
    --external-links: invert(100%);
    --external-links-line: rgb(179, 178, 177);
}

.quick-links
{
    display: flex;
    position: relative;
    margin-top: 60px;
    justify-content: center;
    gap: 20px;
}

.quick-links-button
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: auto;
    padding: 10px 16px;

    border-radius: 8px;
    border: 0;

    background: var(--profile-bg); /* green-ish; change to your exact */
    color: var(--profile-text);

    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;

   
    white-space: nowrap;
    box-shadow: var(--quick-links-button-box-shadow);
}

.quick-links-button:hover{
  transform: translateY(-1px);
  filter: brightness(0.95);
}

.quick-links-button:active{
  transform: translateY(0px);
  filter: brightness(0.9);
}

.quick-links-icon-1
{
    height: 20px;
    filter: var(--external-links);
}

.quick-links-icon-2
{
    height: 15px;
    filter: var(--external-links);
}

.external-links
{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  filter: var(--external-links);

  padding-top: 50px;
  padding-bottom: 18px; /* space between icons and line */
  margin-bottom: 40px;
}

.external-links::after
{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: 300px;        /* match his-ish width */
  max-width: 90vw;
  height: 1px;

  /* fades at both ends */
  background: linear-gradient(
    to right,
    transparent,
    var(--external-links-line),
    transparent
  );
}

.profile-icon
{
    width: 25px;
    filter: invert(60%);
    transition: filter;
}

.profile-icon:hover
{
    filter: invert(0%);
}

.profile-description
{
    display: flex;
    position: relative;
    justify-content: center;
    margin: 20px auto;
    

    height: auto;
    width: auto;
    cursor: default;
    
}

@media screen and (max-width: 900px)
{
    
    .quick-links
    {
        margin-top: 40px;
    }
    .external-links
    {
        padding-top: 40px;
        margin-bottom: 0px;
    }
    
    

}