@font-face {
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('type/RobotoSerif.woff2') format('woff2');
}

/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 100 to 1000 */

.roboto-flex-custom-instance {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    'GRAD' 23, 'XOPQ' 27, 'XTRA' 603, 'YOPQ' 25, 'YTAS' 649, 'YTDE' -98, 'YTFI' 560, 'YTLC' 570, 'YTUC' 636, 'slnt' 0, 'wdth' 151;
  }

body {
    max-width: 720px;
    color: #3d3d3d;
    line-height: 150%;
    margin: auto;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1 {
    font-size: 80px;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    'GRAD' 23, 'XOPQ' 27, 'XTRA' 603, 'YOPQ' 25, 'YTAS' 649, 'YTDE' -98, 'YTFI' 560, 'YTLC' 570, 'YTUC' 636, 'slnt' 0, 'wdth' 151;
}

h2 {
    font-size: 40px;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    'GRAD' 23, 'XOPQ' 27, 'XTRA' 603, 'YOPQ' 25, 'YTAS' 649, 'YTDE' -98, 'YTFI' 560, 'YTLC' 570, 'YTUC' 636, 'slnt' 0, 'wdth' 151;
}

h3 {
    font-size: 20px;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    'GRAD' 23, 'XOPQ' 27, 'XTRA' 603, 'YOPQ' 25, 'YTAS' 649, 'YTDE' -98, 'YTFI' 560, 'YTLC' 570, 'YTUC' 636, 'slnt' 0, 'wdth' 151;
}

p {
    font-family: 'Roboto Serif';
    font-size: 20px;
    font-weight: 300;
    line-height: 200%;
}