@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');

html {
	font-family: "Google Sans Code", Verdana, Arial, sans-serif;
	font-size: 20px;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
	padding: 0px 50px 0px 25px;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
	line-height: 1.35;
	padding: 0px 0px 10px 0px;
  width: 100%;
}

@media (min-width: 1200px) {
  main {
    width: 75%;
  }
}

@media (min-width: 1600px) {
  main {
    width: 60%;
  }
}

footer {
  text-align: center;
  padding: 1em;
}

.header-separator {
	margin-top: 15px;
}

pre, code {
	background: #eee;
	font-size: 18px;
	font-family: "Google Sans Code", monospace;
	font-style: italic;
}

pre {
	padding: 15px;
	overflow-x: auto;
}

a {
  color: #0066cc;
  text-decoration: none;
	font-weight: 500;
}

a:hover {
  color: #012b52;
}

ol, ul {
	line-height: 1.5;
}

.toc-list {
  display: flex;
  gap: 20px;
}

.toc-list a {
  display: inline-block;
}

/* Responsive with breakpoint-based max-widths */
img {
    width: 100%;
    height: auto;
    max-width: 350px; /* Mobile */
}

@media (min-width: 768px) {
    img {
        max-width: 500px; /* Tablet */
    }
}

@media (min-width: 1024px) {
    img {
        max-width: 700px; /* Desktop */
    }
}

@media (min-width: 1440px) {
    img {
        max-width: 900px; /* Large screens */
    }
}