:root{
--dark: rgb(24, 12, 1);
--red: rgb(49, 4, 4);
--purple: #3d001fff;
--light: #d7d0dcff;
--geen: rgb(200, 212, 177);

--dark_op: rgba(24, 12, 1, 0.75);
--red_op: hsla(0, 100%, 16%, 0.75);
--purple_op: hsla(330, 100%, 12%, 0.75);
--lavender: hsla(275, 15%, 84%, 1);
--geen_op: rgba(200, 212, 177, 0.75);

--mlight: rgb(184, 170, 194);
--mlight_op: rgba(184, 170, 194, 0.75);

/*.eagle-lake-regular {
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
}
.cutive-mono-regular {
  font-family: "Cutive Mono", monospace;
  font-weight: 400;
  font-style: normal;
}
.ewert-regular {
  font-family: "Ewert", serif;
  font-weight: 400;
  font-style: normal;
}*/

}


.rleft {
  rotate: 15deg;
  transition: 2s;
}
.rright {
  rotate: -15deg;
  transition: 2s;
}
.rright:hover, .rleft:hover {
  rotate: 0deg;
  transition: 2s;
}
html {scroll-behavior: smooth;
  cursor: url("../images/cursor.gif"), auto;
}

details > summary {cursor: pointer;}
* {box-sizing: border-box;}

::selection {background:var(--mlight_op);
  color: #280a0a;}

body
{
	background-image: url("../images/bg-base.jpg");
    background-repeat: round;
    color: var(--light);
	font-size: 12pt;
	font-family: "Eagle Lake", serif;

}
main {
  /*width: 900px;*/
  width: 85%;
  background: var(--dark_op);
  border: 5px solid var(--red);
  border-radius: 5px;
  margin: 20px ;
  padding: 12px 48px;
  float:right;

}
h1, h2, h4 {
  text-shadow: -2px 6px 0px var(--red_op);
}
h1
{
	text-align: center;
	font-size: 26pt;
}
h2 {
	font-size: 24pt;
	font-family: "Ewert", serif;
	color: var(--geen);
}
h4 {
  font-size:14pt;
  color: var(--geen);
}
header
{
	background-color: var(--dark_op);
  background-image: url("../images/bgsplat_s.png");
	border: 5px solid var(--red);
	border-radius: 2px;
	padding: 5px;
	/*height: 500px;*/
	text-align: center;
	font-size: 32pt;
	font-family: "Ewert", serif;
	
}
.smol {
  font-family: "Cutive Mono", monospace;
}
.bgmusic {
  margin: 10px auto;
  font-family: "Cutive Mono", monospace;
  }
.bgmusic audio {
  height: 20px;
  width: 40%;

}
.bgmusic audio::-webkit-media-controls-panel{
  background-color: var(--red);
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: var(--light);
}
audio::-webkit-media-controls-play-button {
  background-color: var(--purple);
  border-radius: 10%;
}
.kloc {
	  background-color: var(--dark);
    background-image: url("../images/bgtexture.png");
  border: 5px solid var(--purple);
  border-radius: 5px;
  margin: 20px;
  padding: 6px 24px;
  overflow:auto;
}
.paperkloc {
  background-color: var(--light);
    background-image: url("../images/paperbg.jpg");
  margin: 20px;
  padding: 60px 100px;
  padding-top:100px;
  overflow:auto;
  color: var(--dark);
  border-radius: 3px;
  -webkit-box-shadow: -9px 4px 39px -3px var(--red);
-moz-box-shadow: -9px 4px 39px -3px var(--red);
box-shadow: -9px 4px 39px -3px var(--red);
transition: 2s;
}
.paperkloc hr{
  border: 2px solid var(--dark);
}

.paperkloc h4 {
  color: var(--purple);
  font-size: 20pt;
}

.paperkloc:hover {
  transform: scale(1.1);
}

.brick3 {
	width: 45%;
	float: right;
  height: 500px;
}

.brick2 {
	width: 45%;
	float: left;
  height: 500px;
}

.brick4 {
	clear:both;
}
hr {
  border: 2px solid var(--geen);
}
.blog table{
  border-collapse: collapse;
  border: 3px solid var(--dark);
  border-radius: 5px;
  width: 100%
}
.blog table a {
  color: var(--light);
  text-decoration: none;
}
.blog td {
  padding: 20px;
  border: 3px solid var(--dark);
}
.blog tr:nth-child(odd) {background: var(--red_op);}
.blog tr:nth-child(even) {background: var(--purple_op);}

.bambus {
  background-color: var(--dark);
  background-image: url("../images/bgsplat_s.png");
  border: 5px dashed var(--red);
  border-radius: 5px;
  margin: 20px;
  padding: 15px;
}
.bambus table{
  border-collapse: collapse;
  border: 3px dashed var(--geen);
  width: 100%
}

.bambus td {
  padding: 5px 20px;
  border: 3px dashed var(--geen);
}
.bambus tr:nth-child(odd) {background: var(--red_op);}
.bambus tr:nth-child(even) {background: var(--purple_op);}
.comments {
  width: 100%;
  background-color: var(--geen_op);
  border: 5px dashed var(--light);
  border-radius: 5px;
  height: 250px;
}
.game {
  margin: 10px;
  padding: 2px;
}
.glut {
  width: 30%;
}

.move {
  position: absolute;
  z-index: 9;
  display: block;

}

.moveh {

  cursor: move;
  z-index: 10;

}

.panehead {
    background-color: var(--dark_op);
  color: var(--light);
}
.pane {
    background-color: var(--mlight_op);
  color: var(--dark);
}
.foru button {
  width: 100%;
  min-height: 70px;
  padding: 20px;
  border: dashed 3px var(--mlight);
  border-radius: 3px;
  font-family: "Ewert", serif;
  color: var(--light);
  font-size: 30pt;
  transition: .2s all;

}
.foru button:hover {
  background: var(--purple);
  border: 3px solid var(--light);
  color: var(--geen);
  /*uncomment to add animation*/
  transition: .2s all;
}
.foru button img {
  float: left;
  height: 50px
}
.foru a:nth-of-type(odd) button {
  background: var(--purple_op);
}

.foru a:nth-of-type(even) button {
  background: var(--red_op);
}

.kloc::-webkit-scrollbar , main::-webkit-scrollbar, .paperkloc::-webkit-scrollbar{
  width: 10px;
    padding:2px;
}
.kloc::-webkit-scrollbar-track , main::-webkit-scrollbar-track, .paperkloc::-webkit-scrollbar-track {
  background: var(--red_op);

}
.kloc::-webkit-scrollbar-thumb , main::-webkit-scrollbar-thumb, .paperkloc::-webkit-scrollbar-thumb {
  background: var(--mlight);
  border-radius: 2px;
}
.kloc::-webkit-scrollbar-thumb:hover , main::-webkit-scrollbar-thumb:hover, .paperkloc::-webkit-scrollbar-thumb:hover {
  background: var(--light);
}
aside.navi
{
    width: 10%;
	min-height: 200px;
	background-color: var(--dark_op);
	border: 5px solid var(--purple);
	border-radius: 2px;
	padding: 10px;	
	float: left;
	display: block;
  margin-bottom: 30px;
}
.unavimg
{
    width: 10%;	
	display: block;
  margin-top: 30px;
  padding-top: 5px;
}
a.navi{
	text-decoration: none!important;
	color: var(--light)!important;
	font-size: 10pt;
}

a.noshit{
	text-decoration: none!important;
	color: var(--light)!important;
}

a.navi:hover {
  transition: 1s;
  font-size: 14pt;
}
hr.navi
{
   border: 2px dashed var(--geen);
}
.dnav > summary {
  list-style-type: none;
  color: var(--geen);
	font-size: 10pt;
  border-bottom: 2px solid var(--geen);
}
.dnav[open] > summary {
  color: var(--mlight);
}
.dnav > summary::-webkit-details-marker {
    display: none;
}
.map > summary, .sumiur > summary {
  list-style-type: none;
}
.map > summary::-webkit-details-marker, .sumiur > summary::-webkit-details-marker {
    display: none;
}
.dnav > summary::before, .sumiur > summary::before {
    content: url("../images/iconpin.gif");
  
}
.map > summary::before {
    content: "🞧";
  
}
.map[open] > summary::before {
    content: "⮮";
  
}
.news p {
  border-bottom: 2px solid var(--geen_op);
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}
.news p:nth-child(odd) {background: var(--red_op);}
.news p:nth-child(even) {background: var(--purple_op);}
.photoright {
  width: 20%;
  float:right;
  margin: 10px auto;
  background-color: var(--dark);
  background-image: url("../images/bgsplat_s.png");
  border: 5px dashed var(--red);
  border-radius: 5px;;
  padding: 5px;
}
.photoright img {
  width: 100%;
}
.photoright:after {
clear:both;
}
.right {
  width: 20%;
  float:right;
  margin: 10px auto;
  padding: 5px;
}
.right img {
  width: 100%;
}
.right:after {
clear:both;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--page), minmax(150px, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  width: 65%;
  float: left;
}

.tabpage {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / span 3;
}
.tabpage::details-content {
  grid-row: 2; /* position in the second row */
  grid-column: 1 / -1; /* cover all three columns */
  padding: 1rem;
}
.tabpage:not([open])::details-content {display: none;}

.tabpage > summary {
  grid-column: var(--x) / span 1;
  grid-row: 1; /* position in the first row */
  display: grid;
  padding: .5rem;
  border: 3px solid var(--red);
  background-color: var(--red_op);
  border-radius: 5px;
  text-align: center;
  /*uncomment to add animation*/
  transition: .2s all;
  color: var(--geen);
}
.tabpage[open] > summary {
  background: var(--red);
  color: var(--mlight);
  font-weight: bold;
}
.tabpage > summary:hover {
  background: var(--purple);
  border: 3px solid var(--light);
  color: var(--light);
  /*uncomment to add animation*/
  transition: .2s all;
}
/*these make sure you can click everything inside all pages*/
.tabpage a,
.tabpage details,
.tabpage summary {z-index: 1;}
.tabpage::before {
  pointer-events: none;
}
.tabpage .bambus {
  position: relative;
  z-index: 2;
}
.tabpage summary {
  position: relative;
  z-index: 1;
}
.slidingshit {
  float: right;
  width:90%;
  margin-bottom: 3px;
  background-color: var(--red_op);
  font-family: "Cutive Mono", monospace;
  padding: 2px;
}
.nimals img{
  height: 200px;
  border:3px dashed var(--geen);
  border-radius: 5px;
}
pre{
  font-family: "Cutive Mono", monospace;
}
.music iframe {
  border:3px dashed var(--red);
  border-radius: 5px;
  width: 100%;
  height: 80%;
}
footer
{
	background-color: var(--dark_op);
	border: 5px solid var(--red);
	border-radius: 2px;
	padding: 5px;
	/*height: 500px;*/
	text-align: center;	
	clear: both;
	  width: 100%;
  /*these two styles lock it in place*/
  position: fixed;
  bottom: 0;
  /*and the rest is whatever you want*/
  font-size: 12px;
  opacity: 50%;
  padding: 6px;
  text-align: center;
  z-index: 3;
  font-family: "Cutive Mono", monospace;
}

nav
{
	text-align: center;
	font-size: 14pt;
}

ul
{
	list-style-image: url("../images/pin_s.png")
}

a:link
{
	text-decoration: underline;
	color: var(--geen);
}
a:visited
{
    color: 	var(--mlight);
}
a:hover
{
	text-decoration: wavy var(--geen);
}
/*big shit*/
a.nav{
	text-decoration: none;
	color: var(--light);

}
a.current{
	text-decoration: none;
	color: var(--mlight)!important;

}
footer a {
  color: var(--light)!important;
  text-decoration: none;
}

td.nav
{
    border: 3px var(--purple) solid;
    padding: 10px;
	width: 20%;
}

td.nav:hover {
	transition: 0.5s;
	font-size: 16pt;
}

td.current
{
	border: 3px var(--purple) solid;
    padding: 10px;
	width: 20%;
	background-color: var(--red);

}

table.nav {
    background-color: var(--dark);
    background-image: url("../images/star_s.png");
    border: 5px solid var(--purple);
    border-collapse: collapse;
    width: 100%; 
    height: 70px;
}
/*https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--pages), minmax(150px, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
}

.gallery-page {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / span 3;
}
.gallery-page::details-content {
  grid-row: 2; /* position in the second row */
  grid-column: 1 / -1; /* cover all three columns */
  padding: 1rem;
}
.gallery-page:not([open])::details-content {display: none;}

.gallery-page > summary {
  grid-column: var(--n) / span 1;
  grid-row: 1; /* position in the first row */
  display: grid;
  padding: .5rem;
  border: 3px solid var(--red);
  border-radius: 5px;
  text-align: center;
  /*uncomment to add animation*/
  transition: .2s all;
  color: var(--geen);
}
.gallery-page[open] > summary {
  background: var(--red);
  color: var(--mlight);
  font-weight: bold;
}
.gallery-page > summary:hover {
  background: var(--purple);
  border: 3px solid var(--light);
  color: var(--light);
  /*uncomment to add animation*/
  transition: .2s all;
}
/*these make sure you can click everything inside all pages*/
.gallery-page a,
.gallery-page details,
.gallery-page summary {z-index: 1;}

/*for the image buttons*/
/*we want them to be inside a flex grid so they display nicely*/
.img-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/*individual button styles*/
.img-gallery details > summary,
.img-gallery figure {
  margin: 10px;
  max-width: 200px;
  border: 2px solid var(--red);
  background: white;
}
.img-gallery details > summary:hover,
.img-gallery figure:hover {
  border: 2px solid var(--light);
}
/*limit the size on these things*/
.img-gallery img {
  max-height: 200px;
  max-width: 196px;
}
/*and the caption style*/
.img-gallery figcaption {
  font-size: small;
  text-align: center;
  margin: auto;
  padding: 4px 20px;
  background: var(--red);
  color: var(--light);
}
/*the whole element is wrapped in a link to view the full image, but we don't want to style the text like one*/
.img-gallery a {text-decoration: none;}
.img-gallery details > summary {
  background: var(--red);
  padding: 40px;
  list-style-type: none;
  text-align: center;
  font-weight: bold;
}
/*hide the spoiler tag once it's clicked*/
.img-gallery details[open] > summary {display:none;}

.book {
  height: 300px;
  width: 100%;
  background-color: var(--geen_op);
  border: 5px dashed var(--light);
  border-radius: 5px;
}

@media only screen and (max-width: 950px) {
  /*i think this one was for if your header text was kinda long...*/
  h1 {font-size: 24px; padding-inline: 12px;}
  main {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-inline: 1.5em;
    margin: 20px auto;
    float: none;
    width: 100%;
    padding: 3px;
  }
  .kloc {
    margin: 2px;
  }
  aside.navi {
	display: none;
  }
 .brick3 {
	width: 100%;
	float: left;
}

.brick2 {
	width: 100%;
}
.photoright{
  float:left;
  width: auto;
}
.right {
  height: 100px;
  width: auto;
}

.slidingshit {
  width: 100%
}
  /*change the max size of grid items so they still get laid out nicely*/
  .gallery-grid {grid-template-columns: repeat(var(--pages), minmax(60px, 1fr));}
}