@import "global/reset.css";
@import "global/fonts.css";

@import "global/variables.css";
@import "global/global-styles.css";

@import "blocks/prose.css";
@import "blocks/header.css";
@import "blocks/hero.css";
@import "blocks/host.css";
@import "blocks/social-links.css";
@import "blocks/snazzy-link.css";
@import "blocks/star-pattern.css";

@import "compositions/cluster.css";
@import "compositions/flow.css";
@import "compositions/grid.css";
@import "compositions/repel.css";
@import "compositions/sidebar.css";
@import "compositions/switcher.css";
@import "compositions/wrapper.css";

@import "utilities/region.css";
@import "utilities/visually-hidden.css";

h1 {
  color: var(--c-red);
  margin-bottom: 0.5em;
}
button {
  border: 1px solid var(--c-red);
  border-radius: var(--size-step-0);
  background: var(--c-light);
  padding: 0 .75em;
  margin: 0 .25em .5em 0;
  &:hover {
    cursor: pointer;
    background: var(--c-gold);
  }
  &.active {
    color: var(--c-light);
    background: var(--c-red);
  }
}
.hidden {
  display: none;
}

#buttonsDiv,
#linksDiv {
  padding: .5em;
  background: rgba(0,0,0,.025);
  margin-bottom: 1em;
}
#buttonsCounter:after {
  content: " categories"
}
#linksCounter:after {
  content: " links"
}

a {
  border-bottom: 1px dashed rgba(255,0,0,1);
  padding-bottom: 0.25em;
  margin-bottom: 0.25em;
  display: block;
}