/*ONLY CSS: WARNING
Stripe background.*/


: /*root {
    --stripe-size: 100px;
    --color1: #c44;
    --color2: #313131;
    --duration: 2s;
}
*/
/*body {
    display: flex;
    height: 100vh;
    overflow: hidden;
}*/

.bodyStripe {
    display: flex;
    height: 100vh;
    overflow: hidden;
/*    margin:10px 10px;
    padding:15px;*/
}
.stripe {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
/*    width: 100%;
    height: 100%;*/
}
.stripe1 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.stripe_inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 8rem;
    text-align: center;
    font-family: "Anton", sans-serif;
    color: rgba(255, 255, 255, 0);
    background: repeating-linear-gradient(45deg, var(100px) 25%, var(100px) 50%, var(100px) 50%, var(100px) 75%);
    background-size: var(100px) var(100px);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: stripeBackgroundPosition var(2s) linear infinite;
    animation: stripeBackgroundPosition var(2s) linear infinite;
}

.stripe::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(100px));
    height: 100%;
    background: repeating-linear-gradient(45deg, var(100px) 25%, var(100px) 50%, var(100px) 50%, var(100px) 75%);
    background-size: var(100px) var(100px);
    -webkit-animation: stripeTransform var(2s) linear infinite;
    animation: stripeTransform var(2s) linear infinite;
}

.stripe::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(27, 39, 53, 0) 0%, #090a0f 100%);
}

@-webkit-keyframes stripeTransform {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(var(100px) * -1));
    }
}

@keyframes stripeTransform {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(var(100px) * -1));
    }
}

@-webkit-keyframes stripeBackgroundPosition {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: calc(var(100px) * -1) 0;
    }
}

@keyframes stripeBackgroundPosition {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: calc(var(100px) * -1) 0;
    }
}




/*GRADIENT BACKGROUND WITH WAVES
Gradient background with some waves on the bottom of the page. If you want a different background for you website or app this is a simple way.
*/


/*body {
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, rgba(0,10,94,1) 3%, rgba(0,132,206,1) 38%, rgba(0,238,226,1) 68%, rgba(0,25,25,1) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}*/

.bodyWave {
    margin: auto;
    /*overflow: auto;*/
    background: linear-gradient(315deg, rgb(0 101 64 / 63%) 3%, rgb(60 132 206 / 49%) 38%, rgb(147 199 196) 68%, rgb(28 51 227 / 59%) 98%);
    /*background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(150,25,25,1) 98%);*/
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
    /*height:400px;
    width:100%;*/
    /* border:3px solid rgba(255,25,25,1);*/
    border-radius: 50px;
    margin-top: 30px;
    margin-bottom: 30px
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

    .wave:nth-of-type(2) {
        bottom: -1.25em;
        animation: wave 18s linear reverse infinite;
        opacity: 0.8;
    }

    .wave:nth-of-type(3) {
        bottom: -2.5em;
        animation: wave 20s -1s reverse infinite;
        opacity: 0.9;
    }

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}