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

@layer base {
    @media (max-width: 639px) {
        #main-menu-toggle:checked ~ .main-menu {
            display: block;
        }

        .main-menu {
            display: none;
        }
    }
}

@layer components {
    .header-border {
        @apply border-b-8;

        border-image: linear-gradient(
            to right,
            theme('colors.purple.400') 20%,
            theme('colors.orange.400') 20%,
            theme('colors.orange.400') 40%,
            theme('colors.pink.400') 40%,
            theme('colors.pink.400') 60%,
            theme('colors.green.500') 60%,
            theme('colors.green.500') 80%,
            theme('colors.blue.400') 80%,
            theme('colors.blue.400') 100%
        ) 5;
    }
}

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

@layer base {
    @media (max-width: 639px) {
        #main-menu-toggle:checked ~ .main-menu {
            display: block;
        }

        .main-menu {
            display: none;
        }
    }
}

@layer components {
    .header-border {
        @apply border-b-8;

        border-image: linear-gradient(
            to right,
            theme('colors.purple.400') 20%,
            theme('colors.orange.400') 20%,
            theme('colors.orange.400') 40%,
            theme('colors.pink.400') 40%,
            theme('colors.pink.400') 60%,
            theme('colors.green.500') 60%,
            theme('colors.green.500') 80%,
            theme('colors.cyan.400') 80%,
            theme('colors.cyan.400') 100%
        ) 5;
    }
}

Fix site name border gradient
Fix site name border gradient
