/*

- Animated GIF : https://twitter.com/alterebro/status/1287484953933086720
- Video Loop w/Audio : https://www.youtube.com/watch?v=DBf_CluIMcA
---
¯\_(ツ)_/¯ @alterebro (https://twitter.com/alterebro)

*/

:root {
    --animation-duration : 1.5s;
    --animation-function : cubic-bezier(0.6, 0, 0.4, 1);
    --small : min(20vh, 20vw);
    --big : min(70vh, 70vw);
    --borderSmall : min(5vh, 5vw);
    --borderBig : min(15vh, 15vw);
    --colorAlpha : #000;
    --colorBeta : #fff;
    --colorBg : #2080a9;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--colorBg);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--colorBg);
    background-image: radial-gradient(circle at 50%, var(--colorBg), rgba(0, 0, 0, 35%));
}
*, *:before, *:after {
    box-sizing: inherit;
}

.squares > div,
.squares::before, .squares::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.squares > div.alpha {
    width: var(--small);
    height: var(--small);
    border: solid var(--colorAlpha) var(--borderSmall);
    animation: var(--animation-duration) square infinite var(--animation-function);
    z-index: 0;
}
.squares > div.beta {
    width: var(--small);
    height: var(--small);
    border: solid var(--colorBeta) var(--borderSmall);
    animation: var(--animation-duration) square infinite var(--animation-function) calc(var(--animation-duration) / 2);
    z-index: 1;
}
@keyframes square {
    0% {
        width: var(--small);
        height: var(--small);
        z-index: 1;
        border-width: var(--borderSmall);
    }
    50% {
        width: calc(var(--small) + var(--borderSmall));
        height: calc(var(--small) + var(--borderSmall));
        border-width: calc(var(--borderSmall) / 2);
    }
    75% {
        width: var(--big);
        height: var(--big);
        z-index: 0;
        border-width: var(--borderBig);
    }
    100% {
        width: var(--small);
        height: var(--small);
        border-width: var(--borderSmall);
        z-index: 1;
    }
}

.squares {
    width: calc(var(--big) + var(--borderBig));
    height: calc(var(--big) + var(--borderBig));
    position: relative;
}
.squares::before, .squares::after {
    display: block;
    content: '';
    width: calc(var(--big) - var(--borderBig));
    height: calc(var(--big) - var(--borderBig));
    border: solid var(--colorAlpha) var(--borderBig);
    opacity: 0;
    animation: var(--animation-duration) bg infinite var(--animation-function) calc(var(--animation-duration) / 2);
}
.squares:after {
    border: solid var(--colorBeta) var(--borderBig);
    animation: var(--animation-duration) bg infinite var(--animation-function) var(--animation-duration);
}

@keyframes bg {
    25% {
        width: calc(var(--big) - var(--borderBig));
        height: calc(var(--big) - var(--borderBig));
        opacity: 0;
    }
    35% { opacity: .15; }
    100% {
        opacity: 0;
        width: calc(var(--big) * 1.25);
        height: calc(var(--big) * 1.25);
        border-width: calc(var(--borderBig) * 1.3);
    }
}