:root {
    --crosspost-color: #54C2C3;
    --pptcontrol-color: #CF3401;
    --chesspie-color: #F19203;
    --maclicker-color: #4033FF;
    --customrichpresence-color: #728ADA;
}


/* Projekte */

.crosspost-project {
    background: radial-gradient(circle at 50% 70%, var(--crosspost-color), transparent 60%);
}

.crosspost-title {
    color: var(--crosspost-color);
}

.pptcontrol-project {
    background: radial-gradient(circle at 50% 70%, var(--pptcontrol-color), transparent 60%);
}

.pptcontrol-title {
    color: var(--pptcontrol-color);
}

.chesspie-project {
    background: radial-gradient(circle at 50% 70%, var(--chesspie-color), transparent 60%);
}

.chesspie-title {
    color: var(--chesspie-color);
}

.customrichpresence-project {
    background: radial-gradient(circle at 50% 70%, var(--customrichpresence-color), transparent 60%);
}

.customrichpresence-title {
    color: var(--customrichpresence-color);
}

.maclicker-project {
    height: auto;
    max-height: 600px;
    background: radial-gradient(circle at 50% 70%, var(--maclicker-color), transparent 60%);
}

@media only screen and (max-width: 950px) {
    .maclicker-project {
        padding-bottom: 70px;
    }
}

.maclicker-title {
    color: var(--maclicker-color);
}


/* Tags */

.swift {
    box-shadow: 0 0 10px 0 rgba(240, 81, 56, 0.5);
}

.swiftui {
    box-shadow: 0 0 10px 0 rgba(0, 135, 254, 0.5);
}

.python {
    box-shadow: 0 0 10px 0 rgba(53, 114, 165, 0.5);
}

.fastapi {
    box-shadow: 0 0 10px 0 rgba(0, 148, 133, 0.5);
}

.docker {
    box-shadow: 0 0 10px 0 rgba(29, 99, 237, 0.5);
}

.kotlin {
    box-shadow: 0 0 10px 0 rgba(180, 34, 233, 0.5);
}

.jetpack-compose {
    box-shadow: 0 0 10px 0 rgba(46, 199, 129, 0.5);
}

.csharp {
    box-shadow: 0 0 10px 0 rgba(22, 134, 1, 0.5);
}

.uwp {
    box-shadow: 0 0 10px 0 rgba(68, 138, 219, 0.5);
}

.xamarin {
    box-shadow: 0 0 10px 0 rgba(53, 152, 219, 0.5);
}

.tkinter {
    box-shadow: 0 0 10px 0 rgba(255, 220, 86, 0.5);
}

.uikit {
    box-shadow: 0 0 10px 0 rgba(48, 166, 214, 0.5);
}

.open-source {
    animation: open-source-rainbow 5s linear infinite;
}

@keyframes open-source-rainbow {
    0% {
        box-shadow: 0 0 10px 0 rgba(255, 0, 0, 0.5), 0 0 10px 0 rgba(255, 165, 0, 0.5), 0 0 10px 0 rgba(255, 255, 0, 0.5);
    }
    17% {
        box-shadow: 0 0 10px 0 rgba(255, 165, 0, 0.5), 0 0 10px 0 rgba(255, 255, 0, 0.5), 0 0 10px 0 rgba(0, 128, 0, 0.5);
    }
    33% {
        box-shadow: 0 0 10px 0 rgba(255, 255, 0, 0.5), 0 0 10px 0 rgba(0, 128, 0, 0.5), 0 0 10px 0 rgba(0, 0, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 10px 0 rgba(0, 128, 0, 0.5), 0 0 10px 0 rgba(0, 0, 255, 0.5), 0 0 10px 0 rgba(75, 0, 130, 0.5);
    }
    67% {
        box-shadow: 0 0 10px 0 rgba(0, 0, 255, 0.5), 0 0 10px 0 rgba(75, 0, 130, 0.5), 0 0 10px 0 rgba(238, 130, 238, 0.5);
    }
    83% {
        box-shadow: 0 0 10px 0 rgba(75, 0, 130, 0.5), 0 0 10px 0 rgba(238, 130, 238, 0.5), 0 0 10px 0 rgba(255, 0, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 10px 0 rgba(238, 130, 238, 0.5), 0 0 10px 0 rgba(255, 0, 0, 0.5), 0 0 10px 0 rgba(255, 165, 0, 0.5);
    }
}