html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-repeat: repeat;
    background-color: #0689ea;
}

.welcome {
    color: white;
    width: 80vh;
    height: 80vh;
    max-width: 80vh;
    max-height: 80vh;
    flex-direction: column;
    font-family: sans-serif;
    justify-content: center;

    --polygon-bg: #30deae;
    --avatar-sides: 12;
    --avatar-angle: 25;

    background: var(--polygon-bg);
    -webkit-mask-image: paint(avatar-polygon);
    mask-image: paint(avatar-polygon);
    animation: tick-tock 60s steps(60, end) infinite;

    border-radius: 40vh;
}

.welcome > h1 {
    padding-top: 35vh;
    margin: 0;
    font-size: 10vh;
    text-align: center;
}

.lines {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    justify-content: center;

    width: 100%;
    height: 100%;
    --lines-colors: #3cffe9, #00625f, #00899f, #488881,
    #167f88, #53987e, #4392aa, #85eceb,
    #2f608c, #3393b4, #2f608c, #0e395e;
    --lines-widths: 50, 50, 50, 50, 50;
    --lines-gaps: 50, 0, 0, 0, 0;
    --lines-rotate: 0;

    background-image: paint(lines);

    animation-name: tilting;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes tick-tock {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tilting {
    0%   { --lines-rotate: 0; }
    1%   { --lines-rotate: 1; }
    2%   { --lines-rotate: 2; }
    3%   { --lines-rotate: 3; }
    4%   { --lines-rotate: 4; }
    5%   { --lines-rotate: 5; }
    6%   { --lines-rotate: 6; }
    7%   { --lines-rotate: 7; }
    8%   { --lines-rotate: 8; }
    9%   { --lines-rotate: 9; }
    10%   { --lines-rotate: 10; }
    11%   { --lines-rotate: 11; }
    12%   { --lines-rotate: 12; }
    13%   { --lines-rotate: 13; }
    14%   { --lines-rotate: 14; }
    15%   { --lines-rotate: 15; }
    16%   { --lines-rotate: 16; }
    17%   { --lines-rotate: 17; }
    18%   { --lines-rotate: 18; }
    19%   { --lines-rotate: 19; }
    20%   { --lines-rotate: 20; }
    21%   { --lines-rotate: 21; }
    22%   { --lines-rotate: 22; }
    23%   { --lines-rotate: 23; }
    24%   { --lines-rotate: 24; }
    25%   { --lines-rotate: 25; }
    26%   { --lines-rotate: 26; }
    27%   { --lines-rotate: 27; }
    28%   { --lines-rotate: 28; }
    29%   { --lines-rotate: 29; }
    30%   { --lines-rotate: 30; }
    31%   { --lines-rotate: 31; }
    32%   { --lines-rotate: 32; }
    33%   { --lines-rotate: 33; }
    34%   { --lines-rotate: 34; }
    35%   { --lines-rotate: 35; }
    36%   { --lines-rotate: 36; }
    37%   { --lines-rotate: 37; }
    38%   { --lines-rotate: 38; }
    39%   { --lines-rotate: 39; }
    40%   { --lines-rotate: 40; }
    41%   { --lines-rotate: 41; }
    42%   { --lines-rotate: 42; }
    43%   { --lines-rotate: 43; }
    44%   { --lines-rotate: 44; }
    45%   { --lines-rotate: 45; }
    46%   { --lines-rotate: 46; }
    47%   { --lines-rotate: 47; }
    48%   { --lines-rotate: 48; }
    49%   { --lines-rotate: 49; }
    50%   { --lines-rotate: 50; }
    51%   { --lines-rotate: 51; }
    52%   { --lines-rotate: 52; }
    53%   { --lines-rotate: 53; }
    54%   { --lines-rotate: 54; }
    55%   { --lines-rotate: 55; }
    56%   { --lines-rotate: 56; }
    57%   { --lines-rotate: 57; }
    58%   { --lines-rotate: 58; }
    59%   { --lines-rotate: 59; }
    60%   { --lines-rotate: 60; }
    61%   { --lines-rotate: 61; }
    62%   { --lines-rotate: 62; }
    63%   { --lines-rotate: 63; }
    64%   { --lines-rotate: 64; }
    65%   { --lines-rotate: 65; }
    66%   { --lines-rotate: 66; }
    67%   { --lines-rotate: 67; }
    68%   { --lines-rotate: 68; }
    69%   { --lines-rotate: 69; }
    70%   { --lines-rotate: 70; }
    71%   { --lines-rotate: 71; }
    72%   { --lines-rotate: 72; }
    73%   { --lines-rotate: 73; }
    74%   { --lines-rotate: 74; }
    75%   { --lines-rotate: 75; }
    76%   { --lines-rotate: 76; }
    77%   { --lines-rotate: 77; }
    78%   { --lines-rotate: 78; }
    79%   { --lines-rotate: 79; }
    80%   { --lines-rotate: 80; }
    81%   { --lines-rotate: 81; }
    82%   { --lines-rotate: 82; }
    83%   { --lines-rotate: 83; }
    84%   { --lines-rotate: 84; }
    85%   { --lines-rotate: 85; }
    86%   { --lines-rotate: 86; }
    87%   { --lines-rotate: 87; }
    88%   { --lines-rotate: 88; }
    89%   { --lines-rotate: 89; }
    90%   { --lines-rotate: 90; }
    91%   { --lines-rotate: 91; }
    92%   { --lines-rotate: 92; }
    93%   { --lines-rotate: 93; }
    94%   { --lines-rotate: 94; }
    95%   { --lines-rotate: 95; }
    96%   { --lines-rotate: 96; }
    97%   { --lines-rotate: 97; }
    98%   { --lines-rotate: 98; }
    99%   { --lines-rotate: 99; }
    100%  { --lines-rotate: 100; }
}