/*
 *
 *  micro-style.css
 *  ===============
 *
 *  by Giovanni Santini
 *
 */

/* Global colors */
:root {
  --bg: #FFFFFF;
  --text: #000000;
  --link: #0000ff;
  --link-visited: #000099;
  --link-hover: #0000aa;
  --link-active: #0000cc;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --text: #FFFFFF;
    --link: #4dc5ff;
    --link-visited: #39a7d9;
    --link-hover: #66d9ff;
    --link-active: #1fb6ff;
  }
}

body {
  color: var(--text);
  background-color: var(--bg);

  display: grid;
  grid-template-columns: 1fr min(80rem, 65%) 1fr;

  font-family: monospace;
  font-size: 1rem;
  text-align: justify;
  text-justify: inter-word;
}

body > * {
  grid-column: 2;
}

body > .topnav {
  margin-top: 2rem;
  text-align: center;
}

/* Headings */

h1 {
  margin-top: 3rem;
  font-size: 3rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

/* Links */

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

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

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

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

/* Horizontal separator */
hr {
  margin: 1rem auto;
  width: 100%;
}

/* Different screen sizes */
@media only screen and (max-width: 1200px) {

  body {
    grid-template-columns: 1fr min(80rem, 85%) 1fr;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  h3 {
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 750px) {

  body {
    grid-template-columns: 1fr min(80rem, 90%) 1fr;
    font-size: 0.8rem;
  }
}