.card-highlight {
    padding: 0.5rem;
    background-color: white;
    opacity: 0.6;
    color: black !important;
}

@media (min-width: 999px) {
    .card-highlight {
        width: fit-content;
    }
}


.filtered {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.card-abstract {
    background-image: url('images/abstract.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: white !important;
}

.card-hex {
    background-image: url('images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: white !important;
}

.card-watercolor {
    background-image: url('images/watercolor.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: white !important;
}

.card-body {
    color: white;
    border-radius: 5px;
}

.card-title, .card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fade-in2 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

.fade-in3 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

.fade-in4 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.authResult {
    display: flex;
    background-image: linear-gradient(to left, #82ee9e, #60afcb);
    padding: 1rem;
    border-radius: 15px;
    color: white;
}


.authFail {
    display: flex;
    background-image: linear-gradient(to right, rgb(255 61 30), rgb(96 200 203));
    padding: 1rem;
    border-radius: 15px;
    color: white;
}

.pageInfoHeader {
    display: flex;
    background-image: linear-gradient(to right, transparent 20%, #93bfbe, #8b6d97);
    padding-left: 1rem;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    border-radius: 15px;
}

.noborder {
    border: 0px !important;
}

/* light effect */

.dot {
    background: rgba(176,255,95,1);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(176,255,95,1), 0 0 40px rgba(176,255,95,1), 0 0 60px rgba(176,255,95,1), 0 0 80px rgba(176,255,95,1);
    animation: colorWave 5s linear infinite;
    margin-bottom: -1rem;
    height: 0%;
}

@keyframes colorFade {
    0% {
        background: rgba(176, 255, 95, 1);
        box-shadow: 0 0 20px rgba(176, 255, 95, 1), 0 0 40px rgba(176, 255, 95, 1), 0 0 60px rgba(176, 255, 95, 1), 0 0 80px rgba(176, 255, 95, 1);
    }

    33% {
        background: rgba(255, 95, 176, 1);
        box-shadow: 0 0 20px rgba(255, 95, 176, 1), 0 0 40px rgba(255, 95, 176, 1), 0 0 60px rgba(255, 95, 176, 1), 0 0 80px rgba(255, 95, 176, 1);
    }

    66% {
        background: rgba(95, 176, 255, 1);
        box-shadow: 0 0 20px rgba(95, 176, 255, 1), 0 0 40px rgba(95, 176, 255, 1), 0 0 60px rgba(95, 176, 255, 1), 0 0 80px rgba(95, 176, 255, 1);
    }

    100% {
        background: rgba(176, 255, 95, 1);
        box-shadow: 0 0 20px rgba(176, 255, 95, 1), 0 0 40px rgba(176, 255, 95, 1), 0 0 60px rgba(176, 255, 95, 1), 0 0 80px rgba(176, 255, 95, 1);
    }
}

@keyframes colorWave {
    0% {
        box-shadow: rgb(251, 103, 172) 0px 0px 20px, rgb(251, 103, 172) 0px 0px 40px, rgb(251, 103, 172) 0px 0px 60px, rgb(251, 103, 172) 0px 0px 80px;
        background-color: rgb(251, 103, 172);
        transform: translateX(-100%);
    }

    50% {
        box-shadow: rgb(95, 176, 255) 0px 0px 20px, rgb(95, 176, 255) 0px 0px 40px, rgb(95, 176, 255) 0px 0px 60px, rgb(95, 176, 255) 0px 0px 80px;
        background-color: rgb(95, 176, 255);
        transform: translateX(50%);
    }

    100% {
        box-shadow: rgb(176, 255, 95) 0px 0px 20px, rgb(176, 255, 95) 0px 0px 40px, rgb(176, 255, 95) 0px 0px 60px, rgb(176, 255, 95) 0px 0px 80px;
        background-color: rgb(176, 255, 95);
        transform: translateX(150%);
    }
}

.light {
    position: absolute;
    width: 0px;
    opacity: .75;
    background-color: white;
    box-shadow: #e9f1f1 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.x1 {
    -webkit-animation: floatUp 4s infinite linear;
    -moz-animation: floatUp 4s infinite linear;
    -o-animation: floatUp 4s infinite linear;
    animation: floatUp 4s infinite linear;
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
}

.x2 {
    -webkit-animation: floatUp 7s infinite linear;
    -moz-animation: floatUp 7s infinite linear;
    -o-animation: floatUp 7s infinite linear;
    animation: floatUp 7s infinite linear;
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    left: 15%;
}

.x3 {
    -webkit-animation: floatUp 2.5s infinite linear;
    -moz-animation: floatUp 2.5s infinite linear;
    -o-animation: floatUp 2.5s infinite linear;
    animation: floatUp 2.5s infinite linear;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5);
    left: -15%;
}

.x4 {
    -webkit-animation: floatUp 4.5s infinite linear;
    -moz-animation: floatUp 4.5s infinite linear;
    -o-animation: floatUp 4.5s infinite linear;
    animation: floatUp 4.5s infinite linear;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    left: -34%;
}

.x5 {
    -webkit-animation: floatUp 8s infinite linear;
    -moz-animation: floatUp 8s infinite linear;
    -o-animation: floatUp 8s infinite linear;
    animation: floatUp 8s infinite linear;
    -webkit-transform: scale(2.2);
    -moz-transform: scale(2.2);
    -o-transform: scale(2.2);
    transform: scale(2.2);
    left: -57%;
}

.x6 {
    -webkit-animation: floatUp 3s infinite linear;
    -moz-animation: floatUp 3s infinite linear;
    -o-animation: floatUp 3s infinite linear;
    animation: floatUp 3s infinite linear;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    left: -81%;
}

.x7 {
    -webkit-animation: floatUp 5.3s infinite linear;
    -moz-animation: floatUp 5.3s infinite linear;
    -o-animation: floatUp 5.3s infinite linear;
    animation: floatUp 5.3s infinite linear;
    -webkit-transform: scale(3.2);
    -moz-transform: scale(3.2);
    -o-transform: scale(3.2);
    transform: scale(3.2);
    left: 37%;
}

.x8 {
    -webkit-animation: floatUp 4.7s infinite linear;
    -moz-animation: floatUp 4.7s infinite linear;
    -o-animation: floatUp 4.7s infinite linear;
    animation: floatUp 4.7s infinite linear;
    -webkit-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
    left: 62%;
}

.x9 {
    -webkit-animation: floatUp 4.1s infinite linear;
    -moz-animation: floatUp 4.1s infinite linear;
    -o-animation: floatUp 4.1s infinite linear;
    animation: floatUp 4.1s infinite linear;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    left: 85%;
}

button:focus {
    outline: none;
}

@-webkit-keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        top: 0vh;
        opacity: .8;
    }

    75% {
        opacity: 1;
    }

    100% {
        top: -100vh;
        opacity: 0;
    }
}

@-moz-keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        top: 0vh;
        opacity: .8;
    }

    75% {
        opacity: 1;
    }

    100% {
        top: -100vh;
        opacity: 0;
    }
}

@-o-keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        top: 0vh;
        opacity: .8;
    }

    75% {
        opacity: 1;
    }

    100% {
        top: -100vh;
        opacity: 0;
    }
}

@keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        top: 0vh;
        opacity: .8;
    }

    75% {
        opacity: 1;
    }

    100% {
        top: -100vh;
        opacity: 0;
    }
}

/* cirles */

.circles {
    position: absolute;
    width: 60%;
    height: 300px;
    /* overflow: hidden;*/
}

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: animate 25s linear infinite;
        bottom: -150px;
    }

        .circles li:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
        }


        .circles li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            animation-duration: 12s;
        }

        .circles li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
        }

        .circles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .circles li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
        }

        .circles li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
        }

        .circles li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
        }

        .circles li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 45s;
        }

        .circles li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 11s;
        }



@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}





/* animated super loader */

:root {
    --sp: 1s; /* change speed */
    --bg: #3884ff45; /* change color */
}

.progress-container{
    margin-top:7rem;
}

.progress-content {
    display: flex;
    align-items: center;
    justify-content: normal;
}

    .progress-content div {
        width: var(--sz);
        height: var(--sz);
        box-shadow: 0 0 1vmin 0 var(--bg), -0.25vmin 0.25vmin 1vmin 0 #000b;
        background: var(--bg);
        position: absolute;
        animation: twist calc(var(--sp) * 1) ease-in-out 0s infinite alternate;
    }

        .progress-content div:nth-child(1) {
            --sz: 6rem;
            animation-delay: calc(var(--sp) * 0.07);
            filter: hue-rotate(15deg);
        }

        .progress-content div:nth-child(2) {
            --sz: 5.5rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 2);
            filter: hue-rotate(30deg);
        }

        .progress-content div:nth-child(3) {
            --sz: 5rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 3);
            filter: hue-rotate(45deg);
        }

        .progress-content div:nth-child(4) {
            --sz: 4.5rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 4);
            filter: hue-rotate(60deg);
        }

        .progress-content div:nth-child(5) {
            --sz: 4rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 5);
            filter: hue-rotate(75deg);
        }

        .progress-content div:nth-child(6) {
            --sz: 3.5rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 6);
            filter: hue-rotate(90deg);
        }

        .progress-content div:nth-child(7) {
            --sz: 3rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 7);
            filter: hue-rotate(105deg);
        }

        .progress-content div:nth-child(8) {
            --sz: 2.5rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 8);
            filter: hue-rotate(120deg);
        }

        .progress-content div:nth-child(9) {
            --sz: 2rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 9);
            filter: hue-rotate(135deg);
        }

        .progress-content div:nth-child(10) {
            --sz: 1.5rem;
            animation-delay: calc(calc(var(--sp) * 0.07) * 10);
            filter: hue-rotate(150deg);
        }

.progress-content div:nth-child(11) {
    --sz: 1rem;
    animation-delay: calc(calc(var(--sp) * 0.07) * 11);
    filter: hue-rotate(165deg);
}

.progress-content div:nth-child(12) {
    --sz: 0.5rem;
    animation-delay: calc(calc(var(--sp) * 0.07) * 12);
    filter: hue-rotate(180deg) brightness(1.5);
}


@keyframes twist {
    0% {
        border-radius: 1%;
        transform: rotate(-90deg);
    }

    100% {
        border-radius: 50%;
        transform: rotate(0deg);
    }
}