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

/*
    Contains all repeatedly used TW classes
 */

/* GENERAL */
.background-standard {
    @apply bg-amber-50;
}
.modal-heading {
    @apply text-2xl text-center font-bold mb-4 underline italic;
}

.modal-paragraph {
    @apply text-base text-gray-700;
}
/* TEST PAGES */
.instruct-image {
    @apply border-8 border-gray-700 rounded-xl w-3/4 mx-auto mb-4 mt-3;
}
.test-button {
    @apply bg-stone-200 size-5 rounded-full border-4 border-white cursor-pointer relative;
}
.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;
}
.instruct-image {
    @apply border-8 border-gray-700 rounded-xl w-3/4 mx-auto mb-4 mt-3;
}
.grayed-out {
    @apply text-stone-400;
}

/* FORMS */
.input-style {
    @apply rounded-3xl text-xl bg-gradient-to-tr from-[#f0f0f0] via-[#d3d3d3] to-[#a9a9a9];
}
.label-bold {
    @apply text-lg font-extrabold tracking-[5px];
}

.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;
}

.input-fx {
    @apply focus:shadow-input-focus transition-shadow-transform
    duration-300 ease-in-out focus:scale-105;
}
.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;
}
.select-style {
    @apply bg-gray-800 text-base text-white font-extrabold rounded-md px-2 tracking-widest py-0.5
}

.option-style-1 {
    @apply bg-gray-800 text-base text-white font-bold px-2 tracking-wide py-0.5;
}
.label-question {
    @apply text-lg mr-3 font-extrabold;
}
.label-login{
    @apply text-lg mr-2.5 font-extrabold tracking-[5px];
}
/* BUTTONS */
.button-style-logout {
    @apply text-xl text-white font-extrabold tracking-[3px] w-[160px] min-w-fit h-[30px] 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-2 font-extrabold tracking-[4px] lg:tracking-[2px]
    size-fit rounded-full lg:size-36 md:size-32 bg-gradient-to-br from-[#333333] via-[#666666] to-[#000000];
}

.admin-button {
    @apply text-[20px] font-extrabold tracking-[3px]
    pl-[5px] w-[160px] h-[30px]
    rounded-[18px] text-white
    bg-gradient-to-tr from-[#333333]
    via-[#666666]
    to-[#000000];
}

/* HEADINGS */
.h6-main {
    @apply text-sm text-sky-500 tracking-[4px] font-extrabold;
}
.h6-test {
    @apply text-base text-sky-500 font-bold tracking-[4px];
}
.h5-main {
    @apply text-2xl font-bold;
}
.h4-standard {
    @apply text-3xl font-medium;
}
.h3-main {
    @apply font-bold text-[40px];
}
.heading-main {
    @apply text-center no-underline font-bold text-[70px] tracking-[10px];
}
.h1-main{
    @apply font-bold tracking-[10px] text-7xl;
}
.h1-secondary{
    @apply font-black tracking-[7px] text-6xl;
}

/* TABLES */
.table-head-main {
    @apply uppercase tracking-wider sticky top-0 bg-stone-500 border-b-4 border-b-white;
}

.th-main {
    @apply py-3 px-4 text-white text-base tracking-[5px];
}
.th-main-stone {
    @apply py-3 px-4 bg-stone-500 text-white text-base tracking-[5px]
}
.td-main {
    @apply py-3 px-4 text-xs text-white font-extrabold tracking-[2px];
}

.td-green {
    @apply py-3 px-4 text-xs text-green-500 font-extrabold tracking-[2px];
}

/* TERMS */
.terms-heading {
    @apply font-bold text-2xl ps-16 text-shadow-sm;
}

.terms-text {
    @apply text-base ps-24;
}