index.css

main {
    display: flex;
    flex-flow: column;
}

main div, button {
    padding-bottom: 0.5rem;
}

input[type=text], textarea {
    padding: 0.3rem 1rem 0.3rem 0.3rem;
    font-size: 1rem;
    width: 30rem;
    font-family: monospace;
}

/* main > div {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
} */

.center {
    text-align: center;
}

a:link {
    color:#000;
    text-decoration: none;
}
a:visited {
    color:#000;
}
a:hover {
    color:#33F;
}

.interim-output {
    border: 1px solid DarkGrey;
    background-color: #eee;
    color: #999;
    font-style: italic;
    font-size: 0.8rem;
}

/* === Customized checkbox === */

/* Step 1: Common Properties
  These styles are required to make icons render reliably */
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

span:has(.checkbox) {
    position: relative;
}

label.checkbox {
    position: absolute;
    top: -0.5rem;
    right: -1rem;
}

.checkbox input {
    height: 0;
    width: 0;
}

.checkbox {
    display: block;
    position: relative;
    padding-left: 26px;
    margin-bottom: 18px;
    font-size: 22px;
    user-select: none;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    width: 2rem;
    border: 2px solid #c9c9c9;
    border-radius: 1rem;
    background-color: #eee;
}

.checkbox input .checkmark:after {
    top: 0;
    left: -1rem;
    width: 2rem;
    height: 2rem;
}

.checkbox input:checked ~ .checkmark:after {
    display: block;
    color: Green;
}

.checkbox input:not(:checked) ~ .checkmark:after {
    display: block;
    color: #c9c9c9;
}

/*To hide the checkmark when not checked */

.checkmark:after {
    font-family: "Font Awesome 5 Free", fantasy;
    font-weight: 900;
    content: "\f130";
    position: absolute;
    left: 0.46rem;
    top: 0.05rem;
    /* display: none; */
}

.checkmark:hover {
    background-color: Gray;
}

/* --- end of Customized checkbox --- */

.checkbox input:checked ~ .recording-active:after {
    color: Red;
    animation: blink 1s linear infinite;
}

@keyframes blink {
    25% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.2;
    }
    75% {
        opacity: 0.6;
    }
}