html {
  font-family: var(--font-primary);
  font-size: 100%;
  font-weight: normal;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: var(--font-size);
  line-height:1.5rem;
  color: var(--color-text);
  background: var(--color-background);
}

img, svg{
  display:block;
}

img.inline, svg.inline{
  display:inline-block;
}

h1{
  font-family: var(--font-secondary);
  font-weight:normal;
  font-size:calc(var(--font-size) * 1.5);
  line-height:calc(var(--font-size) * 1.5);
  margin-top:2rem;
  margin-bottom:1.25rem;
}

h2{
  font-weight:normal;
  text-align:center;
  font-size:calc(var(--font-size) * 1.25);
  line-height:calc(var(--font-size) * 1.25);
  margin-top:0;
  margin-bottom:1rem;
}

h3{
  font-weight:normal;
  margin-top:0;
  margin-bottom:0;
  font-family: var(--font-secondary);
  font-size:calc(var(--font-size) * 1.25);
  line-height:calc(var(--font-size) * 1.25);
}

p{
  margin:1rem 0;
}

div > p:first-child{
  margin-top:0;
}

a{
  text-decoration:none;
  transition:all .25s;
  -webkit-tap-highlight-color: transparent;
}

a:link, a:visited {
  color:var(--color-text);
}

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

strong{
  text-transform:uppercase;
  font-weight:normal;
  font-size:calc(var(--font-size) * 1.25);
}

.text-align-left{
  text-align:left;
}

.text-align-center{
  text-align:center;
}

.text-align-right{
  text-align:right;
}

.text--small{
  font-size: var(--font-size-small);
  line-height:1.5em;
}

.hide{
  visibility: hidden;
  transition: visibility 0.3s;
}
.show{
  visibility: visible;
}
.hidden{
  display:none;
}
.visible{
  display:block;
  opacity:1;
}

.logo{
  display:block;
  margin:0 auto 1rem;
  padding-top:1rem;
}