@use 'colors';
@use 'layout';

body {
  margin: 0;
  color: colors.$main-text;
}

h2 {
  margin: layout.$normal-gap 0 layout.$large-gap 0;
  font-size: 2.2rem;
  line-height: 4rem;

  &:after {
    content: '';
    display: block;
    width: 8rem;
    height: 0.3rem;
    border-radius: 0.5rem;
    background-color: colors.$blue-800;
  }
}

h3 {
  margin: layout.$normal-gap 0;
  font-size: 1.6rem;
  line-height: 2rem;
}

section > h2:first-child {
  margin-top: 0;
}

p {
  margin: layout.$normal-gap 0;
}

a {
  color: colors.$main-text;

  &:hover {
    color: colors.$blue-800;
  }
}