HTML

  
  <div class="container">
    <h1>Inventos Romanos</h1>
    <ol type="I">
      <li>Carreteras</li>
      <li>Periódicos</li>
      <li>Calendario</li>
      <li>Hormigón</li>
      <li>Alcantarillado</li>
      <li>Bomberos</li>
      <li>Graffits</li>
      <li>Maquillaje</li>
      <li>Calefacción</li>
      <li>Arcos</li>
      <li>Spas</li>
      <li>Departamentos</li>
    </ol>
  </div>
  

CSS

  
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

  .container {
    font-family: "Cinzel", serif;
    width: 300px;
    height: 500px;
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-image:
    url(../../assets/img/fondo-papel-grunge-vintage_1048-10911.avif);
    object-fit: cover;
    margin: 28px auto;
  }
  
  .container h1 {
    font-size: 2rem;
    line-height: 2.2rem;
    color: #2c2c2c;
    text-align: center;
  }
  
  .container ol {
    padding-left: 8%;
    color: #2c2c2c;
  }