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

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

@layer base {
    body {
        @apply min-h-screen bg-gray-900 text-gray-200;
        font-family: Nunito, Arial, Helvetica, sans-serif;
        // font-family: Ubuntu, Arial, Helvetica, sans-serif;
    }
}

@layer components {
    .btn {
        @apply flex items-center justify-center gap-2 rounded-full border border-gray-600 bg-gray-700/50 px-6 py-1 text-lg transition-all;

        &:hover {
            @apply bg-gray-600;
        }
    }

    .box {
        @apply cursor-pointer rounded border border-gray-600 select-none bg-gray-700/25 px-3 py-2 text-center shadow-md shadow-gray-900 transition-all duration-300;

        &:hover {
            @apply md:scale-105  border-gray-400 bg-gray-700 shadow-lg shadow-gray-950;
        }
    }
}

.background {
    --tw-bg-opacity: 1;
    // background-color: rgb(9 9 11 / var(--tw-bg-opacity));
    // background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 119, 198, 0.3), hsla(0, 0%, 100%, 0));
    background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(255, 255, 255, 0.13), hsla(0, 0%, 100%, 0));
}

.text-gradient {
    // background-clip: text;
    // color: transparent;
    // background-image: linear-gradient(to bottom, #e5e5e5, #737373);
    @apply bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent;
}

#resume {
    @apply mx-auto w-full max-w-screen-md space-y-5 rounded-xl border border-gray-600 bg-gray-900 p-4 shadow-md shadow-gray-950;

    & > div {
        @apply rounded-lg bg-gray-800 px-8 py-6 shadow-xl shadow-gray-900;

        & > h3 {
            @apply text-2xl font-semibold;
            @extend .text-gradient;
        }
    }
}

.level {
    @apply h-2 w-full cursor-pointer transition-all hover:scale-125 hover:border hover:border-white lg:h-3 lg:rounded-[1px];
    &-NONE {
        @apply border border-gray-600 bg-gray-800;
    }

    &-FIRST_QUARTILE {
        @apply bg-gray-600;
    }
    &-SECOND_QUARTILE {
        @apply bg-gray-400;
    }
    &-THIRD_QUARTILE {
        @apply bg-gray-200;
    }
    &-FOURTH_QUARTILE {
        @apply bg-white;
    }
}
