:root {
    --color-primary: #2C3032; /* Black */
    --color-secondary: #E8E6E3; /* White */
    --link-color-start: #EEC643; /* Yellow */
    --link-color-hover: #CD5C5C; /* Red */
    --link-color-click: #9999FF; /* Blue */
    --link-color-visit: #6EF46F; /* Green */
}

html, body {
    height: 100%;
    margin: 0;
    color: var(--color-secondary);
    background-color: var(--color-primary);
}

@media screen and (min-width: 601px) {
  body {
    font-size: 1vw;
  }
}

@media screen and (max-width: 600px) {
  body {
    font-size: 4vw;
  }
}

a {
    text-decoration-style: dotted;
    text-decoration-thickness: from-font;
}

/* NOTE: Order of a: sections is important */
a:link {
    color: var(--link-color-start);
}

a:hover {
    color: var(--link-color-hover) !important;
}

a:active {
    color: var(--link-color-click) !important;
}

a:visited {
    color: var(--link-color-visit);
}

.grid-two-wide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    grid-auto-rows: minmax(2rem, auto);
}

.list-item-internal-link {
    list-style-type: disclosure-open;
}

.list-item-external-link {
    list-style-type: disclosure-closed;
}

#link-section-left {
    grid-column: 1 / 2;
    grid-row: 1;
}

#link-section-right {
    grid-column: 2 / 2;
    grid-row: 1;
}