* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --paper: #f8f5ec;
  --ink: #1f2328;
  --ink-deep: #2563eb;
  --ink-soft: #1f2328;
  --rule: #1f2328;
}

body {
  font-family: "ocr-b-std", monospace;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.03em;
  color: var(--ink);
  background: var(--paper);
  max-width: 680px;
  margin: 60px auto;
  padding: 0 24px;
}

.footer {
  margin-top: 80px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
}

.footer a {
  font-size: 0.85rem;
  white-space: nowrap;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.mich-m {
  width: 46px;
  height: 46px;
  border-radius: 5px;
  flex-shrink: 0;
}

.profile-pic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: #c9c3b5;
  flex-shrink: 0;
}

h1 {
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-deep);
}

ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 40px;
}

li { margin-bottom: 10px; color: var(--ink-soft); }

a {
  color: var(--ink-deep);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  display: inline-block;
}

@keyframes shadows-1 {
  0% { text-shadow: none; }
  10% { text-shadow: 3px 3px 0 var(--color-2); }
  20% { text-shadow: 3px 3px 0 var(--color-2), 6px 6px 0 var(--color-3); }
  30% { text-shadow: 3px 3px 0 var(--color-2), 6px 6px 0 var(--color-3), 9px 9px var(--color-4); }
  40%, 60% { text-shadow: 3px 3px 0 var(--color-2), 6px 6px 0 var(--color-3), 9px 9px var(--color-4), 12px 12px 0 var(--color-5); }
  70% { text-shadow: 3px 3px 0 var(--color-2), 6px 6px 0 var(--color-3), 9px 9px var(--color-4); }
  80% { text-shadow: 3px 3px 0 var(--color-2), 6px 6px 0 var(--color-3); }
  90% { text-shadow: 3px 3px 0 var(--color-2); }
  100% { text-shadow: none; }
}

@keyframes move-1 {
  0%, 100% { transform: translate(0px, 0px); }
  40%, 60% { transform: translate(-12px, -12px); }
}

.anim-1 { --color-1:#5192ED; --color-2:#69A1F0; --color-3:#7EAEF2; --color-4:#90BAF5; --color-5:#A2C4F5; }
.anim-2 { --color-1:#F6ACA2; --color-2:#F49B90; --color-3:#F28B7D; --color-4:#F07A6A; --color-5:#EE6352; }
.anim-3 { --color-1:#8FDED8; --color-2:#7BD9D2; --color-3:#69D4CC; --color-4:#57CFC6; --color-5:#45C9C0; }
.anim-4 { --color-1:#C4A1FF; --color-2:#B591FF; --color-3:#A681FF; --color-4:#9871FF; --color-5:#8961FF; }
.anim-5 { --color-1:#FFD166; --color-2:#FFCC52; --color-3:#FFC83E; --color-4:#FFC32A; --color-5:#FFBF16; }
.anim-6 { --color-1:#FF8FB8; --color-2:#FF7AA8; --color-3:#FF6598; --color-4:#FF5088; --color-5:#FF3B78; }
.anim-7 { --color-1:#A8E6A1; --color-2:#92DD8C; --color-3:#7CD477; --color-4:#66CB62; --color-5:#50C24D; }
.anim-8 { --color-1:#FFB07A; --color-2:#FFA163; --color-3:#FF924C; --color-4:#FF8335; --color-5:#FF741E; }
.anim-9 { --color-1:#9AD0FF; --color-2:#82C2FF; --color-3:#6AB4FF; --color-4:#52A6FF; --color-5:#3A98FF; }
.anim-10 { --color-1:#D6B4FC; --color-2:#C79EFB; --color-3:#B888FA; --color-4:#A972F9; --color-5:#9A5CF8; }
.anim-11 { --color-1:#F5E663; --color-2:#F0DC4D; --color-3:#EBD237; --color-4:#E6C821; --color-5:#E1BE0B; }
.anim-12 { --color-1:#5EEAD4; --color-2:#48DDC4; --color-3:#32D0B4; --color-4:#1CC3A4; --color-5:#06B694; }

a:hover {
  animation: shadows-1 1.2s ease-in infinite, move-1 1.2s ease-in infinite;
  color: var(--color-1);
}

nav a {
  font-size: 0.95rem;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink);
}

.mich-footer {
  display: block;
  margin: 24px auto 0;
  width: 56px;
  height: 56px;
  border-radius: 6px;
}