@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;
}

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 {
    @apply font-sans;
    margin-bottom: var(--vspace);
}

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

ul>li {
    @apply font-sans;
    list-style-type: "* ";
    margin-left: 3ch;
    margin-bottom: var(--vspace);
}

ol>li {
    @apply font-sans;
    list-style-type: decimal;
    margin-left: 3ch;
    margin-bottom: var(--vspace);
}

h1 {
    @apply bg-red text-dark uppercase text-center;
    margin-bottom: var(--vspace);
}

h2 {
    @apply font-bold bg-green;
    margin-top: calc(var(--vspace) * 2);
    margin-bottom: var(--vspace);
}

blockquote {
    @apply border-l border-light italic;
    padding-left: calc(1rem - 1px);
}

/* Link Log */

.link-log-body {
    margin-left: 2rem;
}

/* Code Highlighting */

code {
    @apply block;
    margin-bottom: var(--vspace);
}

code.inline {
    @apply bg-blue text-dark;
    display: inline;
}

.line-number {
    @apply align-top text-blue;
    opacity: 0.75;
    padding-right: 1ch;
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

.line {
    white-space: pre-wrap;
}

@font-face {
    font-family: "iAWriterDuoSub";
    src: url("/fonts/iAWriterDuoV-subset.ttf") format('truetype');
    font-style: normal;
}

@font-face {
    font-family: "iAWriterDuoSub";
    src: url("/fonts/iAWriterDuoV-Italic-subset.ttf") format('truetype');
    font-style: italic;
}

@font-face {
    font-family: "iAWriterMonoSub";
    src: url("/fonts/iAWriterMonoV-subset.ttf") format('truetype');
    font-style: normal;
}

@font-face {
    font-family: "iAWriterMonoSub";
    src: url("/fonts/iAWriterMonoV-Italic-subset.ttf") format('truetype');
    font-style: italic;
}