.dark,:root{--highdark-color:rgba(255, 255, 255, 0.2);transition:background .2s linear}#switch span,ul li a{background:var(--surface-color)}#perfil,#social-links,ul,ul li a{display:flex}#social-links,footer,ul{padding:24px 0}#perfil,footer{text-align:center}*{margin:0;padding:0;box-sizing:border-box}:root{--text-color:white;--bg-color:#FF4A57;--stroke-color:rgba(255, 255, 255, 0.5);--surface-color:rgba(255, 255, 255, 0.05);--surface-color-hover:rgba(0, 0, 0, 0.02);--switch-bg-url:url(../../assets/moon-stars.svg)}.dark{--text-color:#F6F6F6;--bg-color:#100F10;--stroke-color:rgb(255, 74, 87);--surface-color:rgb(255, 74, 87);--surface-color-hover:#FF4A57;--switch-bg-url:url(../../assets/sun.svg)}html{background-color:var(--bg-color)}body *{font-family:Inter,sans-serif;color:var(--text-color)}#container{width:100%;max-width:588px;margin:56px auto 0;padding:0 24px}#perfil{padding:24px;align-items:center;flex-direction:column}#perfil img{width:120px;border-radius:100%}#perfil p{font-weight:500;line-height:24px;margin-top:8px}#switch{position:relative;width:64px;margin:4px auto}#switch button{width:32px;height:32px;background:#fff var(--switch-bg-url) no-repeat center;border:0;border-radius:50%;position:absolute;top:50%;left:0;z-index:1;transform:translateY(-50%);animation:.2s slide-back}.dark #switch button{animation:.2s forwards slide-in}#switch button:hover{outline:8px solid var(--highdark-color)}#switch span{display:block;width:64px;height:24px;border:1px solid var(--stroke-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:9999px}ul{list-style:none;flex-direction:column;gap:16px}ul li a{align-items:center;justify-content:center;padding:16px 24px;border:1px solid var(--stroke-color);border-radius:8px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);text-decoration:none;font-weight:500;transition:.2s ease-in-out}ul li a:hover{background:var(--surface-color-hover);border:1px solid var(--text-color)}#social-links{justify-content:center;font-size:24px}#social-links a{display:flex;align-items:center;justify-content:center;padding:16px;transition:.4s ease-in-out;border-radius:50%}#social-links a:hover{background:var(--highdark-color)}footer{font-size:14px}@keyframes slide-in{from{left:0}to{left:50%}}@keyframes slide-back{from{left:50%}to{left:0}}