*
{
  font-size: large;
  font-family: sans-serif;
  color: var(--text-color)
}

body
{
  background: var(--background);
}

nav 
{
  color: var(--soft-linen);
  background-color: var(--content-border):
}

.content
{
  background-color: var(--content-background);
  padding: 20px;
  margin: 05px;
  border-radius: 15px;
  border: 5px var(--content-border) solid;

  line-height: 1.5;
}

#main
{
}
/*.center
{
  display: flex;
  justify-content: center;
  align-items: center;
}*/
img {
    display: block;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    max-height: 90vh;
    margin: 0 auto;
}
h1
{
  text-align: center;
  font-size: xx-large;
  color: var(--title-color);
}
a
{
  font-style: oblique;
}
a:hover
{
  background-color: var(--emerald);
  color: var(--content-background);
  border-radius: 4px;
  text-decoration: none;
}

details, figure
{
  border-radius: 5px;
  border: 1px var(--figure-border) solid;
  border-left: 5px var(--figure-border) solid;
  margin: 9px;
}
div[class="code"] 
{
  background: var(--ink-black);
  color: var(--soft-linen);
  padding-left: 3px;
}
div[class="code"] > code
{
  color: var(--soft-linen);
}
p > code
{
  border-radius: 5px;
  border: 1px var(--figure-border) solid;
}
figcaption, summary
{
  background: var(--figure-border);
  color: white;
}


dt, dt * 
{
  color: var(--emerald);
  font-weight: bold;
}