@supports (display: grid) {
    
    
    
    @keyframes loading {
       from {
           background-position: 0 center;
       }
       to {
           background-position:  600px center;
       }
        
    }
    
    
    @keyframes sprite {
        0% {
            left: 0;
            transform: scale(.5);
            opacity: 0;
        }
        
        30% {
            opacity: 1;        
        }
        75% {
            left: calc(100% - 40px);
            transform: scale(1);
            opacity: 1;
        }
        
        100% {
            left: 50%;
            transform: scale(3);
            opacity: 0;
        }
    }
    
    .loading {
    /*     border: 1px solid red; */
        
        height: 20px;
        width: calc(100% - 96px);
        max-width: 600px;
        margin: 48px auto;
        
    /*     background: repeating-linear-gradient(-45deg, red, red 1%, blue 1%, blue 10%); */
        
    /*     animation: loading 3s linear infinite; */
    
        
        position: relative;
    
    }
    
    .loading.inner {
        margin: 0;
        width: 100%;
    }
    
    
    .loading::before,
    .loading::after {
        content:'';
        width: 40px;
        height: 40px;
        border-radius: 20px;
    /*     border: 1px solid blue; */
        position: absolute;
        left: 0;
        top: -10px;
        opacity: 0;
        
        animation: sprite 4s ease-in infinite;
        background: radial-gradient(circle, rgba(255,255,255, .9), 30% , rgba(255,255,255, 0) 90%, rgba(255,255,255,0) 100%);
    }
    
    .loading::after {
    /*     border-color: orange; */
        animation-delay: .5s;
    }
    
    
    .loading.inner::before {
        animation-delay: 1s;
    }
    
    .loading.inner::after {
        animation-delay: 1.5s;
    }
    
    
    
    
    
    
    /* pong */
    @keyframes paddle-left {
        from {top: 0}
        to   {top: 90%}
    }
    @keyframes paddle-right {
        from {top: 70%}
        to   {top: 0%}
    }
    
    @keyframes ball {
        0%  {
            top: 50%;
            left: 25px;
        }    
        
        25%  {
            top: calc(100% - 15px);
            left: 30%;
        }
    
        50%  {
            top: 40%;
            left: calc(100% - 35px);
        }
    
        75%  {
            top: 0;
            left: 60%;
        }
        
        100% {
            top: 50%;
            left: 25px;
        }
    
    }
    @keyframes ball-color {
        0%   {background:#ff0000}
        20%  {background:#ff9a00}
        40%  {background:#66cd0c}
        60%  {background:#00fbff}
        80%  {background:#9e00ff}
        100% {background:#ff00bb}
    }
    
    
    @keyframes ping {
        0%    { opacity: 1; transform: scale(1); }
        10%   { opacity: 0; transform: scale(3); }
        100%  { opacity: 0; transform: scale(1); } 
    }
    
    .pong-table {
        border: 10px solid black;
        background: #555;    
        
        width: 100%;
        max-width: 900px;
        height: 60vh;
        max-height: 400px;
        
        margin: 0 auto;
        position: relative;
        
    }
    
    .pong-table::before,
    .pong-table::after {
        content:'';
        width: 10px;
        height: 50%;
        background: #555;
        position: absolute;
        top: 25%;
        left: -10px;
        z-index: 2;
    }
    
    .pong-table::after {
        left: auto;
        right: -10px;
    }
    
    .pong-table-divider {
    
        border-left:8px dashed #888;
        
        height: 100%;
        position: absolute;
        left: calc(50% - 4px);
        top: 0;
    }
    
    
    
    .paddle {
        content: '';
        width: 15px;
        height: 10%;
        background: white;
        position: absolute;
        top: 0;    
        animation: paddle-left 4s infinite alternate cubic-bezier(0.790, 0.205, 0.210, 0.860);
    }
    
    .paddle.left {
        left: 10px;
        
    }
    
    .paddle.right {
        right: 10px;
        top: 70%;
        animation: paddle-right 4s infinite alternate cubic-bezier(0.790, 0.205, 0.210, 0.860);
        animation-delay: 4s;
    }
    
    
    .ball {
        content:'';
        width: 15px;
        height: 15px;
        background: #f90b0b;
        
        position: absolute;
        top: 50%;
        left: 25px;
        animation: ball 8s infinite linear, ball-color 30s infinite alternate ease-in-out;
        animation-delay: 2s;
        z-index: 3;
    }
    
    
    .ball::before {
        content:'';
        border: 1px solid white;
        width: 15px;
        height: 15px;
        position: absolute;
        opacity: 0;
        animation: ping 2s infinite ease;
        animation-delay: 2s;
        border-radius: 8px;
        z-index: -1;
    }
    
    aside {
        text-align: center;
        font-size: .85em;
        color: #777;
        margin-top: 1em;
    }
    
}