* {
    box-sizing: border-box;
}

html {
    background-color: white;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 100;
    overflow-x: hidden;
    color: #333;
}

button {
    font-family: inherit;
    font-size: inherit;
    font-weight: 300;
}

:root {
    --tx-color: #333;
}

body {
    overflow-x: hidden;
}

h1, p.subtitle {
    text-align: center;
}

h1 {
    margin-bottom: 0;
}

p.subtitle {
    margin-bottom: 1rem;
}

.description {
    font-size: .8rem;
    max-width: 300px;
    margin: 2rem auto;
    text-align: center;
    line-height: 1.5;
}

h1 > small {
    display: block;
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: lighter;
    margin: .5em;
    color: var(--tx-color);
}

p {
    margin: .5rem 0;
}

a {
    color: inherit;
}

canvas {

    width: 600px;
    height: 600px;
    border: 3px solid black;
    background-color: white;
    border: 3px solid black;
}

@media (max-width: 620px) {


    .controls {
        font-size: .8rem;
    }

    canvas {
        max-width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
}

.wrapper > * {
    flex-basis: 600px;
    border: 3px solid #333;
    border-radius: 1rem;
}

.controls {

    padding: 1rem;
    font-size: .9rem;

}

.toggles-wrapper {

    display: flex;
    gap: 1rem;
    margin: 1rem 0;

}

.toggle, button {
    padding: .5em .75em;
    border-radius: .5em;
    background-color: white;
    border: 2px solid var(--tx-color);
}

.selected {

    background-color: var(--tx-color);
    color: white;

}

[data-btn="start"] {
    width: 5rem;
    margin-right: 1rem;
    border-color: indigo;
    background-color: indigo;
    color: white;

}

[data-btn="start"].started {
    color: var(--tx-color);
    background-color: white;
    border-color: currentColor;
}

[data-btn="start"]::after {
    content: "Play";
}

[data-btn="start"].started::after {
    content: 'Pause'
}

.twin-buttons {
    display: flex;
    margin-top: 1rem;
}

.twin-buttons > p {
    margin-right: 1em;
}

.twin-buttons > button {
    border: 2px solid var(--tx-color);
    margin: 0;
    min-width: 6rem;
}
.twin-buttons > button:first-of-type  { border-radius: 2rem 0 0 2rem; }
.twin-buttons > button:nth-of-type(2) { 
    border-radius: 0 2rem 2rem 0; 
    border-left: none;
}

[data-btn="place-random"]:active {
    color: indigo;
    animation: blow .2s;
}

@keyframes blow {
    0% {
        box-shadow: 0 0 0px 0px indigo;
    }

    100% {
        box-shadow: 0 0 50px 0px indigo;
    }
}

.wrapper-slider {
    display: flex;
    margin-top: 1rem;
}

.wrapper-slider label {
    margin-right: 1rem;
}