@font-face {
    font-family: "Virtue";
    src: url("Virtue");
}

@font-face {
    font-family: "losaltos";
    src: url("losaltos.ttf");
}

@font-face {
    font-family: "ZNVT25";
    src: url("Cageroll-Standard.otf");
}


@font-face {
    font-family: "Globules";
    src: url("Globules-Regular.ttf");
}

@font-face {
    font-family: "Cairo";
    src: url("Cairo.ttf");
}

body::-webkit-scrollbar{
    display: none;
}

#body {
  font-size: 30px; 
}

body {
  font-family: losaltos;
  /*font-family: Andale Mono,AndaleMono,monospace;*/ 
  font-size: 50px;
  /*background-color: #002368;*/
  background-color: white;
  background-image: url("24817.png");
  background-repeat: repeat;
  margin:0;
  padding:0;
  overflow: scroll;
  /*background-color: #e4edff;*/
}

h1 {
 font-family: Cairo; 
 color: orange;
 font-size: 75px;
 text-shadow: 2px 2px 2px #002368;
 /*-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));*/
}

img {
  width: 80px;
  padding-top: 20px;
  image-rendering: optimizeSpeed;
  filter: hue-rotate(35deg);
  filter: drop-shadow(1px 2px 3px #027795);
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

mark { 
  background-color: #7EA9FF;
  color: #FFFFFF;
  opacity: 0.8;
  border-radius: 2em 1em 4em / 0.5em 3em;
}

a {
  font-family: losaltos;
  color: #5F6F91;
  text-shadow: 1px 1px 1px #002368;
  font-size: 60px;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-right: 10px;
  padding-bottom: 10px;
  writing-mode: vertical-rl;
}

#main {
  width: 590px;
  margin: auto;
  color: white;
  height: 100%;
  display: grid;
  grid-template-columns: auto 500px;
  grid-template-rows: auto auto;
  gap: 10px 10px;  
  /*overflow-wrap: break-word;*/
}

#side {
  width: 80px;
  padding-top: 50px;
  height: auto;
  grid-column: 1;
  grid-row: 1;
}

#header {
  width: 500px; 
  grid-column: 2;
  grid-row: 1;
  font-family: Virtue;
  /*text-shadow: 2px 2px 2px #002368;*/
}

#menu {
  writing-mode: vertical-rl;
  width: 80px;
  height: 100%;
  grid-column: 1;
  grid-row: 2;
  font-family: Virtue;
  color: #DDACAC;
  padding-right: 0px;
  text-shadow: 2px 2px 2px #002368;
  /*outline-style: dotted;*/
}

#body {
  width: 500px; 
  grid-column: 2;
  grid-row: 2;
  text-shadow: 5px 5px 5px black;
  color: white;
  padding-bottom: 0px;
  padding-right: 75px;
}

.z-text {
	animation: wobble 15s ease-in-out infinite;
	transform: rotate3d(1, 1, 1, 45deg);
}

.z-layer {
   filter: brightness(0.5);
}

.z-layer:first-child {
   filter: brightness(1);
}

@keyframes wobble {
	0%,
	100% {
		transform: rotate3d(-1, 1, 1, 180deg);
	}
	25% {
		transform: rotate3d(1, 1, 2, 90deg);
	}
	50% {
		transform: rotate3d(1, -1, 3, 270deg);
	}
	75% {
		transform: rotate3d(-1, -1, 2, 45deg);
	}
}