:root{--bg-color:#efefef;--fg-color:#2f2f2f;--primary-color:#00a0a0;--primary-contrast-color:var(--bg-color)}:root:has(>* #dark-mode:checked ){--bg-color:#2f2f2f;--fg-color:#efefef;--primary-color:#eebe00}#dark-mode,#dark-mode{display:none}#dark-mode+label{color:var(--primary-contrast-color)}#dark-mode+label:after{content:'🌙';margin-left:1em;cursor:pointer;font-size:16px;color:transparent;text-shadow:0 0 0 var(--primary-color),5px 0 5px var(--primary-contrast-color),-5px 0 5px var(--primary-contrast-color),0 5px 5px var(--primary-contrast-color),0 -5px 5px var(--primary-contrast-color)}#dark-mode:checked+label:after{content:'☀️'}body{background-color:var(--bg-color);color:var(--fg-color);font-family:sans-serif;line-height:1.5;margin:0 auto;width:calc(100% - 5rem);max-width:768px}main{padding-bottom:2rem}a{color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{a { color: var(--fg-color); } a:hover { text-decoration: underline; } a::before { content: "🔗"; color: transparent; font-size: 15px; text-shadow: 0 0 0 var(--fg-color); }}nav{width:100%;height:40px;display:flex;justify-content:space-between;flex-direction:row;background-color:var(--primary-color);label { vertical-align: middle; line-height: 40px; margin: 0 10px; } ul { display: flex; justify-content: flex-end; flex-direction: row; margin-top: 0; li { list-style: none; a, a:visited { color: var(--primary-contrast-color); font-size: 25px; margin-right: 30px; } } }}@media(max-width:460px){body{width:100vw}main{margin:0 10px}nav{flex-direction:column;height:auto;label { text-align: right; margin-right: 30px; } ul { flex-direction: column; li { margin-left: auto; } }}}