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

html, body {
    @apply bg-gray-300 text-teal-800 tracking-wide leading-snug;
	font-family: 'Source Sans Pro', sans-serif;
    font-size: calc(.75rem + 1vmin);
}

.header {
    h1 {
        @apply text-3xl font-bold mb-6 mt-4;
    }
}

.container {
    @apply bg-white mx-auto h-full p-12;
}

@screen md {
    .header {
        h1 {
            @apply text-5xl;
        }
    }

    .container {
        @apply w-3/4 mt-8;
    }
}

.form {
    @apply w-full mt-6;

    .form-grid {
        @apply flex flex-wrap justify-center -mx-3 mb-6;

        .form-group {
            @apply w-full px-3 mb-6;

            .form-label {
                @apply block uppercase tracking-wide text-sm font-bold mb-2;
            }

            .form-input {
                @apply appearance-none block w-full bg-gray-200 border border-gray-200 rounded py-3 px-4 leading-tight;

                &:focus {
                    @apply outline-none bg-white border-gray-500;
                }
            }

            .input-helper {
                @apply text-gray-600 text-sm italic;
            }
        }

        .form-submit {
            @apply text-white font-bold bg-indigo-400 rounded py-3 px-4 leading-tight uppercase self-center;

            &:hover {
                @apply bg-indigo-500;
            }

            &:focus {
                @apply outline-none bg-indigo-600;
            }
        }
    }
}

.letter {
    @apply mx-auto p-1;
    max-width: 66ch;

    .letter__header {
        @apply text-center;
    }

    p {
        @apply my-2;
    }

    ol {
        @apply list-decimal list-inside;
    }

    table {
        @apply w-full;
    }
}

@screen print {
    .container > .header, .container > .form {
        @apply hidden;
    }

    .container {
        @apply w-full max-w-full m-0 p-0;
    }
}