html { background: #eee; color: #444; font-family: "Gentium Basic", serif; min-height: 80%; display: flex; flex-flow: column; align-items: center; justify-content: center; } body { max-width: 30em; margin: auto; padding: 2em; font-size: 16px; line-height: 1.5em; } h1, p { margin: 0; } a { color: inherit; text-decoration: none; border-bottom: 1px solid #bbb; } a:hover { color: #08f; border-bottom-color: #08f; } h1 a { border-bottom: none; } h1 a:hover { color: inherit; cursor: default; } header { margin: 0 0 1em; } h1 { font-weight: normal; font-size: 2em; } h1, .ipa, .dfn { text-align: center; } .ipa { color: #888; margin: 0; letter-spacing: 0.05em; } img.profile { display: block; margin: 0 auto 1em; width: 6em; max-width: 50%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid #666; shape-outside: margin-box; } .icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; } .contact { display: flex; flex-wrap: wrap; list-style-type: none; margin: 1em -1em; padding: 0; } .contact li { flex: 1 0 6em; list-style-type: none; display: inline-block; margin: 0.5em 1em; padding: 0; } .contact a { display: inline-block; margin-left: 2.4em; height: 1.5em; } .contact a .icon { padding-right: 0.5em; width: 1.7em; height: 1.7em; vertical-align: bottom; margin-left: -2.4em; } .contact a:hover { color: #08f; } #contact-section footer { font-size: 0.8em; line-height: 1.5em; } code { font-size: 0.8em; } @media (prefers-color-scheme: dark) { html { background: #333; color: #aaa; } img.profile { border-color: #999; } a { border-bottom: 1px solid #555; } } @media (min-width: 400px) { body { font-size: 18px; } } @media (min-width: 480px) { h1 { margin-right: 0.5em; } h1, .ipa { display: inline-block; } h1, .ipa, .dfn { text-align: left; } img.profile { float: right; margin: -0.5em 0em 0.5em 0.5em; max-width: 20%; } } @media (min-width: 800px) { body { font-size: 20px; } }