.App{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--background-color);transition:background-color .25s ease-in-out}h1{color:var(--primary-text-color)}h1 span{color:var(--toggle-fg)}.toggle-container{display:flex;align-items:center;justify-content:center;position:absolute;top:3em;right:2em}.toggle{display:none}.toggle-label{width:50px;height:25px;background-color:transparent;border-radius:25px;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}.slider{position:relative;height:100%;width:100%;background-color:#ccc;border-radius:25px;transition:background-color .3s ease;display:flex;align-items:center;justify-content:space-between;padding:0 5px}.icon{font-size:15px;transition:opacity .01s ease-in-out;pointer-events:none;position:absolute}.icon.sun{left:5px;color:#f39c12}.icon.moon{right:7px;color:#078de7}input:checked+.slider{background-color:#333}.slider:before{content:"";position:absolute;height:21px;width:21px;background-color:#fff;border-radius:50%;transition:transform .3s;left:2px}input:checked+.slider:before{transform:translate(25px)}.hidden{opacity:0}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}:root{--background-color: #f6f6f6;--foreground-color: #003cff;--primary-text-color: #0a0a0a;--secondary-text-color: #ffffff;--toggle-bg: #283452;--toggle-fg: #00a6ff}[data-theme=dark]{--background-color: #0a0a0a;--foreground-color: #567aff;--primary-text-color: #f6f6f6;--secondary-text-color: #0a0a0a;--toggle-bg: #f0eb9d;--toggle-fg: #ffd000}