*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #fff;--bg-color2: whitesmoke;--text-color: #333;--timer-color: green;--timer-color2: purple;--acti-color: #000;--acti-color2: purple;--fn-size1: clamp(14px, 3vw, 16px)}body{min-height:100vh;background-color:var(--bg-color2);color:var(--text-color);display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--fn-size1);font-size:var(--fn-size1);font-family:roboto,sans-serif}.fourm{margin-bottom:20vh;background-color:var(--bg-color);border:var(--text-color) solid 3px;padding:2rem;border-radius:1rem;max-width:80vw}.logs{display:flex;gap:2rem;padding-bottom:.5rem}.timer{display:flex;justify-content:center;align-items:center;flex-direction:column}.title{font-size:clamp(2rem,5vw,5rem);font-weight:700}.begining{color:var(--text-color);font-size:2rem}.dormat,.active{color:var(--font-color);font-size:2rem}.dormat:last-of-type{color:var(--timer-color2);font-size:2rem}.active:last-of-type{color:var(--timer-color);font-size:2rem}.timerButton{max-width:30%;min-width:20%;padding:.5rem;border-radius:.5rem;font-size:var(--fn-size1);border:var(--text-color) solid 2px;background-color:var(--bg-color2);color:var(--text-color);cursor:pointer;transition:all .2s ease-in-out;gap:1rem}.timerButton:hover{background-color:var(--text-color);color:var(--bg-color)}.timerButton:active{background-color:var(--acti-color);color:var(--acti-color2);transform:scale(.9)}.startStopButton,.resetButton{max-width:30%;min-width:20%;padding:.5rem;border-radius:.5rem;font-size:var(--fn-size1);border:var(--text-color) solid 2px;background-color:var(--bg-color2);color:var(--text-color);cursor:pointer;transition:all .2s ease-in-out}.startStopButton:hover,.resetButton:hover{background-color:var(--text-color);color:var(--bg-color)}.startStopButton:active,.resetButton:active{background-color:var(--acti-color);color:var(--acti-color2);transform:scale(.9)}.extras{margin-top:.7rem;display:flex;gap:.7rem;justify-content:center;align-items:center}button{font-family:inherit}@media (prefers-color-scheme: dark){:root{--bg-color: #000;--bg-color2: #222;--text-color: #aaa;--timer-color: purple;--timer-color2: green;--acti-color: #fff;--acti-color2: green}body{background-color:var(--bg-color2);color:var(--text-color)}.fourm{background-color:var(--bg-color);border:var(--text-color) solid 3px}.begining{color:var(--text-color)}.dormat,.active{color:var(--font-color)}.dormat:last-of-type{color:var(--timer-color2)}.active:last-of-type{color:var(--timer-color)}.timerButton{font-size:var(--fn-size1);border:var(--text-color) solid 2px;background-color:var(--bg-color2);color:var(--text-color)}.timerButton:hover{background-color:var(--text-color);color:var(--bg-color)}.timerButton:active{background-color:var(--acti-color);color:var(--acti-color2)}.startStopButton,.resetButton{font-size:var(--fn-size1);border:var(--text-color) solid 2px;background-color:var(--bg-color2);color:var(--text-color)}.startStopButton:hover,.resetButton:hover{background-color:var(--text-color);color:var(--bg-color)}.startStopButton:active,.resetButton:active{background-color:var(--acti-color);color:var(--acti-color2)}}