Help with stopwatch code

Site URL: https://codepen.io/simonschiller/pen/ZeeVOr

Hello!

I'm trying to get this stopwatch on to my website, but I'm not sure what I should be putting in custom CSS, and what I should be putting in the code blocks. Could someone give me some help?

https://codepen.io/simonschiller/pen/ZeeVOr

In codepen it's written in HTML pug and SASS rather than HTML and CSS that you need for Squarespace. not too tricky to convert, try this in a code block:

<div class="container"><input id="start" name="controls" type="radio" /><input id="stop" name="controls" type="radio" /><input id="reset" name="controls" type="radio" />
    <div class="timer">
        <div class="cell">
            <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
            <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider">
            <div class="numbers">:</div>
        </div>
        <div class="cell">
            <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
        </div>
        <div class="cell">
            <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider">
            <div class="numbers">:</div>
        </div>
        <div class="cell">
            <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
        </div>
        <div class="cell">
            <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider">
            <div class="numbers">.</div>
        </div>
        <div class="cell">
            <div class="numbers millisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
            <div class="numbers tenmillisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
            <div class="numbers hundredmillisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
    </div>
    <div class="timer-controls"><label for="start"> <i class="fa fa-play"></i></label><label for="stop"><i class="fa fa-pause"></i></label><label for="reset"><i class="fa fa-refresh"></i></label></div>
</div>

and put this into the Custom CSS:

.container {
    padding: 20px;
    display: inline-block;
    text-align: center;
    position: relative;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
}

input {
    display: none;
}

.timer {
    padding: 10px;
    overflow: hidden;
    display: inline-block;
}

.timer .cell {
    width: 0.6em;
    height: 60px;
    font-size: 50px;
    overflow: hidden;
    position: relative;
    float: left;
    color: #555;
}

.timer .cell .numbers {
    width: 0.6em;
    line-height: 60px;
    font-family: "Roboto Mono";
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.timer-controls {
    margin-top: 10px;
}

.timer-controls label {
    cursor: pointer;
    margin: 0 20px;
    font-size: 20px;
    border-radius: 50%;
    color: white;
    display: inline-flex;
    width: 70px;
    height: 70px;
    justify-content: center;
    align-items: center;
}

.timer-controls label:nth-child(1) {
    background-color: #4caf50;
}

.timer-controls label:nth-child(1):hover {
    background-color: #81c784;
}

.timer-controls label:nth-child(2) {
    background-color: #f44336;
}

.timer-controls label:nth-child(2):hover {
    background-color: #e57373;
}

.timer-controls label:nth-child(3) {
    background-color: #2196f3;
}

.timer-controls label:nth-child(3):hover {
    background-color: #64b5f6;
}

#stop:checked ~ .timer .numbers {
    animation-play-state: paused;
}

#start:checked ~ .timer .numbers {
    animation-play-state: running;
}

#reset:checked ~ .timer .numbers {
    animation: none;
}

@keyframes moveten {
    0% {
        top: 0;
    }
    100% {
        top: -600px;
    }
}

@keyframes movesix {
    0% {
        top: 0;
    }
    100% {
        top: -360px;
    }
}

.moveten {
    animation: moveten 1s steps(10, end) infinite;
    animation-play-state: paused;
}

.movesix {
    animation: movesix 1s steps(6, end) infinite;
    animation-play-state: paused;
}

.tenhour {
    animation-duration: 360000s;
}

.hour {
    animation-duration: 36000s;
}

.tenminute {
    animation-duration: 3600s;
}

.minute {
    animation-duration: 600s;
}

.tensecond {
    animation-duration: 60s;
}

.second {
    animation-duration: 10s;
}

.millisecond {
    animation-duration: 1s;
}

.tenmillisecond {
    animation-duration: 0.1s;
}

.hundredmillisecond {
    animation-duration: 0.01s;
}

Finally, I would recommend targeting the CSS to the Code Block ID, as it has some rather general classes that would likely affect other parts of your website negatively.