div.container { width: 100%; border: 1px solid gray; } p.serif { font-family: "Klinic Slab"; } /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 10, 2017 */ @font-face { font-family: 'klinic_slabbold'; src: url('klinicslabbold.eot'); src: url('klinicslabbold.eot?#iefix') format('embedded-opentype'), url('klinicslabbold.woff') format('woff'), url('klinicslabbold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'klinic_slabbold_italic'; src: url('klinicslabboldit.eot'); src: url('klinicslabboldit.eot?#iefix') format('embedded-opentype'), url('klinicslabboldit.woff') format('woff'), url('klinicslabboldit.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'klinic_slabbook'; src: url('klinicslabbook.eot'); src: url('klinicslabbook.eot?#iefix') format('embedded-opentype'), url('klinicslabbook.woff') format('woff'), url('klinicslabbook.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'klinic_slabbook_italic'; src: url('klinicslabbookit.eot'); src: url('klinicslabbookit.eot?#iefix') format('embedded-opentype'), url('klinicslabbookit.woff') format('woff'), url('klinicslabbookit.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'klinic_slablight'; src: url('klinicslablight.eot'); src: url('klinicslablight.eot?#iefix') format('embedded-opentype'), url('klinicslablight.woff') format('woff'), url('klinicslablight.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'klinic_slablight_italic'; src: url('klinicslablightit.eot'); src: url('klinicslablightit.eot?#iefix') format('embedded-opentype'), url('klinicslablightit.woff') format('woff'), url('klinicslablightit.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'klinic_slabmedium'; src: url('klinicslabmedium.eot'); src: url('klinicslabmedium.eot?#iefix') format('embedded-opentype'), url('klinicslabmedium.woff') format('woff'), url('klinicslabmedium.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'klinic_slabmedium_italic'; src: url('klinicslabmediumit.eot'); src: url('klinicslabmediumit.eot?#iefix') format('embedded-opentype'), url('klinicslabmediumit.woff') format('woff'), url('klinicslabmediumit.ttf') format('truetype'); font-weight: normal; font-style: normal; } div.gallery { margin: 25px; border: 1px solid #ccc; width: 200px; float: right; padding-right: 75px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } header, footer { padding: 1em; color: white; background-color: #CF1C44; clear: right; text-align: center; } body { background-color: #d8c6b8; } h1 { color: white; font-family: "Goudy Old Style"; text-align: center; } h2 { color: white; font-family: "Goudy Old Style"; text-align:left; } p { font-family: "Klinic Slab"; font-size: 20px; color: darkgreen; } ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; font-family: "Klinic Slab"; position: absolute; overflow: auto; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: #0b9446; color: white; } li a:hover:not(.active) { background-color: #5e1211; color: white; } article { margin-right: 170px; border-right: 1px solid gray; padding: 1em; font-family: "Klinic Slab"; font-size: 20px; overflow: hidden; }