@font-face {
  font-family: "Haskoy";
  src: url("../fonts/Haskoy-variable.ttf");
}

/*font-feature-settings: 
 * "dlig"
 * "liga"
 * "case"
 * "tnum"
 * "ss01"
 * "ss02"
 * "ss03"
 * "ss04"
 * "ss05"
 * "ss06"
 * "ss07"
 * */
@font-face {
  font-family: "TangerineRegular";
  src: url("../fonts/TangerineRegular.ttf");
}
:root {
    --white: #FFF;
    --light: #e9e9e9;
    --dark: #000;
    --display: "TangerineRegular";
    --body: "Haskoy";
}

* {
    transition: all 400ms ease-in;
}

body {
    background-color: var(--white);
    color: var(--dark);
    font-family: var(--body);
    font-weight: 350;
    font-feature-settings: "ss04";
    transition: 400ms all ease-in;
}

h1 {
    font-family: var(--display); 
    font-size: 98px;
    color: #2a2a2a;
    margin-bottom: 10px;
}
.emphasis:hover {
    font-weight: 600;
}

.centered {
    text-align: center;
    margin: 0 auto;
}
p, li {
    font-family: var(--body); 
    font-size: 18px; 
    line-height: 31px;
}

.container-fixed {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}


.story p {
   max-width: 900px; 
}


@media screen and (max-width: 640px) {
    .container-fixed {
        padding: 0 40px;
    }
        h1 {
        font-size: 60px;
    }
}