:root {
	--charcoal: #33394aff;
	--slate-gray: #718495ff;
	--slate-gray-2: #697d8fff;
	--gunmetal: #2e323eff;
	--paynes-gray: #4b5a6fff;
    }

    @font-face {
	font-family: 'Blogger Sans';
	src: url('blogger_sans_bold-webfont.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
    }
    
    body {
	font-family: "Lato", sans-serif;
	padding: 2rem;
	max-width: 600px;
	margin: auto;
	/*      color: #333;*/
	background-color: var(--gunmetal);
	color: #eee;
	font-size: 1.1rem;
      
    }
    h1 {
	font-family: 'Blogger Sans', sans-serif;
	font-weight: bold;
	font-size: 3rem;
	margin-bottom: 1rem;
    }

    @media (max-width: 600px) {
	h1 {
	    font-size: 4rem;
	    line-height: 1.2;
	    text-align: left;
	}
    }

    h2 {
	font-family: 'Blogger Sans', sans-serif;
	font-weight: bold;
	font-size: 1.6rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
    }

    .author {
	font-family: 'Blogger Sans', sans-serif;
	font-weight: bold;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
    }

    .incantation {
	font-family: monospace, monospace;
	font-size: 0.8rem;
/*	margin-bottom: 1rem;*/
	max-width: 75%;
    }

    img {
      max-width: 100%;
      height: auto;
      margin: 1rem 0;
      border-radius: 8px;
    }
    ul {
      margin: 1rem 0;
      padding-left: 1.5rem;
    }
    li {
      margin-bottom: 0.5rem;
    }

    a:active {
	color: var(--slate-gray);
    }

    a:visited {
	color: var(--slate-gray-2); 
    }

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


    
    a.button {
	font-family: 'Blogger Sans', sans-serif;
	font-size: 1.2rem;
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	/*      background-color: #0070f3;*/
	background-color: var(--paynes-gray);
	color: #eee;
	text-decoration: none;
	border-radius: 6px;
	font-weight: bold;
    }


    footer {
	text-align: center;
	font-size: 0.9rem;
	margin-top: 4rem;
	color: #888;
    }