@import url('https://fonts.googleapis.com/css2?family=Passions+Conflict&display=swap');

html {
  padding: 0;
  margin: 0;
}

body {
	 
  background-color: rgba(206, 194, 174, 0.24);
  padding: 2rem;
  font-size: 16px;
  max-width: 109ch;
  margin: 0 auto;
  font-family: 'Times New Roman', Times, serif;
  border-left: double 5px rgba(0,0,0,.16);
  min-height: 100vh;
  box-sizing: border-box;
}
body:before{
	display: block;
	content: '';
	height: 56px;
}
img {
  max-width: 100%;
}

p {
 font-size:1.3em;
	line-height:2em;
}

p:first-of-type::first-letter {
  font-size: 2em;
  float: left;
  line-height: .5;
  font-family: 'Passions Conflict', cursive;
}

blockquote {
  font-family: 'Passions Conflict', cursive;
  font-size: 2em;
  line-height: 1;
}

/** Using Circle() **/
/* img.compass {
  aspect-ratio: 1;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  margin-left: 1rem;
  float: right;
} */

/** Using Border Radius **/
img.compass {
  aspect-ratio: 1;
  float: left;
  margin-left: 1rem;
  border-radius: 50%;
  shape-outside: margin-box;
}
.title{
    position: relative;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
    color: #999;
	margin-top: 30px;
	margin-bottom: 30px;
}
.title::before,.title::after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    position: absolute;
    background: #ccc;
    top: 50%;
}
.title::before{
    margin-left: -10px;
    transform: translateX(-100%);
}
.title::after{
    margin-left: 10px;
}
/* 
At the time of writing the book, this will not work because the use of path() with shape-outside
although part of the specification, has not yet been implemented by any browser
img.dog {
  float: left;
  shape-outside: path('M21.9135,115.62c-17.2115,4.7607-36.3354,57.1285-1.1428,56.3036a3.9343,3.9343,0,0,0,2.8034-1.8256c2.1376-2.9063-.8524-6.9811-4.1664-8.4259-2.6808-1.1686-7.07-.4242-6.81,2.4784.1536,1.72,1.9682,2.726,3.56,3.41a220.7536,220.7536,0,0,0,28.3165,9.9429c1.6753.463,3.57.8816,5.0689.0044,2.1708-1.27,2.1148-4.65.5376-6.6045s-4.1014-2.8382-6.49-3.6309c6.0709-.9832,11.0726-6.0513,12.6467-11.9718s-.03-12.4323-3.5841-17.43c-4.02-5.6521-10.7732-9.5639-17.7207-9.2391s-22.5806,25.0749-14.931,25.0749c7.65.9521,4.7809-40.9421,21.0608-61.6733,6.9891-8.9,28.6612-27.8281,27.262-16.2527-.0917,3.1568-5.6715,2.8379-6.743-.1346s.7347-6.1384,2.4677-8.7834c5.087-7.7638,8.2371-9.1756,13.324-16.94-3.1564,3.9756-12.4305-10.4736-12.4305-25.7078,2.8423-1.7142,2.5031,13.5363-.64,14.61C42.95,46.1134,51.5554,9.932,63.3343,9.5892c2-.0582,2.18-4.4668,4.1635-4.2038,12.7434,1.69,21.1917-1.57,22.8707-2.81,3.2505-2.401,7.81-1.3413,11.6671-.1223,6.8881,2.1766,10.23,6.4646,14.5409,12.24s1.9124,19.0429-4.7809,21.8993c-6.6934,0-2.44-18.096-7.65-22.8514C92.6717,3.267,93.3027,2.927,94.5841,1.3627,96.92-1.4892,98.7548,13.2806,103.19,17.5492c5.8565,5.6365,1.2974,49.1031-21.0362,34.2771-8.6057-5.7129,24.861,7.6171,24.861-6.665,0-8.9825,32.5106,19.0428,9.703,77.5989-2.3918,6.1407-5.4823,13.4107-3.01,19.52,2.68,6.62,0,24.7557,9.5619,27.6121,6.6676,1.9918-1.1815,9.4092-12.4305,3.8086-7.65-3.8086-9.8443-26.334-10.5181-32.3729-3.8248-34.2771-18.1553,3.6954-18.1677,11.4257-.0083,5.1828-.9934,13.0033,0,18.0907s6.1408,10.9694.9562,11.4257c-13.3867,1.9043-10.0781-13.9242-12.8652-24.1-3.6559-13.348-7.3392-27.2818-4.6422-40.8541.5813-2.9256,2.0434-6.3252,5.0159-6.6891,2.9242-.358,5.2846,2.7338,5.4481,5.663s-1.1384,5.71-2.0595,8.4965c-2.71,8.1978-2.2133,17.1383-4.52,25.4574-2.7717,9.995-15.7412,19.8434-16.975,22.5053-5.7371,12.3779,14.2968,16.5748,18.3621,14.8264s19.2847-2.5979,23.71-2.4485c4.3943.1483.6491,4.2159,4.781,5.7128,8.6639,3.1389,32.4228-.7518,41.1163-3.8085,24.9553-8.7747-.9562-22.8515-11.4743-34.2772');
} 
*/

img.dog {
  aspect-ratio: 126 / 161;
  float: right;
  shape-outside: url('https://raw.githubusercontent.com/michaelgearon/Tiny-CSS-Projects/960311cb3deabdaecabf838cc702837e58239ae9/chapter-07/after/img/dog.svg');
  shape-margin: 1em;
  margin-right: 1em;
}