@font-face { font-family: "CascadiaCode"; src: url("fonts/CascadiaCode.woff2"); } @font-face { font-family: "CascadiaCode"; src: url("fonts/CascadiaCodeItalic.woff2"); font-style: italic; } html { height: 100%; width: 100%; } * { box-sizing: border-box; } body { height: 95%; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; font-family: "CascadiaCode", sans-serif; letter-spacing: 1px; font-size: 13px; background-image: url(bg.gif); } #site { border: 1px solid #000; width: 600px; height: 600px; background-color: #faefe4; } #header { padding: 10px; border-bottom: 2px dotted #000; } #header h1 { font-family: "Playfair Display", serif; text-transform: lowercase; font-size: 40px; font-weight: normal; font-style: italic; display: table; width: 70%; margin: 0 auto; text-align: left; padding: 5px; } #header h2 { font-weight: normal; font-size: 13px; display: table; width: 70%; margin: 0 auto; text-align: right; padding: 5px; } #nav { padding: 10px; border-bottom: 2px dotted #000; } #content { padding: 10px; overflow: auto; height: 74%; } blockquote { width: 70%; border-left: 3px solid #808080; padding-left: 10px; margin: 20px auto 30px; text-align: left; } p { margin: 10px; } h3 { text-decoration: underline; font-style: italic; font-weight: normal; } ol { text-align: left; } ol li { margin-bottom: 10px; } #heart { display: table; margin: 0 auto; padding: 3px 7px; border: 1px solid #000; font-size: 16px; font-family: sans-serif; } a { color: #4db3da; } a:hover, a:visited { color: #268db5; } a:hover { text-decoration: underline; text-decoration-style: wavy; }