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

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

html,
body,
#root {
    @apply overflow-x-hidden;
}

html,
body {
    @apply h-screen;
}

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

#root {
    /* spacing */
    @apply h-full;

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

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 hover:rounded-2xl hover:bg-dark-ui-hover;

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

    svg {
        @apply m-5 w-10;
    }

    &:hover {
        * {
            @apply text-white;
        }
    }
}
