body {
    background: black;
    margin: 0;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgb(255, 255, 255) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: 1;
    animation: starAnim 10s linear infinite;
    pointer-events: none;

    z-index: 0;
}

.typescont {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    flex-wrap: wrap;
}

.typescont>div {
    height: 150px;
    width: 150px;
    background-color: grey;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    transition: transform .25s ease;
}

/* .groupscont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: -1;
}

.groupscont>div {
    height: 200px;
    width: 500px;
    background-color: grey;
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 50px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    opacity: 0;

} */


.typescont>div:hover {
    transform: translateY(-6px);
}

h3 {
    z-index: 1;
    text-align: center;
}

.typescont>div::before {
    content: "";
    position: absolute;
    inset: -50%;
    animation: gradientAnim 3s linear infinite;
}

.typescont>div::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        #404040;
}

/* .groupscont>div::before {
    content: "";
    position: absolute;
    inset: -200%;
    animation: gradientAnim 3s linear infinite;
}

.groupscont>div::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: #71797E;


}

.group-1>div{
    height: 75px;
    width: 75px;
    background-color: black;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    opacity: 1;

    cursor: pointer;

}

.group-1>div::before {
    content: "";
    position: absolute;
    inset: -50%;
    animation: gradientAnim 3s linear infinite;
}

.group-1>div::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: #708090;
    color: black;


}

.group-2>div {
    height: 75px;
    width: 75px;
    background-color: black;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    opacity: 1;

    cursor: pointer;

}

.group-2>div::before {
    content: "";
    position: absolute;
    inset: -50%;
    animation: gradientAnim 3s linear infinite;
}

.group-2>div::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: #708090;
    color: black;


}

.group-3>div {
    height: 75px;
    width: 75px;
    background-color: black;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    opacity: 1;

    cursor: pointer;

}

.group-3>div::before {
    content: "";
    position: absolute;
    inset: -50%;
    animation: gradientAnim 3s linear infinite;
}

.group-3>div::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: #708090;
    color: black;


}

.group-4>div {
    height: 75px;
    width: 75px;
    background-color: black;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    opacity: 1;

    cursor: pointer;

}

.group-4>div::before {
    content: "";
    position: absolute;
    inset: -50%;
    animation: gradientAnim 3s linear infinite;
}

.group-4>div::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: #708090;
    color: black;


}

.group-5>div {
    height: 75px;
    width: 75px;
    background-color: black;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    opacity: 1;

    cursor: pointer;

}

.group-5>div::before {
    content: "";
    position: absolute;
    inset: -50%;
    animation: gradientAnim 3s linear infinite;
}

.group-5>div::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: #708090;
    color: black;


}

.group-6>div {
    height: 75px;
    width: 75px;
    background-color: black;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    opacity: 1;

    cursor: pointer;

}

.group-6>div::before {
    content: "";
    position: absolute;
    inset: -50%;
    animation: gradientAnim 3s linear infinite;
}

.group-6>div::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: #708090;
    color: black;


} */

/* glow colors */

.type-1 {
    filter: drop-shadow(0 0 12px #00E5FF) drop-shadow(0 0 24px #C200FB);
}

.type-2 {
    filter: drop-shadow(0 0 12px #FFEF4D) drop-shadow(0 0 24px #59B9C7);
}

.type-3 {
    filter: drop-shadow(0 0 12px #722F37) drop-shadow(0 0 24px #064734);
}

.type-4 {
    filter: drop-shadow(0 0 12px #241571) drop-shadow(0 0 24px #FEEF4C);
}

.type-5 {
    filter: drop-shadow(0 0 12px #000871) drop-shadow(0 0 24px #7F49B4);
}

.type-6 {
    filter: drop-shadow(0 0 12px #FFBA49) drop-shadow(0 0 24px #F5E4CF);
}

/* gradients */

.type-1::before {
    background: conic-gradient(#05614B, #00E5FF, #C200FB, #05614B);
}

.type-2::before {
    background: conic-gradient(#81021F, #FFEF4D, #59B9C7, #81021F);
}

.type-3::before {
    background: conic-gradient(#722F37, #064734, #722F37);
}

.type-4::before {
    background: conic-gradient(#0015FF, #241571, #FEEF4C, #0015FF);
}

.type-5::before {
    background: conic-gradient(#99CCFF, #000871, #7F49B4, #99CCFF);
}

.type-6::before {
    background: conic-gradient(#705A3E, #FFBA49, #F5E4CF, #705A3E);
}

/* .group-1::before {
    background: conic-gradient(#05614B, #00E5FF, #C200FB, #05614B);
}

.group-2::before{
    background: conic-gradient(#81021F, #FFEF4D, #59B9C7, #81021F);
}

.group-3::before{
    background: conic-gradient(#722F37, #064734, #722F37)
}

.group-4::before{
    background: conic-gradient(#0015FF, #241571, #FEEF4C, #0015FF);
}

.group-5::before{
    background: conic-gradient(#99CCFF, #000871, #7F49B4, #99CCFF);
}

.group-6::before{
    background: conic-gradient(#705A3E, #FFBA49, #F5E4CF, #705A3E);
}


.group-1-type-1::before{
    background: conic-gradient(#05614B, #000000, #05614B);
}

.group-1-type-2::before{
    background: conic-gradient(#00E5FF, #000000, #00E5FF);
}

.group-1-type-3::before{
    background: conic-gradient(#C200FB, #000000, #C200FB);
}


.group-2-type-1::before {
    background: conic-gradient(#81021F, #000000, #81021F);
}

.group-2-type-2::before {
    background: conic-gradient(#FFEF4D, #000000, #FFEF4D);
}

.group-2-type-3::before {
    background: conic-gradient(#59B9C7, #000000, #59B9C7);
}


.group-3-type-1::before {
    background: conic-gradient(#722F37, #000000, #722F37);
}

.group-3-type-2::before {
    background: conic-gradient(#064734, #000000, #064734);
}

.group-3-type-3::before {
    background: conic-gradient(#000000, #000000, #000000);
}

.group-4-type-1::before {
    background: conic-gradient(#0015FF, #241571, #FEEF4C, #0015FF);
}

.group-5-type-1::before {
    background: conic-gradient(#99CCFF, #000871, #7F49B4, #99CCFF);
}

.group-6-type-1::before {
    background: conic-gradient(#705A3E, #000000, #705A3E);
}

.group-6-type-2::before {
    background: conic-gradient(#FFBA49, #000000, #FFBA49);
}

.group-6-type-3::before {
    background: conic-gradient(#F5E4CF, #000000, #F5E4CF);
} */





@keyframes gradientAnim {
    to {
        transform: rotate(360deg);
    }
}

@keyframes starAnim {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
    }
}