@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%;
}

.centered {
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  top: 50%;
}
body{
  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;
  }
}

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width:100%;
  text-align:center;
  
}


li a.navbar {

  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li {
	float:left;
}
li a:hover.navbar {
  background-color: #111;
}

#active {
  background-color: #4CAF50;
}


