@layer reset, base, site, layout;

@layer layout {
  progress {
    width: min(100%, 24rem);
    height: 0.85rem;
    accent-color: var(--accent);
  }

  .site-shell .portfolio-content > section[aria-label="Downloadable resume"] {
    justify-self: end;
    width: fit-content;
    margin-inline-start: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: right;
  }

  .portfolio-content > section[aria-label="Downloadable resume"] a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.55rem 0.9rem;
    color: white;
    background: var(--accent-strong);
    border-radius: 999px;
    text-decoration: none;

    &:hover {
      color: white;
      background: var(--accent);
      transform: translateY(-1px);
    }
  }
}