/* Global spreadsheet for all styles */

@font-face {
    font-family: 'figtree';
    src: url(../files/figtree.ttf);
}
:root {
    --font-color: #000;
    --off-white: #f9f9ed; /* ivory */
    --off-green: #DBF4A7; /* mindaro */
    --highlight: #b1cf5f; /* sage green */
    --highlight-links: #62ad34; /* apple green */
    --highlight-links-hover: #FF312E; /* vermillion */
    --highlight-select: #5b8372;
    --highlight-dark: #1b512d; /* cal poly green */
    --sage: #B5BD89;
    --bg-accent: #89b953;
}

::selection {
    background-color: var(--highlight-select);
    color: white;
}

html, button {
    font-family: 'figtree';
    font-size: max(2vh, 18px);
}

body {
    --square-size: 1.25rem;
    --square-size: max(calc(10em / 3), 1.25rem); /* failsafe if browser does not recognize calc() */
    background-color: var(--bg-accent);
    background-image:   
      repeating-linear-gradient(var(--off-white) 0 1px, transparent 1px 100%),
      repeating-linear-gradient(90deg, var(--off-white) 0 1px, transparent 1px 100%);
    background-size: max(calc(10vw / 3), 2.5rem) max(calc(10vw / 3), 2.5rem);
}
body > div, body > section {
    background-color: var(--off-white);
}

h1 {
    font-size: 2.058rem; /* golden ratio ** 3/2 */
}
h2 {
    font-size:  1.618rem; /* golden ratio ** 2/2 */
}
h3 {
    font-size: 1.272rem; /* golden ratio ** 1/2 */
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: 1rem;
    color: var(--highlight-links-hover);
}

a {
    text-decoration: none;
    color: var(--highlight-links);
    font-weight: 700;
}
a:hover {
    text-decoration: underline;
    color: var(--highlight-links-hover);
}

/* Peculiar blocks */

.important-border {
    border-top: white solid 3px;
    border-left: white solid 3px;
    border-bottom: var(--highlight-links-hover) solid 3px;
    border-right: var(--highlight-links-hover) solid 3px;
}

.spaced-module {
    margin: 2rem 0 0 2rem;
    padding: 1rem;
    display: flexbox;
    border-radius: .3em;
}

.mj {
    display: table;
    margin: 0 auto;
}
.mj-content {
    display: table-cell;
}
.numbered-element {
    display: table-cell;
    text-align: right;
}
.numbered-element::before {
    content: "(";
}
.numbered-element::after {
    content: ")";
}
.mj-foot {
    display: table-row;
    text-align: center;
    font-size: .9rem;
    line-height: .99rem;
}