:root{
  --pico-border-radius: 2rem;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

h1:not(article h1){
  --grad-dark: var(--pico-contrast-hover);
  --grad-slate: var(--pico-color);
  background: linear-gradient(to bottom right, var(--grad-dark) 0%, var(--grad-slate) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

article {
/*  --pico-border-radius: 2.4rem; */
}
article > footer, article > header {
  background-color: unset;
  border-top: unset;
  border-bottom: unset;
}

.avatar, .avatar-sm  {
  height:4rem;
  border-radius:360px;
  aspect-ratio: 1 / 1;
}
.avatar-sm {
  height:2rem;
}

.card {
  aspect-ratio: 2 / 1;
}
/* Ghost Button Variant for Pico CSS */

/* Base Ghost Button Styles */
:where(button,[role="button"]).ghost {
  background-color: transparent;
  border: 1px solid transparent; /* Inherits text color */
  color: inherit; /* Inherits text color */
}

:where(button,[role="button"]).ghost:hover,
:where(button,[role="button"]).ghost:focus,
:where(button,[role="button"]).ghost:active  {
  background-color: transparent; /* Subtle background on hover/focus */
  color: var(--pico-primary-hover-background);
  border-color: transparent;
}

/* Primary Ghost Button */
:where(button,[role="button"]).ghost.primary {
  color: var(--pico-background-color);
  border-color: transparent;
}

:where(button,[role="button"]).ghost.primary:hover,
:where(button,[role="button"]).ghost.primary:focus,
:where(button,[role="button"]).ghost.primary:active  {
  background-color: transparent;
}

/* COLOR ADDITION */
.pico-background-0 {
    background: transparent;
    box-shadow: none;
}

/* Responsive Layout helpers */

.hidden {
  display:none;
}
.show-sm {
    display:none;
}
.hide-lg {
    display:none;
}

.df-r-row {
    flex-direction: row;
  }

/* Portrait Tablets and smaller */
@media (max-width: 768px) {

  .hide-sm {
    display:none;
  }
  .hide-lg {
    display:unset;
  }
  .df-r-row {
    flex-direction: column;
  }
}