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

.button-style-logout {
    @apply text-xl text-white font-extrabold tracking-[3px] w-[160px] min-w-fit h-[33px] pl-2 rounded-[18px] backdrop-blur-[10px] bg-gradient-to-tr from-[#333333] via-[#666666] to-[#000000];
}

.button-style-round {
    @apply text-base text-white text-center pl-1 font-extrabold tracking-[2px] lg:tracking-[4px]
    size-fit rounded-full lg:size-36 md:size-32 bg-gradient-to-br from-[#333333] via-[#666666] to-[#000000];
}

.h1-main{
    @apply font-bold tracking-[10px] text-7xl;
}

.h1-secondary{
    @apply font-black tracking-[7px] text-6xl;
}

.h3-main {
    @apply font-bold text-[40px];
}

.h5-main {
    @apply text-2xl font-bold;
}

.h6-main {
    @apply text-sm text-sky-500 font-bold;
}
.h6-test {
    @apply text-base text-sky-500 font-bold tracking-[4px];
}
.h6-black {
    @apply text-base text-black font-bold tracking-[4px];
}
.label-left {
    @apply text-gray-600 font-bold inline-block pb-2;
}

.heading-main {
    @apply text-center no-underline font-bold text-[70px] tracking-[10px];
}

.input-main {
    @apply rounded-3xl h-10 w-[300px] lg:w-[460px] text-xl bg-gradient-to-tr from-[#f0f0f0] via-[#d3d3d3] to-[#a9a9a9] px-2.5;
}

.label-login{
    @apply text-lg mr-2.5 font-extrabold tracking-[5px];
}

.label-question {
    @apply text-lg mr-3 font-extrabold;
}
.input-style-main {
    @apply rounded-3xl h-10 w-[300px] lg:w-[460px] text-xl bg-gradient-to-tr from-zinc-100 via-neutral-300 to-neutral-400 px-2.5;
}
.input-style-main:focus {
    @apply scale-105;
}

.input-style-good {
    @apply rounded-3xl h-10 w-[300px] lg:w-[460px] text-xl bg-gradient-to-tr from-green-200 via-neutral-200 to-green-200 px-2.5;
}

.finInstructions {
    @apply text-xl text-center text-amber-500 font-bold my-2 tracking-[3px];
}

.backInstructions {
    @apply bg-gradient-to-r from-stone-800 via-stone-800 to-black;
}

.instruction-text {
    @apply text-base text-black font-bold mt-2;
}

.img-main {
    @apply border-8 border-transparent rounded-2xl bg-gradient-to-r from-zinc-600 to-black;
}

.test-button {
    @apply bg-stone-200 size-5 rounded-full border-4 border-white cursor-pointer relative;
}

.grayed-out {
    @apply text-stone-400;
}
.th-main-stone {
    @apply py-3 px-4 bg-stone-500 text-white text-base tracking-[5px]
}
.modal-heading {
    @apply text-2xl text-center font-bold mb-4 underline italic;
}

.modal-paragraph {
    @apply text-base text-gray-700;
}