
/* Mobile-first styles here
   ========================================================================== */

 a:link {

}

.site-title a {
  color: var(--black);
  text-decoration: none;
  border-bottom-style: none;
  font-weight: 800;
}

a:hover,
a:focus,
a:active {
  color: var(--blue);
}

a:active  {
  transition: color .3s;
}


.site-nav_list,
.site-nav_list li {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* Medium and Up - Targets everything larger than mobile
   ========================================================================== */

@media (--breakpoint-medium-and-up) {

  .site-nav_list li {
    display: inline-block;
  }

  .site-nav_list li::after {
    margin-left: .5em;
    margin-right: .5em;
    content: '•';
  }

  .site-nav_list li:last-child::after {
    margin-left: 0;
    margin-right: 0;
    content: '';
  }

}




/* Medium - only targets 1st breakpoint. Styles
   ========================================================================== */

@media (--breakpoint-medium) {

}




/* Large - only targets 2nd breakpoint.
   ========================================================================== */

@media (--breakpoint-large) {

}
