@import url(https://fonts.googleapis.com/css?family=Roboto:300);

:root {
  --base-grid: 8px;
  --colour-white: #fff;
  --colour-black: #1a1a1a;
}
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

*,
:after,
:before {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background-position: 100%;
}

body {
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  top: 50%;
  font-size: 1.2em;
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;

}

strong {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -0.125rem;
    left: -0.5rem;
    right: -0.5rem;
    height: 0.75rem;


    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/664131/underline.svg');
    background-repeat: no-repeat;

    background-size: cover;
  }
}

p > strong {
  font-weight: 400;  

  &::after {
    // Specific positioning for smaller text
    bottom: -0.2rem;
    height: 0.5rem;
    left: -0.25rem;
    right: -0.25rem;
  }
}