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

@layer components {}

body {
    @apply bg-primary-500
}

.container {
    @apply max-w-7xl mx-auto grid grid-cols-12 items-center
}

.header {
    @apply p-2 bg-slate-200
}

.logo {
    @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2
}

.menu {
    @apply col-span-8 flex justify-between
}

a[href^="/#"]:not([class]) {
    @apply underline decoration-dotted underline-offset-4 decoration-neutral-500
}

.block {
    @apply py-10;

    &-content {
        @apply col-span-6 h-full flex flex-col justify-between
    }

    &-title {
        @apply text-5xl text-black
    }

    &-image {
        @apply col-span-6 bg-slate-400;
        min-height: 50vh;
    }

    &-btn {
        @apply rounded-full bg-primary-500 px-10 py-2 inline-block text-lg font-bold shadow-lg
    }
}