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

:root {
    --bg-color: #02030f;
    --header-height: 78px;
}

body {
    @apply bg-[var(--bg-color)] text-white;
}

.twui-button-general {
    @apply rounded-none bg-white text-black;
}

.twui-button-general:hover {
    @apply !text-white !bg-white/10 outline-white/10;
}

.twui-button-primary-outlined {
    @apply !text-white !border-white/50 !outline-white/50 bg-transparent;
}

.twui-button-primary-outlined:hover {
    @apply !text-white/70 !border-white/20 !outline-white/20;
    @apply !bg-transparent;
}

.twui-section {
    @apply items-start py-20;
}

.twui-span,
.twui-paragraph {
    @apply dark:text-white/70 leading-relaxed;
}

.twui-span a,
.twui-paragraph a {
    @apply text-blue-400 hover:underline;
}

.twui-card {
    @apply rounded-none !bg-transparent md:p-10 p-4;
}

.twui-anchor {
    @apply !text-blue-500 !border-blue-500/50 hover:!border-transparent;
}

.twui-h1 {
    @apply text-[30px] md:text-[40px] lg:text-[44px];
}

.twui-button-primary-ghost {
    @apply bg-transparent text-white;
}