*,
*:after,
*:before {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* html element 62.5% font-size for REM use */

@font-face {
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1,
h2,
p:not(.footnote) sup {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    font-size: 19px;
    line-height: 1.618;
}

main {
    box-sizing: border-box;
}

/*phone*/
@media (max-width: 500px) {
    main {
        width: 100%;
        padding: 32px 24px;
    }

    h1,
    h2 {
        font-size: 19px;
        line-height: 30.74px;
        margin-bottom: 32px;
    }

    p {
        font-size: 12px;
        line-height: 19px;
    }

    p:not(.footnote) {
        width: 100%;
        margin: 16px 0;
    }

    ul.footnotes {
        margin-top: 48px;
    }

    ul.footnotes li.footnote {
        font-size: 12px;
        line-height: 19px;
    }

    ul.footnotes li.divider {
        margin-top: -1px;
        padding-bottom: 16px;
        width: 100%;
    }

/*    main li.footnote {
        padding-left: 13px
    }*/

    ul.footnotes a {
        background-size: 100% 40%;
    }

}

/*macbook 13"*/
@media (min-width: 500px) {
    main {
        max-width: 1024px;
        padding: 96px;
    }

    h1,
    h2 {
        font-size: 31px;
        line-height: 47px;
    }

    h1 {
        margin-bottom: 32px;
    }

    h2 {
        margin-bottom: 48px;
    }

    p:not(.footnote) {
        width: 75%;
        margin: 32px 0;
    }

    ul.footnotes {
        margin-top: 56px;
    }

    ul.footnotes li.footnote {
        font-size: 12px;
        line-height: 21px;
    }

    ul.footnotes li.divider {
        margin-top: -1px;
        width: 61px;
    }

/*    main li.footnote {
        padding-left: 20px
    }*/

    ul.footnotes a {
        background-size: 100% 50%;
    }

}

/*big window*/
/* @media (min-width: 105.0625em) {
    main {
        width: 16810px;
        padding: 96px;
    }

    h1,
    h2 {
        font-size: 31px;
        line-height: 71px;
    }

    h1 {
        margin-bottom: 61px;
    }

    h2 {
        margin-bottom: 77px;
    }

    p {
        font-size: 31px;
        line-height: 50px;
    }

    p:not(.footnote) {
        width: 75%;
        margin: 46px 0;
    }

    ul.footnotes {
        margin-top: 77px;
    }

    ul.footnotes li.footnote {
        font-size: 19px;
        line-height: 30.74px;
    }

    ul.footnotes li.divider {
        border-top-width: 2px!important;
        margin-top: -2px;
        margin-bottom: 15px;
        width: 92px;
    }

/*    main li.footnote {
        padding-left: 43px
    }*/

    ul.footnotes a {
        background-size: 100% 50%;
    }
} */

/*animation*/
h1 span.highlight {
    background: linear-gradient(to bottom, transparent 55%, #ff7e74 0) left/0% 100% no-repeat;
    transition: background .7s ease-in;
    padding: 2px 0 1px;
}

h1:active span.highlight,
h1:hover span.highlight {
    background-size: 100% 100%;
    transition: background .5s ease-out
}

::-moz-selection {
    background: #ff7e74;
}
::selection { 
    background: #ff7e74;
}


h2 a {
    background-size: 100% 40%;
}

p {
    color: rgba(0, 0, 0, .8);
}

p span {
    white-space: nowrap;
}

p:not(.footnote) sup {
    font-size: .65em;
    position: relative;
    top: -.65em;
    display: inline-block;
    margin-left: .25em;
}

p a {
    color: #000;
}

ul.footnotes {
    color: rgba(0, 0, 0, .8);
}

ul.footnotes li.footnote span.new {
    display: inline-block;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

ul.footnotes li.footnote span.new sup {
    color: #000;
    text-transform: uppercase;
    background-color: #ff0;
    padding: 2px 2px 0;
    margin-left: -1px;
}

ul.footnotes li.footnote sup {
    font-size: .75em;
    position: relative;
    top: -.5em;
}

ul.footnotes li.footnote a:hover {
    background-size: 100% 100%;
}

ul.footnotes li.divider {
    display: block;
    margin-bottom: 9px;
    border-top: 1px solid rgba(0, 0, 0, .4);
}

/*animation*/
a {
    padding: 2px 0 1px;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(to bottom, transparent 0, #ff7e74 0) center bottom/100% 40% no-repeat;
    transition: background .066s ease-in;
}
a:hover {
    background-size: 100% 100%;
}
