/*### FADE-IN ANIMATION ###*/
.overlay-black{
  pointer-events:none;
  position:absolute;
  top:0;
  left:0;
  height:100vh;
  width:100vw;
  z-index:1000;
  background-color:black;
  animation-name:fadeIn;
  animation-duration:1.5s;
  animation-timing-function:ease-in;
  animation-fill-mode: forwards;
}
@keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*### SITEWIDE ###*/
body {
  background:url("images/bodybg.png") center/cover repeat;
  color:#00ff46;
}
h1 {
	position:relative;
	padding:2px 0;
	margin:0;
}
h1:hover {
  cursor:default;
}
h2 {
  margin-top:3px;
  margin-bottom:3px;
}
h2:hover {
  transform:scale(1.1);
  cursor:default;
}
a {
  color:inherit;
  text-decoration:inherit;
}
textarea {
  resize:none;
  border-color:#009146;
  background-color:#000000;
  color:#00ff46;
  border:1px;
  border-style:solid;
}

/* || Scrollbar*/
::-webkit-scrollbar {
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track {
  background-color:#001A0D;
  border:3px groove #001100;
}
::-webkit-scrollbar-track:hover {
  background-color:#004823;
  border:3px groove #001A0D;
}
::-webkit-scrollbar-thumb {
  background-color:#004823;
  border:2px outset #001A0D;
}
::-webkit-scrollbar-thumb:hover {
  background-color:#009146;
  border:2px outset #004823;
}
::-webkit-scrollbar-thumb:active {
  background-color:#00FF46;
  border:2px inset #009146;
}
::-webkit-scrollbar-corner {
  background-color:#000000;
}
::-webkit-resizer {
  background-color:#000000;
}

/*### TOP PART OF SCREEN ###*/

/* || Top header */
.header {
	position:sticky;
	top:0;
	width:100%;
	background-color:#000000;
	text-align:center;
	margin-top:0;
	z-index:1;
}
.header:hover {
  background-color:#004823;
}

/* || Music bar */
.music {
  background-image:linear-gradient(to right, #009146, #00918c);
  height:22px;
  width:100%;
  margin-top:2px;
  color:#000000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.music:hover {
  background-image:linear-gradient(to right, #00ff46, #00ff8c);
  cursor:default;
}

/*### LEFT + MIDDLE + RIGHT PARTS ###*/

.main {
  display:flex;
  flex-direction:row;
}

/*### LEFT PART OF SCREEN ###*/

.leftbar {
  position:relative;
  float:left;
}

/* || Blinkies */
.blinkieshome {
  margin-top:3px;
  background-color:#000000;
	position:relative;
	height:fit-content;
	width:190px;
	border:6px groove #009146;
}
.blinkieshome:hover {
  border-color:#00ff46;
  background-color:#004823;
}

/* || Blinkies explanation */
div.blinkiesintro {
  background-color:#000000;
	position:relative;
	margin:5px 0 5px 4px;
	width:180px;
	height:100px;
	border:2px solid #009146;
	overflow-y:scroll;
}
div.blinkiesintro:hover {
  background-color:#004823;
  border-color:#00FF46;
}
p.blinkiesintro {
	margin:0;
	text-align:justify;
	width:168px;
}
p.blinkiesintro:hover {
  cursor:default;
}

/* || Blinkie images */
.blinkies { 
  background:url("images/blinkiesbg.png");
	position:relative;
	margin:0 0 5px 4px;
	width:180px;
	height:278px;
	border:2px solid #009146;
}
.blinkies:hover {
  border-color:#00FF46;
}
.blinkie {
	position: relative;
	margin:1px 0 1px 15px;
}
.blinkie:hover {
  transform:scale(1.1);
  cursor:pointer;
}

/* || Navigation panel */
.navbuttons {
  margin-top:3px;
  background-color:#000000;;
	position:relative;
	height:fit-content;
	width: 190px;
	border:6px groove #009146;
	text-align:center;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	padding-bottom:4px;
}
.navbuttons:hover {
  background-color:#004823;
  border-color:#00FF46;
}

/* || Navigation buttons */
.nav {
  border:3px outset #00FF46;
  font-size:18px;
  background-color:#000000;
  height:34px;
  width:180px;
  margin:5px 0 1px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav:hover {
  background-color:#00FF46;
  color:#000000;
  border-color:#009146;
  cursor:pointer;
}
.nav:active {
  border:3px inset #001A0D;
  background-color:#009146;
 }

/*### RIGHT PART OF SCREEN ###*/

/* || ENTITY Words and visitor count*/
.status {
  margin:3px 0 0;
  margin-top:3px;
  margin-left:0;
  background-color:#000000;
	position:relative;
	height:fit-content;
	width: 190px;
	border:6px groove #009146;
}
.status:hover {
  background-color:#004823;
  border-color:#00FF46;
}

/* || ENTITY words */
.wordswindow {
  background-color:#000000;
	position:relative;
	margin:5px 0 5px 4px;
	width:180px;
	height:100px;
	border:2px solid #009146;
	overflow-y:auto;
}
.wordswindow:hover {
  background-color:#004823;
  border-color:#00FF46;
}
#generatewords {
  color:#00ff46;
  background-color:#000000;
  border:3px outset #00FF46;
  width:180px;
  height:34px;
  font: 18px "Times New Roman";
  margin:0 0 5px 4px;
}
#generatewords:hover {
  color:#000000;
  background-color:#00FF46;
  border-color:#009146;
  cursor:pointer;
}
#generatewords:active {
  border-style:inset;
  background-color:#009146;
  border-color:#001A0D;
}
#wordsofentity {
  margin:0;
	text-align:justify;
	width:168px;
}

/* || Visitor counter */
div.counter {
  color:#00FF46;
  background-color:#000000;
	position:relative;
	margin:0 0 5px 4px;
	width:180px;
	height:65px;
	border:2px solid #009146;
	font-size:18px;
	text-align:center;
}
div.counter:hover {
  border-color:#00FF46;
  background-color:#004823;
}
p.counter {
  margin:5px 0 0;
}
p.counter:hover {
  transform:scale(1.1);
  cursor:default;
}
.visitors {
  margin-top:5px;
}
.visitors:hover {
  transform:scale(1.1);
  cursor:default;
}

/* || My website buttons */
div.mybuttons {
  margin:3px 0 0;
  background-color:#000000;
	position:relative;
	height:fit-content;
	width: 190px;
	border:6px groove #009146;
	clear:right;
	text-align:center;
}
div.mybuttons:hover {
  background-color:#004823;
  border-color:#00FF46;
}
p.mybuttons {
  margin:5px 0 4px;
  font:bold 20px "Times New Roman";
}
p.mybuttons:hover {
  transform:scale(1.1);
  cursor:default;
}
div.entitybutton {
  background-color:#000000;
	position:relative;
	margin:5px 0 5px 4px;
	width:180px;
	height:72px;
	border:2px solid #009146;
	padding-top:3px;
}
div.entitybutton:hover {
  background-color:#004823;
  border-color:#00FF46;
}
div.tauwebbutton {
  background-color:#000000;
	position:relative;
	margin:5px 0 5px 4px;
	width:180px;
	height:72px;
	border:2px solid #009146;
	padding-top:3px;
}
div.tauwebbutton:hover {
  background-color:#004823;
  border-color:#00FF46;
}
img.entitybutton:hover {
  transform:scale(1.1);
}
img.tauwebbutton:hover {
  transform:scale(1.1);
}

/*### MIDDLE PART OF SCREEN ###*/

/* || Main window */
.middle {
  margin:3px 0 5px 5px;
  background-color:#000000BF;
	position:relative;
	height:fit-content;
	width:stretch;
	border:6px groove #009146;
	display:flex;
	flex-direction:column;
}
.middle:hover {
  border-color:#00FF46;
  background-color:#000000D9;
}

/* || First layer of middle */
.middlefirst {
   display:flex;
}

/* || Cypher window */
.cypher {
  background-color:#000000;
	position:relative;
	margin:5px 0 5px 5px;
	border:2px solid #009146;
	height:350px;
	width:30%;
	display:flex;
	align-items:center;
	flex-direction:column;
	font-size:18px;
	overflow-y:auto;
}
.cypher:hover {
  background-color:#004823;
  border-color:#00FF46;
}
.cypherdesc {
  color:#009146;
  margin:0 3px 5px;
  text-align:justify;
  float:right;
}
.cypherdesc:hover {
  cursor:default;
  color:#00FF46;
}
.cypherlink {
  width:150px;
  height:auto;
  margin-bottom:5px;
}
.cypherlink:hover {
  transform:scale(1.1);
}

/* || Shrine window */
.shrine {
  background-image:url("images/shrinebg.png");
	position:relative;
	margin:5px 5px 5px 3px;
	border:2px solid #009146;
	height:350px;
	width:70%;
	font-size:18px;
	display:flex;
	flex-direction:row;
}
.shrine:hover {
  border-color:#00FF46;
}
.shrineright {
  width:65%;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
}
.shrinedesc {
  font-size:18px;
  text-align:justify;
  margin:0 3px 3px;
  color:#009146;
}
.shrinedesc:hover {
  cursor:default;
  color:#00FF46;
}
.shrineleft {
  width:35%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
}
.shrineleft img {
  margin:5px;
  width:150px;
  height:auto;
}
.shrineleft img:hover {
  cursor:pointer;
  transform:scale(1.1);
}

/* || Stamps window */
.stampies {
  margin:0 5px 5px;
  width:stretch;
  height:fit-content;
  border:2px solid #009146;
  background:url("images/stampsbg.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stampies:hover {
  border-color:#00FF46;
}
.stamp {
  height:70px;
  width:auto;
  margin:0 4px 0 0;
}
.stamp:hover {
  cursor:pointer;
  transform:scale(1.1);
}

/* || Second layer of middle */
.middlesecond {
   display:flex;
}

/* || About the website */
.aboutshit {
  background-color:#000000;
  position:relative;
  margin:0 0 5px 5px;
  border:2px solid #009146;
  height:352px;
  width:60%;
  display:flex;
  align-items:center;
  flex-direction:column;
  font-size:18px;
  overflow-y:auto;
}
.aboutshit:hover {
  background-color:#004823;
  border-color:#00FF46;
}
.abouttext {
  font-size:18px;
  text-align:justify;
  margin:0 3px 3px;
  color:#009146;
}
.abouttext:hover {
  cursor:default;
  color:#00FF46;
}
.aboutpart {
  display:flex;
  justify-content:center;
  align-items:center;
}