@shawnsandy/mix/css/foundation.css

AtomMix--A toolkit for generating utility classes, components and styles-sheets for your design system, style-guide or website from SASS MAPS

@import url("https://fonts.googleapis.com/css?family=Roboto:400|Poppins:400");
h1,
h1,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
  color: inherit; }

p {
  line-height: 1.7; }

h1,
h2,
h3,
h4,
h5 {
  margin: 2.75rem 0 1.05rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.5; }

h1 {
  font-size: 4.209rem; }

h2 {
  font-size: 3.157rem; }

h3 {
  font-size: 2.369rem; }

h4 {
  font-size: 1.777rem; }

h5 {
  font-size: 1.333rem; }

small,
.text_small {
  font-size: 0.75rem; }

/**
 * navbar
 */
/**
 * base navbar
 */
/**
 * Nav links
 */
* {
  box-sizing: border-box; }

[role="button"] {
  text-decoration: none; }

button {
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 0;
  cursor: pointer; }
  @media screen and (-ms-high-contrast: active) {
    button {
      border: 2px solid currentcolor; } }

[role="button"],
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  background-color: blue;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
  padding: 0.25rem 1.2rem;
  min-width: 10ch;
  min-height: 44px;
  text-align: center;
  line-height: 1.1;
  transition: 220ms all ease-in-out; }
  [role="button"]:hover, [role="button"]:active,
  button:hover,
  button:active {
    background-color: #000066; }
  [role="button"]:focus,
  button:focus {
    outline-style: solid;
    outline-color: transparent;
    box-shadow: 0 0 0 4px #000033; }
  [role="button"]--small,
  button--small {
    font-size: 1.15rem; }
  [role="button"]--block,
  button--block {
    width: 100%; }