:root{--font-family:Arial,Helvetica,sans-serif;--light-bg-color:#f9f9f9;--light-text-color:#333;--dark-bg-color:#161618;--dark-text-color:#f9f9f9;--header-footer-color-light:#555;--header-footer-color-dark:#cccccc;--link-color-light:#7d7d7d;--link-color-dark:#dcdcdc;--border-color-light:#ddd;--border-color-dark:#555;--card-bg-light:#fff;--card-bg-dark:#252528;--button-bg-light:#343434;--button-text-color-light:rgb(222,222,222);--button-bg-dark:#f0f0f0;--button-text-color-dark:rgb(37,37,37);--transition-duration:0.3s;--padding:8px;--border-radius:8px;--box-shadow-light:rgba(0,0,0,0.1);--box-shadow-dark:rgba(0,0,0,0.2);--dim-text:0.9;--default-margin:8px}body{--bg-color:var(--dark-bg-color);--text-color:var(--dark-text-color);--card-bg-color:var(--card-bg-dark);--border-color:var(--border-color-dark);--button-bg-color:var(--button-bg-dark);--button-text-color:var(--button-text-color-dark);--header-footer-color:var(--header-footer-color-dark);--link-color:var(--link-color-dark)}body.light{--bg-color:var(--light-bg-color);--text-color:var(--light-text-color);--card-bg-color:var(--card-bg-light);--border-color:var(--border-color-light);--button-bg-color:var(--button-bg-light);--button-text-color:var(--button-text-color-light);--header-footer-color:var(--header-footer-color-light);--link-color:var(--link-color-light)}body{font-family:var(--font-family);margin:var(--default-margin)auto;padding:0;background-color:var(--bg-color);color:var(--text-color);transition:background-color var(--transition-duration),color var(--transition-duration);width:80%;height:100%}header{display:flex;justify-content:space-between;align-items:center;margin:var(--default-margin)auto;color:var(--header-footer-color);margin-top:8px}header div{display:flex;align-items:center;justify-content:space-between}header img{height:32px}header nav ul{list-style:none;display:flex;gap:1rem}header a{text-decoration:none;color:var(--link-color);font-weight:bold;transition:color var(--transition-duration)}footer{display:flex;justify-content:space-between;align-items:center;margin:var(--default-margin)auto;color:var(--header-footer-color);margin-top:auto;margin-bottom:8px}p{font-size:14px;opacity:var(--dim-text)}.hero{width:100%;height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.hero img{width:176px;border-radius:50%;margin:16px}.hero h1,.hero h4{margin:0}.hero h4{margin-bottom:16px;color:#b1b1b1}.hero p{margin:2px;color:#b1b1b1}.hero button{margin-top:16px}.icon-link{display:flex;justify-content:center;margin:var(--default-margin)auto}.icon-link a{font-size:28px;color:rgb(170,170,170);padding:8px;transition:color var(--transition-duration)}.icon-link a:hover{color:var(--link-color)}.container{margin:auto}.card-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px;padding:10px 0}.card{background-color:var(--card-bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:15px;box-shadow:0 2px 4px var(--box-shadow-light);transition:box-shadow var(--transition-duration);display:flex;flex-direction:column;justify-content:space-between}.card h3{margin-bottom:2px}.card button{width:100%;margin-top:auto}.card:hover{box-shadow:0 4px 8px var(--box-shadow-dark)}button{background-color:var(--button-bg-color);color:var(--button-text-color);padding:var(--padding)20px;border-radius:32px;transition:background-color var(--transition-duration);font-weight:bold;border:none;cursor:pointer}.theme-switch input{display:none}.theme-switch{position:relative;display:inline-block;width:28px;height:18px}.slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#a5a5a5;border-radius:8px;cursor:pointer;transition:background-color var(--transition-duration)}.slider:before{position:absolute;left:-1px;bottom:1px;content:'🌘';font-size:14px;transition:transform var(--transition-duration),content var(--transition-duration)}input:checked+.slider{background-color:#7e7e7e}input:checked+.slider:before{transform:translateX(10px);content:'☀️'}.badge{border-color:#536adb;border-style:solid;border-width:2px;border-radius:4px;padding:2px 8px;text-wrap:nowrap}