html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 1em;
  line-height: 1.2;
  font-family: 'Calibri', 'Open Sans', sans-serif;
}


img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}



.mainbody {
    font-size: 1.3em;
   padding: 1em;
}

.footer {
    font-size: 1em;
   padding: 1em;
   text-align:center;
   color: #d2d7db;
}
.footer a {
font-weight: bold;
  color: #d2d7db;
  }

.mainbody a {
  //font-size: inherit;
 color: #28536c;
  font-weight: bold;
    color: inherit;
  //text-decoration:none;
  //text-shadow: 1px 1px 5px #052b41;
  
}






#menu li {
  /*
  display: inline;
  float: left;
  margin-right: 1px;
  */
   display : inline;
  
}

/*Hide checkbox*/
input[type=checkbox] {
  display: none;
  -webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menulist {
  display: block;
}
@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  #menu ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  #menu li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  #menu ul li,
  #menu li a {
    width: 100%;
  }
  .show-menu {
    display: block;
  }
}
/*Hover state for top level links*/




.wrapper {
  max-width: 1024px;
  margin: 0 auto;
}
.centered {

}


/* light mode*/
@media (prefers-color-scheme: light) {

  body {
    background: #28536c;
    //background-image: url("paper.png");
    margin: 0px;
  }

  h1 {
    font-size: 1.8em;
    color: #28536c;
    margin: 0;
  }


  .mainbody a:hover {
    background: #658598;
  text-shadow: none;
  text-decoration:none; 
}

.mainbody h1 a:hover {
    background: #658598;
  text-shadow: none;
  text-decoration:none; 
}

#menu ul {
	padding : 0;
	margin : 0;
	white-space : nowrap;
	background-color: #052b41;
	//border: 1px solid #6699CC;
  
	color : #fff;
	float : left;
	width : 100%;
  text-align:center;
}

#menu li a {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;  
  width: 20%;
   background: #052b41;
   text-align: center;
   color: #d2d7db;
   //font-weight : bold;
   text-decoration : none;
   float : left;
   //height: 18px;
   padding-top: 2px;
  line-height: 30px;
   //border-top: 0px solid #6699CC;
   //border-bottom: 5px solid #052b41;
   //rder-right: 1px solid #A3BBDC;
}

#menu li:hover a {
  background: #658598;
}

.bg-lightest {
  background-color: #d2d7db;
  color: #000d15;
}

.bg-light {
  background-color: #658598;
}
.bg-darkest {
  background-color: #000d15;
  color: #d2d7db;
}
.bg-dark {
  background-color: #052b41;
}


.comments {
  font-size: .8em;
  color: #658598;
  font-style: italic;
}

.menulabel{
  text-align:center;
    color: #d2d7db;
}

@media (max-width: 480px) {
  .blogtitle {
    font-size: 1.5em;
    color: #d2d7db;
  }
  .subtitle {
    font-size: 0em;
    color: #658598;
  }
  #menuid {
    display: block;
  }
}
@media (min-width: 481px) and (max-width: 760px) {
  .blogtitle {
    font-size: 3em;
    color: #d2d7db;
  }
  .subtitle {
    font-size: 1.5em;
    color: #658598;
  }
  #menuid {
    display: block;
  }
  
  
}
@media (min-width: 761px) {
  .blogtitle {
    font-size: 5em;
    color: #d2d7db;
  }
  .subtitle {
    font-size: 2em;
    color: #658598;
  }
  #menuid {
    display: none;
  }
}


}



/*dark mode  */
@media (prefers-color-scheme: dark) {

  
  body {
    background: #000;
    //background-image: url("paper.png");
    margin: 0px;
  }

  h1 {
    font-size: 1.8em;
    color: #658598;
    margin: 0;
  }


  .mainbody a:hover {
    background: #658598;
  text-shadow: none;
  text-decoration:none; 
}

.mainbody h1 a:hover {
    background: #658598;
  text-shadow: none;
  text-decoration:none; 
}

#menu ul {
	padding : 0;
	margin : 0;
	white-space : nowrap;
	background-color: #052b41;
	//border: 1px solid #6699CC;
  
	color : #fff;
	float : left;
	width : 100%;
  text-align:center;
}

#menu li a {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;  
  width: 16.66%;
   background: #052b41;
   text-align: center;
   color: #d2d7db;
   //font-weight : bold;
   text-decoration : none;
   float : left;
   //height: 18px;
   padding-top: 2px;
  line-height: 30px;
   //border-top: 0px solid #6699CC;
   //border-bottom: 5px solid #052b41;
   //rder-right: 1px solid #A3BBDC;
}

#menu li:hover a {
  background: #658598;
}

.bg-darkest {
  background-color: #d2d7db;
  color: #000d15;
}

.bg-dark {
  background-color: #658598;
}
.bg-lightest {
  background-color: #000d15;
  color: #d2d7db;
}
.bg-light {
  background-color: #052b41;
}


.comments {
  font-size: .8em;
  color: #658598;
  font-style: italic;
}

.menulabel{
  text-align:center;
    color: #d2d7db;
}

@media (max-width: 480px) {
  .blogtitle {
    font-size: 1.5em;
    color: #d2d7db;
  }
  .subtitle {
    font-size: 0em;
    color: #658598;
  }
  #menuid {
    display: block;
  }
}
@media (min-width: 481px) and (max-width: 760px) {
  .blogtitle {
    font-size: 3em;
    color: #d2d7db;
  }
  .subtitle {
    font-size: 1.5em;
    color: #658598;
  }
  #menuid {
    display: block;
  }
  
  
}
@media (min-width: 761px) {
  .blogtitle {
    font-size: 5em;
    color: #d2d7db;
  }
  .subtitle {
    font-size: 2em;
    color: #658598;
  }
  #menuid {
    display: none;
  }
}

}