tailwind.css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .bg-home {
        background-color: #330000;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23D18'/%3E%3Cstop offset='1' stop-color='%23330000'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FA3' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FA3' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
    }
    .timer-circle {
        @apply flex
        bg-white bg-opacity-10
        w-[6.5rem]
        h-[6.5rem]
        rounded-full
        md:w-[7.5rem]
        md:h-[7.5rem]
        lg:w-[8.5rem]
        lg:h-[8.5rem];
    }
    .timer-circle div {
        @apply text-white m-auto text-center;
    }
    .timer-count {
        @apply block font-bold text-4xl md:text-5xl lg:text-6xl;
    }
    .timer-type {
        @apply block text-sm;
    }
    .social-link {
        @apply inline-block
        w-10
        h-10
        bg-white bg-opacity-80
        rounded-full
        inline-flex;
    }
}