:root{--background-color: #ffffff;--main-color: #212529;--theme-transition: background-color .3s ease, color .3s ease;--animation-brightness: 50%;font-family:Kanit,sans-serif;font-size:14px}@property --main-color{syntax: "<color>"; inherits: true; initial-value: oklch(90% .3 29deg);}@keyframes cycle-solid-color{0%{--main-color: oklch(var(--animation-brightness) .3 29)}17%{--main-color: oklch(var(--animation-brightness) .3 80)}33%{--main-color: oklch(var(--animation-brightness) .3 136)}50%{--main-color: oklch(var(--animation-brightness) .3 180)}67%{--main-color: oklch(var(--animation-brightness) .3 265)}83%{--main-color: oklch(var(--animation-brightness) .3 300)}to{--main-color: oklch(var(--animation-brightness) .3 29)}}body.animated-color{animation:cycle-solid-color 5s linear infinite;color:var(--main-color)}body.dark-theme{--background-color: #212529;--main-color: #faf8fa;--animation-brightness: 90%}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--background-color);color:var(--main-color);height:100%;transition:var(--theme-transition)}body *{border-color:var(--main-color)}h1,h2,a{color:var(--main-color)}button{color:var(--main-color);background-color:var(--background-color)}.info-card{background-color:var(--card-background);padding:2rem;border-radius:8px;transition:var(--theme-transition);border:1px solid var(--main-color)}