li::marker {
    color: var(--aruna-highlight)
}

hr {
    margin: 2rem 0;
}

h1, h2, h3, h4, h5, h6 { color: var(--aruna-highlight) }

h2 { margin-block-start: 1.5em; }

h3 { margin-block-start: 1em; }

.w-full { width: 100%; }
.w-30 { width: 30%; }
.w-60 { width: 60%; }

.min-w-15 { min-width: 15%; }
.min-w-20 { min-width: 20%; }
.min-w-30 { min-width: 30%; }

.scroll { overflow: scroll; }

.grid { display: grid; }
.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-row { flex-direction: row; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-0 { flex-grow: 0; }

.flex-15 { flex: 0 0 15%; max-width: 15%; }
.flex-20 { flex: 0 0 20%; max-width: 20%;}
.flex-25 { flex: 0 0 25%; max-width: 25%;}
.flex-30 { flex: 0 0 30%; max-width: 30%;}
.flex-35 { flex: 0 0 35%;}
.flex-40 { flex: 0 0 40%; max-width: 40%;}
.flex-45 { flex: 1 0 45%; }
.flex-50 { flex: 1 0 50%; }
.flex-55 { flex: 0 0 55%; }
.flex-60 { flex: 1 0 60%; }
.flex-75 { flex: 1 0 75%; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.items-center { align-items: center; }

.text-center { text-align: center; }

.rounded-4 { border-radius: 4px; }
.rounded-8 { border-radius: 8px; }

.gap-2 { gap: calc(var(--spacing)*2); }
.gap-4 { gap: calc(var(--spacing)*4); }
.gap-6 { gap: calc(var(--spacing)*6); }
.gap-12 { gap: calc(var(--spacing)*12); }
.gap-24 { gap: calc(var(--spacing)*24); }

.p-4 { padding: calc(var(--spacing)*4); }
.p-8 { padding: calc(var(--spacing)*8); }
.p-12 { padding: calc(var(--spacing)*12); }


.p-t-12 { padding-top: calc(var(--spacing)*12); }

.p-b-4 { padding-bottom: calc(var(--spacing)*4); }
.p-b-6 { padding-bottom: calc(var(--spacing)*6); }
.p-b-8 { padding-bottom: calc(var(--spacing)*8); }
.p-b-12 { padding-bottom: calc(var(--spacing)*12); }

.p-x-4 { padding-left: calc(var(--spacing)*4); padding-right: calc(var(--spacing)*4); }
.p-x-6 { padding-left: calc(var(--spacing)*6); padding-right: calc(var(--spacing)*6); }
.p-x-8 { padding-left: calc(var(--spacing)*8); padding-right: calc(var(--spacing)*8); }

.m-t-0 { margin-top: calc(var(--spacing)*0); }
.m-t-2 { margin-top: calc(var(--spacing)*2); }
.m-t-4 { margin-top: calc(var(--spacing)*4); }
.m-t-6 { margin-top: calc(var(--spacing)*6); }
.m-t-8 { margin-top: calc(var(--spacing)*8); }
.m-t-12 { margin-top: calc(var(--spacing)*12); }
.m-t-24 { margin-top: calc(var(--spacing)*24); }

.m-b-6 { margin-bottom: calc(var(--spacing)*6) }
.m-b-8 { margin-bottom: calc(var(--spacing)*8) }
.m-b-12 { margin-bottom: calc(var(--spacing)*12) }
.m-b-24 { margin-bottom: calc(var(--spacing)*24) }

.mx-auto { margin-left: auto; margin-right: auto; }

.m-y-0 { margin-top: calc(var(--spacing)*0); margin-bottom: calc(var(--spacing)*0); }
.m-y-2 { margin-top: calc(var(--spacing)*2); margin-bottom: calc(var(--spacing)*2); }
.m-y-4 { margin-top: calc(var(--spacing)*4); margin-bottom: calc(var(--spacing)*4) }
.m-y-6 { margin-top: calc(var(--spacing)*6); margin-bottom: calc(var(--spacing)*6) }
.m-y-8 { margin-top: calc(var(--spacing)*8); margin-bottom: calc(var(--spacing)*8) }
.m-y-12 { margin-top: calc(var(--spacing)*12); margin-bottom: calc(var(--spacing)*12) }

.text-l { font-size: large; }
.text-xl { font-size: x-large; }
.text-2xl { font-size: xx-large; }
.text-3xl { font-size: 4rem; }

.font-bold { font-weight: bold; }

.menu-title {font-weight: bold; }

.object-cover {
    object-fit: cover;
}

.highlight {
    color: var(--aruna-highlight)
}

.svg-highlight {
    fill: var(--aruna-highlight);
}

.spacer { height: 1px; }

.aruna-border {
    border: 2px dashed var(--aruna-highlight);
}

.accordion-border {
    border-bottom: 2px solid; 
    border-image-slice: 1; 
    border-image-source: linear-gradient(to right, var(--aruna-highlight), var(--bg));
}

.fancy-border {
    --s: 50px; /* the size on the corner */
  
    padding: 20px; 
    border: 3px solid var(--aruna-highlight);
    mask:
      conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
      0 0/calc(100% - var(--s)) calc(100% - var(--s)),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask:
      conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
      0 0/calc(100% - var(--s)) calc(100% - var(--s)),
      linear-gradient(#000 0 0) content-box;
}

.hljs-ln-n {
    color: var(--line-nums)
}