@import "tailwindcss/base";
@import "base.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Colors */
:root {
    --lightgray: #e0e0e0;
    --gray: #C0C0C0;
    --darkgray: #333;
    --navy: #17050F;
    --blue: #082840;
    --white: #fff;
    --beige: #fffff5;
}

header {
    @apply border-b-[1px] border-dashed border-slate-700 flex flex-wrap items-center;

    > div#Title {
        @apply my-2 mx-4;
    }
    > ul {
        @apply my-2;

        > li {
            @apply relative inline px-2 py-8 my-8;

            > ul {
                @apply hidden;
            }
        }
        > li:hover > ul {
            @apply block absolute left-1 flex flex-col bg-amber-200 drop-shadow-lg rounded-md border-amber-900 border-2 m-1;

            > li {
                @apply whitespace-nowrap p-1;
            }

            > li:hover {
                @apply bg-amber-800 text-white;
            }
        }
    }
}