body {
        margin: 8px auto;
        font-family:  Georgia;
        max-width: 1000px;
        font-size: 18px;
        line-height: 1.4;
        --bg: #fff;
        --fg: #444;
        --red: red;
        --blue: rgb(0, 0, 255);
        --green: green;
        --gray: gray;
        --dark-gold: #bfa100;
        --brown: #4a2d30;
        --odd-row: #f0f0f0;

        background-color: var(--bg);
        color: var(--fg);
      }
      
      img {
        max-width: 95%;
        max-height: 95%;
      }

      .img-post-75 {
        max-width: 75%;
        max-height: 75%;
      }

      .published {
        font-size: 14px;
      }
      
      .circular_image {
        border-radius: 50%;

        }
        .circular_image_small {
          border-radius: 50%;
          max-width: 50%;
          }
      
      .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

      /*@media (prefers-color-scheme: light) {
        body {
          --bg: #101010;
          --fg: white;
          --red: #ff5050;
          --blue: #9090ff;
          --green: #50da50;
          --gray: gray;
          --brown: #745c5f;
          --odd-row: #202020;

        }

		a.headline {
			font-size: 30px;
			font-weight: bold;
		}
      }*/

      body.light {
        --bg: white;
        --fg: #444;
        --red: red;
        --blue: rgb(59, 59, 206);
        --green: green;
        --gray: gray;
        --brown: #4a2d30;
        --odd-row: #f0f0f0;

      }

      body.dark {
        --bg: #333;
        --fg: #ddd;
        --red: #ff5050;
        --blue: #9090ff;
        --green: #33ae33;
        --gray: gray;
        --brown: #745c5f;
        --odd-row: #202020;

      }


	a.headline {
		font-size: 30px;
		font-weight: bold;
	}
	a.no-decoration, a.no-decoration:visited, a.no-decoration:active {
		text-decoration: none;
		color: var(--green);
	}
		
	div.page-title {
		font-size: 4em;
		font-weight: bold;
		/*margin-block-end: .33em;*/
		text-align: center;
	}
	p.center-align {
		text-align: center;
	}
	h1.settings{
		padding-top: 0px;
		line-height: 1.2;
		}
	h2.settings{
		margin-bottom: 0px;
		margin-left: 8px;
		text-align: center;
		line-height: 1.2;
	}


      /* Subset of Tailwind styles */
	.container { width: 100%; }

	.flex { display: flex; }
	.grid { display: grid; }
	.hidden { display: none; }
	.invisible { visibility: hidden; }
	.inline-block { display: inline-block; }

	.sticky { position: sticky; }
	.-top-0 { top: 0px; }

	.flex-1 { flex: 1 1 0px; }
	.flex-initial { flex: 0 1 initial; }
	.flex-col { flex-direction: column; }
	.flex-wrap { flex-wrap: wrap; }
	.flex-none { flex: none; }
	.justify-between { justify-content: space-between; }
	.justify-evenly { justify-content: space-evenly; }
	.justify-center { justify-content: center; }
	.justify-items-center { justify-items: center; }
	.items-center { align-items: center; }
	.items-start { align-items: flex-start; }
	.items-end { align-items: flex-end; }
	.self-start { align-self: start; }
	.self-center { align-self: center; }

	.text-center { text-align: center; }
	.text-right { text-align: right; }
	.whitespace-pre-wrap { white-space: pre-wrap; }
	.italic { font-style: italic; }
	.font-bold { font-weight: bold; }
	.no-underline { text-decoration: none; }

	.text-fg { color: var(--fg); }
	.text-red { color: var(--red); }
	.text-blue { color: var(--blue); }
	.text-green { color: var(--green); }
	.text-gray { color: var(--gray); }
	.text-dark-gold { color: var(--dark-gold); }
	.text-brown { color: var(--brown); }

	.text-away { color: var(--away-color); }
	.text-home { color: var(--home-color); }

	.bg-bg { background-color: var(--bg); }
	.bg-odd { background-color: var(--odd-row); }

	.cursor-pointer { cursor: pointer; }

	/* Teeny-tiny component-like styles */
	.nav {
	color: var(--green);
	text-decoration: underline;
	cursor: pointer;
	}


	label.toggle-on, label.toggle-off { cursor: pointer; }
    input[type="checkbox"] { display: none; }
    input[type="checkbox"]:checked ~ .toggle-on { display: none; }
    input[type="checkbox"]:not(:checked) ~ .toggle-off { display: none; }
    .toggle-on, .toggle-off {
		color: var(--green);
     }

    .champion {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        text-align: center;
      }

	/* Create two equal columns that floats next to each other */
	.column {
		float: left;
		padding: 10px;
	
	}

	.left-big {
		width: 37%;
	}

	.right-small {
		width: 21%;
	}

	.column-50 {
		width: 48%;
	}
	.column-33 {
		width: 32%;
	}
	.column-99 {
		width: 99%;
	}
	.column-75 {
		width: 70%;
	}
	
	.column-25 {
		width: 23%;
	}
	
	.row{
		padding: 10px;
	}
	
	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;	
		clear: both;
	}   

	@media screen and (max-width: 600px) {
		.column {
			width: 100%;
		}	
	}

	.divpadding {
		padding: 5px;
	}
	.responsive {
                width: 100%;
                height: auto;
     }
	 
	 .responsive-logo {
                width: 20%;
                height: auto;
     }
	 .responsive-logo-50 {
				width: 40%;
				height: auto;
	 }
	.center-text { 
				text-align: center;
	}


.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  /*background-color: #00BAF0;
  background: linear-gradient(to left, #f46b45, #eea849);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ 
  color: #FFF; 
  height: 50px;*/
  padding: 1em;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  margin: 0 1rem;
  overflow: hidden;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: var(--green);
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: --bg;
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 700px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 60px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0px;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu li {
    border-bottom: 1px solid var(--fg);
    height: 2em;
    padding-top: 1em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: #000;
    background-color: var(--bg);
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid var(--fg);
  }
  .menu a {
    width: 100%;
    text-align: center;
  }
}