@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html {
    --base-font-size: 20;
    --base-line-height: 1.3;
    --font-size: calc(var(--base-font-size) * 1px);
    --line-height: calc(var(--base-line-height) * 1rem);
    --base-vspace: calc(var(--base-line-height) * var(--base-font-size));
    --vspace: calc(var(--base-vspace) * 1px);
    --line-trim: -0.6666666666666667px;
    font-size: var(--font-size);
    line-height: var(--line-height);
}

.container {
    max-width: 65ch;
}

a {
    @apply text-blue;
}

a::before {
    /* content: "⇲"; */
}

nav a {
    @apply text-dark;
}

.box {
    --tw-border-opacity: 1;
    border-color: rgb(181 190 255 / var(--tw-border-opacity));
    margin: 10.5px 4.5px;
    padding: 10.5px 14.5px;
}

p {
    margin-bottom: var(--vspace);
}

a {
    display: inline-block;
}

a:hover {
    @apply bg-light text-dark;
}

@font-face {
    font-family: "JetBrainsMono";
    src: url("/fonts/JetBrainsMono-VariableFont_wght.ttf");
    font-style: normal;
}

@font-face {
    font-family: "JetBrainsMono";
    src: url("/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf");
    font-style: italic;
}