@import"https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";body{background-color:#1a1a58;color:#fff;margin:0}.timer{background-color:#282365;width:70dvw;padding:50px;border-radius:10px;margin:75px auto auto;height:700px}.clock{display:flex;justify-content:space-evenly;text-align:center;font-family:Fira Code;font-weight:100}.hours,.minutes,.seconds{font-size:60px}.clock p{font-size:20px}.clock-buttons{display:flex;flex-direction:column;justify-content:space-evenly;font-family:Fira Code;font-weight:100;margin-top:50px}.clock-in,.clock-out,.end-period{font-family:Fira Code;width:30dvw;margin:50px auto auto;height:65px;border-radius:10px;border:none;font-size:30px;color:#fff;background-color:#40389b;transition:.25s}.status-text{text-align:center;font-size:25px;margin:25px 0 0}.clock-in:hover,.clock-out:hover,.end-period:hover{cursor:pointer;background-color:#40389bbf;transition:.25s}@media screen and (max-width: 900px){.clock-in,.clock-out,.end-period{width:60dvw}}.details,.period-data{background-color:#282365;border-radius:50px;padding:25px;width:45dvw;margin:40px auto auto;font-family:Fira Code;display:flex;flex-direction:column;font-weight:100}.details h1,.period-data,.period-data h1{text-align:center;font-weight:100}.period-data{margin-bottom:40px}.start-period{width:30dvw;margin:auto;height:65px;border-radius:10px;border:none;font-family:Fira Code;font-size:30px;color:#fff;background-color:#40389b;transition:.25s}.start-period:hover{cursor:pointer;background-color:#40389bbf;transition:.25s}@media screen and (max-width: 900px){.details,.period-data{width:80dvw}.start-period{width:70dvw}}