* {
 box-sizing: border-box;
 scrollbar-width:thin;
 scrollbar-color:#024782 #53abf7;
}

html {
cursor: url(../images/cur.webp), auto;
}

h1,h2,h3 {
 padding: 1px;
 padding-left: 2px;
 margin: 1px;
 font-size: .7em;
 letter-spacing: 2px;
 color: #1e2123;
 border-left: 8px solid #1e2123;
 background:rgba(255,255,255,.8);	
 display: block;
}

h4 {
 font-size: .8em;
}

.bb{
 color: #1e2123;
 padding: 1%;
 margin: none;
 font-size: .7em;
 letter-spacing: 3px;
}

.bb a:link, .bb a:visited {
 text-decoration: none;
 color: #1e2123;
}

.bb a:hover {
 color: #1b82db;
 cursor: url(../images/cur.webp), auto;
}

a:link,a:visited {
 text-decoration:none;
 font-weight: 600;
 color: #024782;
}

.midnavliner a:link, .midnavliner a:visited {
 padding: 1px;
 padding-left: 2px;
 margin-left: 10px;
 margin-right: 10px;
 margin-bottom: 2px;
 border-left: 8px solid #1e2123;
 color: #1e2123;
 font-size: .7em;
 letter-spacing: 3px;
 background:rgba(255,255,255,.8);
 display: block;
}

summary {
 padding: 1px;
 padding-left: 2px;
 margin-left: 10px;
 margin-right: 10px;
 margin-bottom: 2px;
 border-left: 8px solid #1e2123;
 font-size: .7em;
 letter-spacing: 3px;
 background:rgba(255,255,255,.8);
}

.detailliner {
 background:rgba(213,236,255,.5);
 border: 1px solid #004e92;
 padding: 5px;
 margin: 5px 10px 5px 10px;
}

@media screen and (max-width: 800px) {
 .midnavliner, .midnavliner a:link, .midnavliner a:visited {
	margin-left: 1px;
	margin-right: 1px;
	letter-spacing: 2px;
 }
}

a:hover, .midnavliner a:hover{
 color:#3699ef;
 text-decoration:none;
 cursor: url(../images/cur.webp), auto;
}

body {
 line-height:1.2em;
 font-size: .8em;
 background-position: top;
 font-family: "open sans", sans serif;
 color:#1e2123;
 overflow-x:hidden;
 background-image:url(../images/bbg.jpg);
 height: 90%;
}

b {
 color:#1b82db;
 font-weight: 600;
}

#layout {
 display: flex;
 box-sizing: border-box;
 height: auto;
 width:60%;
 margin:auto;
 margin-top: 1%;
 margin-bottom: 1%;
}

@media screen and (max-width: 800px) {
 #layout {
	width: 100%;
 }
}

.layouthead {
 background:rgba(255,255,255,.8);	
 background-image:url(../images/hdrnew.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position:right;
 height: 14px;
 image-rendering: pixelated;
}

#stack {
 width: 30%;
 margin-right: .3%;
 height: 60vh;
 background-image:url(../images/sd.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position:right;
 border:1px solid #333333;
 box-shadow:0 0 10px 5px rgba(51,51,51,.5);
 display: flex;
 flex-direction: column;
}

@media screen and (max-width: 800px) {
 #stack {
	background-image:url(../images/sd.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
 }
}

#spread, #frameplace {
 width: 80%;
}

 .midnav {
 background-image:url(../images/sd2.png);
 background-repeat: no-repeat;
 background-position:center;
 height: auto;
 overflow-x: hidden;
}

.blankspace {
 height: 68%;
}

.l1, dt {
 color: #10465e;
 background:rgba(125,181,181,.6);
 border: 1px solid #10465e;
 width: 95%;
 margin: 1%;
 padding-left: 1%;
}

.l2 {
 color: #10465e;
 background:rgba(212,247,247,.6);
 border: 1px solid #10465e;
 width: 95%;
 margin: 1%;
 padding-left: 1%;
}

#bodyframe {
 background-image:url(../images/bdbge3.png);
 border:1px solid #333333;
 height: 60vh;
 overflow-x: hidden;
 overflow-y: scroll;
 box-shadow:0 0 10px 5px rgba(51,51,51,.5);
}

#singleframe {
 background-image:url(../images/bdbge.png);
 border:1px solid #fff;
 box-shadow:0 0 10px 5px rgba(86,167,221,.5);
 width: 50vw;
 margin: auto;
}

#outerflex {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 height: 100vh;
}

@media screen and (max-width: 800px) {
 #singleframe {
	width: 100%;
	margin: auto;
	margin-top: none;
 }
}

#singleframeinner {
 background-image:url(../images/bdbge.png);
 border:1px solid #fff;
 box-shadow:0 0 10px 5px rgba(86,167,221,.5);
 height: 96vh;
 padding-bottom: 2%;
}

.innerframe {
 background-image:url(../images/bdbge.png);
 background-attachment: fixed;
 border:1px solid #fff;
 overflow-x: hidden;
 margin: 3px;
 margin-bottom: 6px;
}

@media screen and (max-width: 800px) {
 #bodyframe {
	max-height: 100%;
 }
}

@media screen and (max-width: 800px) {
 #singleframeinner {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	margin-top: none;
 }
}

#articleliner {
 overflow-x: hidden;
}

.contentliner {
 background: rgba(255, 255, 255, .9);
 border: 1px solid #fff;
 width: 96%;
 height: 92%;
 margin: auto;
 margin-top: 2%;
 margin-bottom: 2%;
 padding: 2%;
}

.laceliner {
 border-width: 7px;
 border-style: solid;
 border-image: url(../images/lclnr2.png) 8 fill round;
 width:95%;
 height: auto;
 margin: auto;
 margin-top: 2%;
 margin-bottom: 2%;
 padding: 1%;
 overflow-y:auto;
} 

.rdlcontent {
 background: rgba(255, 255, 255, .8);
 border: 1px solid #10465e;
 width: 98%;
 margin: auto;
 padding: 5px;
 margin-bottom: 6px;
}

.rdlcontent img{
 max-width: 100%;
}

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

.ytcont {
    position: relative;
    padding-bottom: 56.25%; 
}
.ytcont iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.gallery {
 display: flex;
 flex-wrap: wrap;
}
  
.gallery img {
 width: 100px;
 height: 100px;
 object-fit: cover;
 border: 1px solid ;
 margin: 2px;
 opacity: 0.6; 
 filter: sepia(0.4);
}
  
.gallery img:hover {
 opacity: 1;
}

.galexp {
 position: relative;
 display: none;
 margin-top: 10px;
}

.clx {
 position: absolute;
 top: 0px;
 right: 0px;
}

::-moz-selection {
 color:#fff;
 text-shadow:-1px -1px 0 #1b82db,1px -1px 0 #1b82db,-1px 1px 0 #1b82db,1px 1px 0 #1b82db,0 0 6px #1b82db
}

::selection {
 color:#fff;
 text-shadow:-1px -1px 0 #1b82db,1px -1px 0 #1b82db,-1px 1px 0 #1b82db,1px 1px 0 #1b82db,0 0 6px #1b82db
}

::-webkit-scrollbar {
 width:1em
}

::-webkit-scrollbar-track {
 background:#024782
}

::-webkit-scrollbar-thumb {
 background-color:#53abf7;
 border:3px #fff;
 border-radius:10px
}

.open-sans-<uniquifier> {
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal;
 font-variation-settings:
    "wdth" 100;
}

.masonry-wrapper {
  padding: 1%;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}
.masonry {
  columns: 2;
  column-gap: 10px;
}
.masonry-item {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {  .masonry {
    columns: 2;
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    columns: 2;
  }
}
.masonry-item {
  filter: drop-shadow(0px 2px 2px rgba(16, 70, 94, .8));
  transition: filter .25s ease-in-out;
}
.masonry-item:hover {
  filter: drop-shadow(0px 5px 5px rgba(16, 70, 94, .8));
}