:root {
    --colorA: #ccc;
    --colorB: #777;
    --size: 20px;
    --angle: 45deg;
}


pre {
    white-space: break-spaces;
    background-color: var(--gray-darker);
    color: var(--white);
    padding: 1rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
}

main {
    background-color: rgba(255, 255, 255, .85);
    padding: 0 1rem;
}

h1 {
    padding: 0.5rem 0 0;
}


.preview {
    height: 400px;
    position: relative;
    border: 5px double rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.preview::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.2);
    transition: opacity 250ms;
}

.preview:hover::after {
    opacity: 1;
    content: 'Click to apply to body';
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    vertical-align: center;
    line-height: 200px;
    font-size: 2rem;
}

.controls {
    border: 5px double rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 1rem 0;
}

.control:not(.randomizer):not(.swap) button {
    padding: 0;
    font-size: 120%;
    border: none;
}

.control:not(.randomizer) button:hover span {
    /* transform: skew(25deg) */
    display: block;
}

.control:not(.randomizer) button:hover span.dice {
    animation: rattle 500ms;
}

.randomizer button {
    width: 100%;
    font-size: 125%;
}

fieldset,
input {
    margin-bottom: 1rem;
}

input[type='color'] {
    width: 60%;
    height: 3rem;
    border-radius: 3px;
    border-color: var(--gray-light);

}

.control .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 60%;
}

.control .row button {
    height: 1.5rem;
    background: none;
}

.faq {
    flex-direction: column;
}

@keyframes rattle {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg)
    }

    50% {

        transform: rotate(-5deg)
    }

    75% {

        transform: rotate(5deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes swap {
    0% {

        transform: rotate(0deg)
    }

    40% {
        transform: rotate(10deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

/* Patterns */
/* Cannot adjust the angle */
.line-grid {
    background-size: var(--size) var(--size);
    background-image:
        linear-gradient(0, var(--colorA) 1px, transparent 1px),
        linear-gradient(90deg, var(--colorA) 1px, transparent 1px);
    background-color: var(--colorB);
}

/* Cannot adjust the angle */
.dot-grid {
    background-size: var(--size) var(--size);
    background-image: radial-gradient(circle, var(--colorA) 2px, var(--colorB) 2px);
}

/* Cannot adjust the angle */
.polka {
    background-image:
        radial-gradient(var(--colorA) calc(var(--size) / 4), transparent calc(var(--size) / 3.9)),
        radial-gradient(var(--colorA) calc(var(--size) / 4), transparent calc(var(--size) / 3.9));
    background-position: 0px 0px, var(--size) var(--size);
    background-size: calc(var(--size) * 2) calc(var(--size) * 2);
    background-color: var(--colorB);
}

.stripe {
    background: repeating-linear-gradient(var(--angle),
            var(--colorA),
            var(--colorA) var(--size),
            var(--colorB) var(--size),
            var(--colorB) calc(var(--size) * 2));
}

/* Cannot adjust the angle */
.radial-stripe {
    background: repeating-radial-gradient(var(--colorA),
            var(--colorA) var(--size),
            var(--colorB) var(--size),
            var(--colorB) calc(var(--size) * 2));
}


/* Cannot adjust the angle */
.pinwheel {
    background: conic-gradient(var(--colorA) 12.5%,
            var(--colorB) 12.5%, var(--colorB) 25%,
            var(--colorA) 25%, var(--colorA) 37.5%,
            var(--colorB) 37.5%, var(--colorB) 50%,
            var(--colorA) 50%, var(--colorA) 62.5%,
            var(--colorB) 62.5%, var(--colorB) 75%,
            var(--colorA) 75%, var(--colorA) 87.5%,
            var(--colorB) 87.5%);
    background-position: 0px 0px, var(--size) var(--size);
    background-size: calc(var(--size) * 2) calc(var(--size) * 2);
    background-color: var(--colorB);
}

.pinstripe {
    background: repeating-linear-gradient(var(--angle),
            var(--colorA),
            var(--colorA) 1px,
            var(--colorB) 1px,
            var(--colorB) calc(var(--size) * 2));
}

/* Math is weird/wrong */
.triangles {
    background-image:
        linear-gradient(var(--angle), var(--colorA) 50%, var(--colorB) 50%);
    background-size: var(--size) var(--size);
}


/* Cannot adjust the angle */
.sawtooth {
    background-image:
        linear-gradient(135deg, var(--colorA) 50%, transparent 50%),
        linear-gradient(135deg, var(--colorA) 50%, transparent 50%);
    background-position: 0px 0px, var(--size) var(--size);
    background-size: calc(var(--size) * 2) calc(var(--size) * 2);
    background-color: var(--colorB);
}

/* Cannot adjust the angle */
.zigzag {
    background: linear-gradient(135deg, var(--colorA) 25%, transparent 25%) var(--size) 0,
        linear-gradient(225deg, var(--colorA) 25%, transparent 25%) var(--size) 0,
        linear-gradient(315deg, var(--colorA) 25%, transparent 25%),
        linear-gradient(45deg, var(--colorA) 25%, transparent 25%);
    background-size: calc(2 * var(--size)) calc(2 * var(--size));
    background-color: var(--colorB);
}

/* Adapted from: https://cssgradient.io/blog/gradient-patterns/ */

/* Cannot adjust the angle */
.checkerboard {
    background-image: linear-gradient(45deg, var(--colorB) 25%, transparent 25%),
        linear-gradient(-45deg, var(--colorB) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--colorB) 75%),
        linear-gradient(-45deg, transparent 75%, var(--colorB) 75%);
    background-size: calc(2 * var(--size)) calc(2 * var(--size));
    background-color: var(--colorA);
    background-position: 0 0, 0 var(--size), var(--size) calc(-1 * var(--size)), calc(-1 * var(--size)) 0px;
}

/* Cannot adjust the angle */
.cross {
    background:
        radial-gradient(circle, transparent 20%, var(--colorB) 20%,
            var(--colorB) 80%, transparent 80%, transparent),
        radial-gradient(circle, transparent 20%, var(--colorB) 20%,
            var(--colorB) 80%, transparent 80%, transparent),
        linear-gradient(var(--colorA) calc(.16 * var(--size)), transparent calc(.16 * var(--size))),
        linear-gradient(90deg, var(--colorA) calc(.16 * var(--size)), transparent calc(.16 * var(--size)));
    background-color: var(--colorB);
    background-position: 0 0,
        var(--size) var(--size),
        0px calc(-1 * .08 * var(--size)),
        calc(-1 * .08 * var(--size)) 0;
    background-size: calc(2 * var(--size)) calc(2 * var(--size)),
        calc(2 * var(--size)) calc(2 * var(--size)),
        var(--size) var(--size),
        var(--size) var(--size);
}

/* Cannot adjust the angle */
.waves {
    background:
        radial-gradient(circle at 100% 50%, transparent 20%, var(--colorA) 21%,
            var(--colorA) 34%, transparent 35%, transparent),
        radial-gradient(circle at 0% 50%, transparent 20%, var(--colorA) 21%, var(--colorA) 34%, transparent 35%, transparent);
    background-color: var(--colorB);
    background-position: 0 0, 0 calc(-1 * var(--size));
    background-size: calc(1.5 * var(--size)) calc(2 * var(--size));
}