:root{--clr-blank-t-up:hsl(0, 0%, 50%, .5);--clr-blank:hsl(0, 0%, 50%)}.main-content{min-height:100vh}.sw-app{background-color:var(--clr-neutral-sc-t);border-radius:5px;box-shadow:var(--sd);display:flex;flex-direction:column;margin:1rem auto;max-width:500px;padding:1rem;width:100%;outline:1px solid var(--clr-blue-t)}.sw-app h1{font-size:4rem;color:var(--clr-blue);text-align:center;font-weight:700}.timer{background-color:var(--clr-blue-t);border:1px solid var(--clr-blue);display:flex;justify-content:center;margin:1rem auto;padding:1rem;width:fit-content}.timer span:nth-child(even){padding:0 5px}.timer span:nth-child(odd){background-color:var(--clr-neutral-sc-t);box-shadow:inset var(--sd-dim);display:flex;justify-content:center;padding:0 .5rem}.timer span{font-size:8vw;font-weight:700;color:var(--clr-white);font-family:monospace;border-radius:5px}@media screen and (min-width:510px){.timer span{font-size:3.5rem}}.sw-ctl{display:flex;gap:1rem;justify-content:stretch;padding:1rem}.sw-ctl button,.sw-rct-table button{background-color:var(--clr-blue);border-radius:5px;border:1px solid var(--clr-blue);box-shadow:var(--sd-dim);color:var(--clr-black);cursor:pointer;font-size:1rem;padding:.5rem;transition:background-color .3s,color .3s;width:100%}.sw-ctl button:hover,.sw-rct-table button:hover{background-color:var(--clr-blue-t-up);color:var(--clr-white)}.sw-inp-txt{border:none;display:flex;justify-content:center;margin-top:1rem}.sw-inp-txt label{background-color:var(--clr-blue-glass);border-radius:3px;color:var(--clr-white);font-size:1rem;padding:.5rem;border:1px solid var(--clr-blue)}.sw-inp-txt input{background-color:var(--clr-neutral-sc-t);border-radius:5px;border:none;color:var(--clr-white);font-size:1rem;margin-left:.5rem;padding:0 .5rem;text-transform:uppercase;width:80%;outline:1px solid var(--clr-blue-t);transition:outline .3s}.sw-inp-txt input:focus{outline:1px solid var(--clr-blue)}.sw-inp-txt input::placeholder{color:var(--clr-grey)}.ctr-colors{border:none;display:flex;justify-content:space-evenly;margin-top:1rem;padding:1rem;position:relative}.ctr-colors input{cursor:pointer;appearance:none;margin-bottom:1rem}.ctr-colors input::before{border-radius:3px;box-shadow:var(--sd-dim);content:'';height:25px;position:absolute;width:25px}.ctr-colors input[value=blank]::before{background-color:var(--clr-blank)}.ctr-colors input[value=blue]::before{background-color:var(--clr-blue)}.ctr-colors input[value=red]::before{background-color:var(--clr-red)}.ctr-colors input[value=yellow]::before{background-color:var(--clr-yellow)}.ctr-colors input[value=green]::before{background-color:var(--clr-green)}.ctr-colors input[value=orange]::before{background-color:var(--clr-orange)}.ctr-colors input[value=purple]::before{background-color:var(--clr-purple)}.ctr-colors input[value=pink]::before{background-color:var(--clr-pink)}.ctr-colors input:checked::after{animation:pickColor .5s ease-out;background-color:var(--clr-black);border-radius:3px;content:' ';height:15px;margin:5px;position:absolute;width:15px}@keyframes pickColor{from{border-radius:1}50%{scale:1.4}to{scale:1}}.sw-rct-table{background-color:var(--clr-neutral);border-radius:5px;box-shadow:inset var(--sd);margin-top:1rem;padding:.5rem;border:1px solid var(--clr-blue-t);overflow-y:auto;min-height:50svh;max-height:70svh;background-image:url(/resources/images/logo.svg);background-repeat:no-repeat;background-position:center}.sw-rct-table h2{color:var(--clr-white);font-size:2rem;text-align:center}.sw-rct-table ul{display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:1rem;width:100%}.sw-rct-table li{background-color:var(--clr-neutral);border-radius:0 3px 3px 0;box-shadow:var(--sd-dim-down);color:var(--clr-white);display:flex;justify-content:center;list-style:none;border:1px solid var(--clr-black)}.sw-rct-table li:nth-child(even){background-color:var(--clr-black)}.sw-rct-table li>span:first-child{align-items:center;box-shadow:var(--sd-dim);display:flex;font-size:1rem;justify-content:center;min-height:30px;padding:0 .5rem;text-align:center;text-transform:uppercase;width:50%}@media screen and (min-width:500px){.sw-rct-table li>span:first-child{font-size:1.2rem}}.sw-rct-table li>span:last-child{background-color:var(--clr-neutral);border-left:2px solid var(--clr-black);border-radius:0 3px 3px 0;box-shadow:var(--sd-dim-down);cursor:pointer;display:flex;font-size:1rem;margin-left:auto;padding:.3rem;transition:background-color .3s,border .3s}.sw-rct-table li>span:last-child:hover{background-color:var(--clr-red-t);border-color:var(--clr-red-t-up)}.sw-rct-table li>span:nth-child(2){display:flex;font-size:4vw;justify-content:space-between;margin:auto 0 auto .7rem;width:35%}@media screen and (min-width:500px){.sw-rct-table li>span:nth-child(2){font-size:1.5rem;width:40%}}.rcd-in{animation:recordIn .5s ease-in}@keyframes recordIn{from{transform:translateY(-1rem);opacity:0}to{transform:translateY(0);opacity:1}}.rcd-out{animation:recordOut .5s ease-in}@keyframes recordOut{from{transform:translateX(0);opacity:1}to{transform:translateX(2rem);opacity:0}}.rec-controls{display:flex;justify-content:space-around;margin-top:1rem}.rec-controls button{width:100px}