body {
    color: white !important;
    text-align: center;
    background-color: #000c52;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}



h2 {
    color: white !important;
}

p {
    color: #b4b4b4 !important;
}

.list-group-item {
    background-color: #ffffff00;
    padding-top: 20px;
    padding-bottom: 20px
}

a {
    color: #ebebeb !important;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}

    a:hover {
        color: white !important;
    }

.ikon {
    margin: 20px;
}

.card {
    box-shadow: rgba(0, 0, 0, 1) 0px 0px 50px;
    background: #000000ac;
    max-width: 350px;
    position: absolute !important;
    text-align: center;
    width: 98% !important;
    margin-left: 1%;
    margin-right: 1%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    padding: 3px;
    border-start-start-radius: 250px;
    border-start-end-radius: 250px;
    z-index: 100 !important;
}




.logo {
}

    .logo:hover {
        filter: brightness(1.2);
    }


section {
    position: relative;
    height: 100vh;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
}

.blob:nth-child(1) {
    --angle-delay: 0s;
    --moving-delay: 0s;
    --color: #60a300;
}

.blob:nth-child(2) {
    --angle-delay: -4s;
    --moving-delay: -6s;
    --color: #ffd800;
}

.blob:nth-child(3) {
    --angle-delay: -8s;
    --moving-delay: -12s;
    --color: #8a0000;
}

.blob:nth-child(4) {
    --angle-delay: -12s;
    --moving-delay: -18s;
    --color: #5e004d;
}

.blob:nth-child(5) {
    --angle-delay: -16s;
    --moving-delay: -24s;
    --color: #d89f00;
}

.blob {
    position: relative;
    animation: angle 20s var(--angle-delay) infinite linear;
}

    .blob::after {
        content: '';
        position: absolute;
        width: 2000px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--color);
        filter: blur(300px) opacity(0.7);
        animation: moving 30s var(--moving-delay) infinite ease-in-out alternate;
    }

@keyframes angle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes moving {
    from {
        transform: translate(-50%,-100%);
    }

    to {
        transform: translate(-50%,50%);
    }
}

@media(max-width:600px){
    .blob::after {
        width: 500px;
        filter: blur(125px);
    }
}