.relative {
    position: relative;
}

.flex {
    display: flex;
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ping {
    75%, to {
        transform: scale(2);
        opacity: 0;
    }
}

.duration-1000 {
    transition-duration: 1s;
}

.absolute {
    position: absolute;
}

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.rounded-full {
    border-radius: 9999px;
}

.opacity-75 {
    opacity: .75;
}

.h-2\.5 {
    height: .625rem;
}

.w-2\.5 {
    width: .625rem;
}



/* Ping Colors */

.bg-green-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}


.bg-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity)); /* A medium shade of blue */
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity)); /* A slightly darker blue */
}

.bg-red-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 113 113 / var(--tw-bg-opacity)); /* Light red */
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity)); /* Darker red */
}

.bg-purple-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(192 132 252 / var(--tw-bg-opacity)); /* Light purple */
}

.bg-purple-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity)); /* Darker purple */
}

.bg-yellow-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity)); /* Light yellow */
}

.bg-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity)); /* Darker yellow */
}

.bg-pink-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 114 182 / var(--tw-bg-opacity)); /* Light pink */
}

.bg-pink-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 72 153 / var(--tw-bg-opacity)); /* Darker pink */
}

.bg-teal-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(45 212 191 / var(--tw-bg-opacity)); /* Light teal */
}

.bg-teal-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 184 166 / var(--tw-bg-opacity)); /* Darker teal */
}

.bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity)); /* Light orange */
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity)); /* Darker orange */
}

.bg-pastel-pink-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 182 193 / var(--tw-bg-opacity)); /* Light pastel pink */
}

.bg-pastel-pink-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 192 203 / var(--tw-bg-opacity)); /* Slightly darker pastel pink */
}

.bg-fuchsia-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 114 208 / var(--tw-bg-opacity)); /* Bright fuchsia */
}

.bg-fuchsia-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 70 239 / var(--tw-bg-opacity)); /* Darker, deeper fuchsia */
}