SimpleNotes/css/src/navbar.pcss

#navbar {
    height: 96px;
    @apply bg-teal-700 shadow-md flex flex-col items-center justify-center px-4;

    #home {
        @apply text-2xl text-gray-100 font-bold;

        &:hover {
            @apply text-blue-300 font-extrabold casual;
        }
    }

    #navigation {
        @apply my-2;

        li {
            @apply inline;

            form {
                @apply inline;
            }
        }

        .txt {
            @apply text-gray-100 font-semibold;

            &:hover {
                @apply text-blue-300 font-bold casual;
            }
        }
    }
}

@screen sm {
    #navbar {
        height: 64px;
        @apply flex-row justify-between;

        #navigation {
            @apply my-0;
        }
    }
}

.centered {
    min-height: calc(100vh - 96px);
}

@screen sm {
    .centered {
        min-height: calc(100vh - 64px);
    }
}