* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair;
}
body {
cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair;
}
::selection {
background: yellow;
color: #111;
}
::-moz-selection {
background: yellow;
color: #111;
}
body {
font-family:
"Hiragino Mincho ProN",
"Yu Mincho",
"Times New Roman",
serif;
background: #ffffff;
color: #111;
max-width: 560px;
margin: 64px auto;
padding: 0 20px;
font-size: 14px;
line-height: 1.9;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Dark mode styles */
html.dark-mode body {
background: #111;
color: #e8e8e8;
}
html.dark-mode a {
color: #e8e8e8;
}
html.dark-mode footer {
color: #999;
}
html.dark-mode #darkModeToggle {
color: #999;
}
header {
margin-bottom: 48px;
}
h1 {
font-size: 18px;
font-weight: normal;
line-height: 1.5;
height: 27px;
}
nav {
margin-bottom: 48px;
}
nav a {
margin-right: 16px;
font-size: 13px;
}
section {
margin-bottom: 64px;
}
p {
margin-bottom: 16px;
}
a {
color: #000;
text-decoration: underline;
transition: opacity 0.2s ease;
cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair;
}
a:hover {
opacity: 0.6;
cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair;
}
#darkModeToggle {
cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair !important;
}
#darkModeToggle:hover {
opacity: 0.6;
cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair !important;
}
footer {
margin-top: 80px;
font-size: 12px;
color: #666;
}
/* Animations */
@keyframes fadeDown {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeSettle {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
header {
animation: fadeDown 0.6s ease-out both;
}
footer {
animation: fadeSettle 0.6s ease-out both;
animation-delay: 0.15s;
}
section {
animation: fadeSettle 0.6s ease-out both;
}
section > * {
animation: fadeSettle 0.6s ease-out both;
animation-delay: 0.1s;
}
@media (prefers-reduced-motion: reduce) {
header, section, section > *, footer {
animation: none !important;
transform: none !important;
}
}