body {margin:0px; background: url("images/scatter.png"), url("images/graph paper.png");background-repeat: repeat; font-family: "might-makes-right-bb", sans-serif;}
h1  {font-family:"jazzier";}
h2,h3{font-family: "hobeaux", sans-serif; color: #493c35;}
div.content { background: #A2C291; max-height: 1000px; overflow: scroll;border-radius: 0px 0px 10px 10px;}
div.nav {background: #FCE2B2; border-radius: 10px 10px 0px 0px;}
div.nav a {display: inline-block;}
a {font-family: "jazzier", serif; text-decoration: none; color: #493c35; }
p {color: #493c35; font-family:  "blambot-casual", sans-serif;}
.link {display: flex; text-align: center; padding-left: 40%}
img {width:100%;}
div.logo {background-color: #5F9B7A; padding-top: 25px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; border-radius: 30px 30px 30px 30px;}
.header { margin-top: 5%; margin-bottom: 2%;}
img.portrait {border-radius: 30px 30px 30px 30px;  margin-left: 10%}
form {margin-top: 10%;}
.bigtext {overflow: scroll;}
.noside {overflow-x: none}
a.resbutton {margin-left: 10% ; margin-top: 5%;background: #5F9B7A; border:5px solid #EADE96;border-radius:30px 30px 30px 30px;text-align:center; display:block; width:100%; padding:20px 0; font-family:"hobeaux", sans-serif; color: #493c35 ;}
a.resbutton a:hover {text-decoration: underline;color: #EADE96}
a.linkthing {text-decoration: underline}
img.comic {padding-top: 20%;}
img.comthing {height: 75%; width: 75%; margin-top: 10%; margin-left: 5%;display: block; padding-right: 30%;}
.MTA {height: 660px; overflow-y: hidden; background:#FCE2B2;border-radius: 15pt; width: 100%; }
.inner {height: 540px;overflow-y: auto;  padding:5% 5% 5% 5%}
.push {margin-left: 10%;}
a.lonk{font-family: "hobeaux", sans-serif; color: #2B6746; text-decoration: underline;}
/*scrollbar-color: #406952; */

div.scroller {
  overflow-y: scroll;
  scrollbar-color: #406952 transparent;
}


/* Masonry image gallery styling */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .images {
  gap: 15px;
  max-width: 85%;
  margin: 40px 0;
  columns: 5 310px;
  list-style: none;
}
.gallery .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;	
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.gallery .images img {
  width: 100%;
  transition: transform 0.2s ease;
}
.gallery .images .img:hover img {
  transform: scale(1.1);
}
/* Image lightbox styling */
.lightbox {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  visibility: hidden;
  background: rgba(0,0,0,0.65);
}
.lightbox.show {
  visibility: visible;
}
.lightbox .wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 20px;
  max-width: 850px;
  background: #fff;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.1s ease;
}
.lightbox.show .wrapper {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.wrapper:where(header, .details) {
  display: flex;
  align-items: center;
}
.wrapper header {
  justify-content: space-between;
}
header .details i {
  font-size: 1.7rem;
}
header .details span {
  font-size: 1.2rem;
  margin-left: 10px;
}
header .buttons i {
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  margin-left: 10px;
  background: #6C757D;
  font-size: 1.25rem;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  transition: 0.2s ease;
}
header .buttons i:hover {
  background: #5f666d;
}
.wrapper .preview-img {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.preview-img .img {
  max-height: 65vh;
}
.preview-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Responsive media query code */
@media screen and (max-width: 688px) {
  .lightbox .wrapper {
    padding: 12px;
    max-width: calc(100% - 26px);
  }
  .wrapper .preview-img {
    margin-top: 15px;
  }
  .gallery .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
}




/* ROOT FONT STYLES */

@font-face{
  font-family: "might-makes-right-bb", sans-serif;
font-weight: 400;
font-style: normal; 
}
@font-face{font-family: "jazzier", serif;
font-weight: 400;
font-style: normal;
}
@font-face{
  font-family: "hobeaux", sans-serif;
font-weight: 300;
font-style: normal; 
}
@font-face{font-family: "blambot-casual", sans-serif;
font-weight: 400;
	font-style: normal;}


/**leif fix. no touchy**/
.container::after {
  content: "";
  clear: both;
  display: table;
}