@import "@fontsource/noto-sans-kr/latin-400.css";
@import "@fontsource/noto-sans-kr/latin-700.css";

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

body {
    /* SvelteKit has 8px margin by default for some reason */
    @apply m-0;
}

#root {
    /* color */
    @apply font-noto-sans dark:bg-dark-ui-bg dark:text-dark-text-default;
}

main {
    /* style */
    @apply flex flex-col items-center;

    /* spacing */
    @apply mx-auto my-0 min-h-screen w-full max-w-5xl px-8 py-0 pb-20;

    /* text */
    @apply text-center font-normal;
}

h1 {
    @apply my-5 text-center text-4xl;
}

h2 {
    /* color */
    @apply dark:bg-dark-text-default dark:text-dark-ui-bg;

    /* text */
    @apply text-3xl font-bold;

    /* spacing */
    @apply mb-5 mt-20 px-4 py-1;
}

a {
    /* style */
    @apply no-underline hover:underline;

    /* color */
    @apply text-anchor hover:text-anchor-accent;
}

p {
    @apply leading-6;
}

b {
    @apply font-bold;
}

.social-profile {
    @apply p-5;

    * {
        @apply text-[#888888] duration-150 ease-out;
    }

    svg {
        @apply w-10;
    }

    &:hover {
        @apply rounded-2xl bg-dark-ui-hover;

        * {
            @apply text-white;
        }
    }
}
