/*
global
*/
@import url(//fonts.googleapis.com/css?family=Roboto+Mono);

*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

body {
    height: 100vh;
    background-color: rgb(22, 22, 22);

    overflow: hidden;
    position: relative;
}

/*
marching ants
*/
.ma {
    --_ma-color-a: #fff;
    --_ma-color-b: #111;
    --_ma-speed: 250ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 4px;
    --_ma-angle: 45deg;
    --_ma-size: calc(var(--_ma-size-a) + var(--_ma-size-b));
    --_ma-shift: calc(var(--_ma-size) / sin(var(--_ma-angle)));

    position: relative;
}

.ma:before,
.ma:after {
    content: '';
    position: absolute;
    inset: calc(var(--_ma-border-width) * -1);
    pointer-events: none;
    border-radius: inherit;

    background:
        repeating-linear-gradient(
            var(--_ma-angle),
            var(--_ma-color-a) 0 var(--_ma-size-a),
            var(--_ma-color-b) var(--_ma-size-a) var(--_ma-size)
        );
    background-size: var(--_ma-shift) 100%;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.ma:before {
    padding: 0 var(--_ma-border-width) var(--_ma-border-width) 0;
    animation: ma-animation-b var(--_ma-speed) var(--_ma-animation-timing-function) infinite;
}

.ma:after {
    padding: var(--_ma-border-width) 0 0 var(--_ma-border-width);
    animation: ma-animation-a var(--_ma-speed) var(--_ma-animation-timing-function) infinite;
}

.ma:hover:before,
.ma:hover:after {
    animation-play-state: paused;
}

@keyframes ma-animation-b {
    to {
        background-position: calc(var(--_ma-shift) * var(--_ma-animation-direction) * -1) 0;
    }
}

@keyframes ma-animation-a {
    to {
        background-position: calc(var(--_ma-shift) * var(--_ma-animation-direction)) 0;
    }
}

/*
marching ants showcase examples
*/
.ma-example {
    position: absolute;

    width: clamp(11rem, 26vw, 27rem);
    aspect-ratio: 2 / 1;
    padding: clamp(.75rem, 2vw, 2rem);

    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / .66);
}

.ma-example:hover {
    z-index: 100;
}

.ma-example--1 {
    top: 7%;
    left: 5%;
    background-color: rgb(78 61 39);
    border-radius: 0;

    --_ma-color-a: #fff;
    --_ma-color-b: #000;
    --_ma-speed: 550ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 2px;
    --_ma-size-a: 2px;
    --_ma-size-b: 2px;
}

.ma-example--2 {
    top: 11%;
    right: 9%;
    background-color: rgb(54 70 68);
    border-radius: 4px;

    --_ma-color-a: rgba(0, 255, 221, .75);
    --_ma-color-b: transparent;
    --_ma-speed: 800ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: ease-in-out;
    --_ma-border-width: 1px;
    --_ma-size-a: 16px;
    --_ma-size-b: 3px;
}

.ma-example--3 {
    top: 31%;
    left: 16%;
    background-color: rgb(42 48 61);
    border-radius: .25rem;

    --_ma-color-a: #0ff;
    --_ma-color-b: transparent;
    --_ma-speed: 450ms;
    --_ma-animation-direction: -1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 3px;
}

.ma-example--4 {
    top: 39%;
    right: 18%;
    background-color: rgb(77 54 58);
    border-radius: .25rem;

    --_ma-color-a: #f00;
    --_ma-color-b: #111;
    --_ma-speed: 400ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 6px;
    --_ma-size-b: 9px;
}

.ma-example--5 {
    bottom: 9%;
    left: 9%;
    background-color: rgb(61 58 42);

    --_ma-color-a: #fc0;
    --_ma-color-b: #111;
    --_ma-speed: 999ms;
    --_ma-animation-direction: -1;
    --_ma-animation-timing-function: steps(6);
    --_ma-border-width: 2px;
    --_ma-size-a: 8px;
    --_ma-size-b: 4px;
}

.ma-example--6 {
    bottom: 11%;
    right: 6%;
    background-color: rgb(42 63 72);
    border-radius: .2rem;

    --_ma-color-a: #fff;
    --_ma-color-b: #111;
    --_ma-speed: 750ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 5px;
    --_ma-size-b: 2px;
}

.ma-example--7 {
    top: 58%;
    left: 37%;
    background-color: rgb(72 55 39);
    border-radius: .5rem;

    --_ma-color-a: #505050;
    --_ma-color-b: #fff;
    --_ma-speed: 300ms;
    --_ma-animation-direction: -1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 2px;
    --_ma-size-a: 4px;
    --_ma-size-b: 4px;
}

.ma-example--8 {
    top: 21%;
    left: 43%;
    background-color: rgb(57 49 72);
    border-radius: 5px;

    --_ma-color-a: #f0f;
    --_ma-color-b: transparent;
    --_ma-speed: 400ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 8px;
}

.ma-example--9 {
    bottom: 36%;
    right: 31%;
    background-color: rgb(67 46 45);
    border-radius: .15rem;

    --_ma-color-a: rgb(187, 47, 40);
    --_ma-color-b: rgb(67 46 45);
    --_ma-speed: 200ms;
    --_ma-animation-direction: -1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 3px;
    --_ma-size-b: 2px;
}

.ma-example--10 {
    top: 38%;
    left: 39%;
    background-color: rgb(48 68 54);
    border-radius: 0;

    --_ma-color-a: #fff;
    --_ma-color-b: #111;
    --_ma-speed: 250ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 4px;
}