@import url('https://fonts.googleapis.com/css2?family=Imprima&family=Playfair+Display:ital,wght@0,800;1,800&display=swap'); @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%; } body { height: 95%; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; font-family: 'CascadiaCode', sans-serif; letter-spacing: 1.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; 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; } 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: scroll; height: 72%; } blockquote { width: 70%; border-left: 3px solid #808080; padding-left: 10px; margin: 20px auto; margin-bottom: 30px; text-align: left; } p { margin: 10px; } ol { text-align: left; 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; }