css-inline.html

<style>

    html, body {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Roboto';
      padding-top: 50px;
    }

    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: local('Roboto'), url('fonts/Roboto-Regular.woff2') format('woff2'), url('fonts/Roboto-Regular.ttf') format('ttf');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Roboto';
    }

    .big-image {
      width: 100%;
      height: 700px;
      position: relative;
    }

    .big-image picture {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
    }

  </style>


  <link href="/styles.css" rel="preload" as="style"/>