/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #fcfc0f;
    text-shadow: none;
}

::selection {
    background: #fcfc0f;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

textarea {
    resize: vertical;
}

/*@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 500;
  src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
       url("../fonts/Inter-UI-Medium.woff") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 500;
  src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
       url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
}*/

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-display: optional;
  font-weight: 700;
  src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
       url("../fonts/Inter-UI-Bold.woff") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-display: optional;
  font-weight: 700;
  src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
       url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
}



body {
    font-family: 'Inter UI', Inter UI, Helvetica, Helvetica Neue, Arial;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 28px;
    /*background: #abcee4;*/
    /*text-transform: uppercase;*/
    padding-bottom: 5rem;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
    font-family: 'Inter UI', Inter UI, Helvetica, Helvetica Neue, Arial;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 28px;
    font-weight: 700;
}

h1, h2, h3 {
    background: #fcfc0f;
    display: inline;
    text-transform: uppercase;
}

a {
    color: inherit;
    text-decoration: none;
    border-bottom: 5px solid #fcfc0f;
}
a:hover {
    background: #fcfc0f;
}

p+h2, ul+h2, h2+ul {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    padding-left: 1.84em;
    text-indent: -1.84em;
}

li:before {
    content: "—";
    padding-right: 1rem;
}

nav {
    margin-top: 1em;
    text-transform: uppercase;
}

nav li {
    padding: 0;
    text-indent: 0;
}
nav li:before {
    content: none;
    padding: 0;
}





/* ==========================================================================
   Media Queries
   ========================================================================== */



@media only screen and (min-width: 768px) {

    h1, h2, h3, h4, h5, h6, p, ul, ol {
    font-size: 30px;
    letter-spacing: -0.015em;
    line-height: 42px;
    font-weight: 500;
}

li {
    padding-left: 0;
    text-indent: -1.5em;}

li:before {
    content: "—";
    padding-right: 1rem;
}


/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 600px;
        margin: 5rem;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 800px;
        margin: 5rem;
        transform: rotate(-0.6deg);
    }



}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.scramble {
    color: transparent;
    background: transparent;
    margin-right: -1ex;
}

.scramble2 {
    color: transparent;
    background: transparent;
    margin-right: -2ex;
}

.scramble3 {
    color: transparent;
    background: transparent;
    margin-right: -3ex;
}


.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}