@font-face {
  font-family: 'gothik steel';
  src: url('fonts/gothik steel.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'gothic war';
  src: url('fonts/gothic war.otf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'faith collapsing';
  src: url('fonts/faith collapsing.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'ithorn';
  src: url('fonts/ithorn.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'teutonic2';
  src: url('fonts/teutonic2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'drunkfonts';
  src: url('fonts/DRUNKFONTS.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'mbu';
  src: url('fonts/MetalBlockUltra.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'leander';
  src: url('fonts/Leander.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'metal gothic';
  src: url('fonts/MetalGothic-V1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  background-color:black;
  color:white;
  font-size:16px;
}

a {
  color:white;
  text-decoration:none;
}

a:hover {
  color:white;
  text-decoration:underline;
}

hr {
  border:1px dashed white;
  margin:5px;
}

textarea {
  background: linear-gradient(to top, #000000 0%, #262626 100%);
  color:white;
  border:1px white dashed;
  white-space: pre-wrap;
  word-break:break-word;
  overflow-x:auto;
  overflow-wrap:break-word;
  user-select:text;
  box-sizing:border-box;
}

/* */

.row {
  display: flex;
}

.column1 {
  flex:50%;
  width:50%;
  max-width:50%;
}

.column2 {
  flex:75%;
  width:75%;
  max-width:75%;
}

.column3 {
  flex:25%;
  width:25%;
  max-width:25%;
}

.column4 {
  flex:20%;
  width:20%;
  max-width:20%;
}

.column5 {
  flex:30%;
  width:30%;
  max-width:30%;
}

.column6 {
  flex:70%;
  width:70%;
  max-width:70%;
}

/* */

.outer{
  border:1px solid white;
  border-left:none;
  border-right:none;
  padding:50px 0px;
  background-image:url('backgrounds/background008.png');
  background-size:20%;
  background-repeat:repeat;
  overflow-y:visible;
  overflow-x:hidden;
}

.bar{
  background: linear-gradient(to top, #000000 0%, #262626 100%);
  height:15vh;
  max-height:15vh;
  border: 1px solid white;
  border-left:none;
  border-right:none;
  background-size:100% 100%;
  padding:10px;
}

.bar2{
  background: linear-gradient(to top, #000000 0%, #262626 100%);
  height:auto;
  border: 1px solid white;
  border-left:none;
  border-right:none;
  background-size:100% 100%;
  padding:10px;
  display:block;
}

.sidebar{
  background-image:url('backgrounds/background007.png');
  height:100vw;
  border: 1px solid white;
  border-top:none;
  border-bottom:none;
  padding:10px;
  position:relative;
}

.minibar {
  background: linear-gradient(to top, #000000 0%, #262626 100%);
  width:100%;
  height:auto;
  border: 1px ridge white;
  margin-bottom:5px;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.minibar2 {
  background-image:url('backgrounds/background006.gif');
  background-size:contain;
  width:100%;
  height:auto;
  border: 1px ridge white;
  margin-bottom:5px;
  padding: 10px 0px;
  position:relative;
}

.minibar2 label{
  display:inline-block;
  width:auto;
  background: linear-gradient(to top, #000000 0%, #262626 100%);
  border: 1px dashed white;
  padding:5px;
  margin:5px 0px;
}

.allowed{
  display:inline-block;
  width:auto;
  background: linear-gradient(to top, #000000 0%, #262626 100%);
  border: 1px dashed white;
  padding:10px;
  margin:5px 0px;
  font-family:'teutonic2';
  font-size:20px;
  width:20%;
}

.minibar3 {
  background-image:url('backgrounds/background005.gif');
  padding:3px;
  position:relative;
}

.middle{
  background-image:url('backgrounds/background002.png');
  height:100vw;
  padding:10px;
  position:relative;
}

.container1{
  background-image:url('backgrounds/background001.gif');
  border: 1px dashed white;
  padding:10px;
  width:100%;
  height:30%;
  max-height:30%;
  overflow:scroll;
  position:relative;
}

.container2{
  background-image:url('backgrounds/background001.gif');
  border: 1px dashed white;
  padding:10px;
  width:100%;
  height:20%;
  max-height:20%;
  overflow:scroll;
  position:relative;
}

.container3{
  background-image:url('backgrounds/background001.gif');
  border: 1px dashed white;
  padding:10px;
  width:100%;
  height:30%;
  overflow:scroll;
  position:relative;
}

.container4{
  background-image:url('backgrounds/background001.gif');
  border: 1px dashed white;
  padding:10px;
  width:100%;
  overflow:scroll;
  position:relative;
}

.container5{
  background-image:url('backgrounds/background001.gif');
  border: 1px dashed white;
  padding:10px;
  width:100%;
  height:10vh;
  overflow:scroll;
  position:relative;
}

.scrollbox{
  overflow:scroll;
  overflow-y:scroll;
  width:100%;
  height:100%;
  position:relative;
}

.scrollbox2{
  overflow:scroll;
  position:relative;
}

.scrollbox3{
  overflow-x:hidden;
  overflow-y:auto;
  width:100%;
  height:14.5vh;
  box-sizing:border-box;
  position:relative;
}

.divider{
  margin:20px 0px;
  width:100%;
  height:auto;
}

.img1{
  margin: 10px 0px;
}

.img2{
  display: inline-block;
}

.img3{
  border: 1px dashed white;
}

.img4{
  background-image:url('backgrounds/background004.png');
  background-size:100% 100%;
  padding:20%;
}

.inline{
  display: inline-block;
}

.grayscale{
  filter:grayscale(100%);
}

.dropshadow{
  filter:drop-shadow(0 0 5px white);
}

.grayscale.dropshadow{
  filter:grayscale(100%) drop-shadow(0 0 5px white);
}

.ridged{
  border: 1px white ridge;
}

.dolll{
  animation:dollrotatel 4s infinite;
}

@keyframes dollrotatel{
  0% {transform:rotate(-5deg)}
  50% {transform:rotate(5deg)}
  100% {transform:rotate(-5deg)}
}

.dollr{
  animation:dollrotater 4s infinite;
}

@keyframes dollrotater{
  0% {transform:rotate(5deg)}
  50% {transform:rotate(-5deg)}
  100% {transform:rotate(5deg)}
}

.dollspin{
  animation:dollrotate 4s infinite;
  transform-origin:center;
  animation-timing-function: linear;
}

@keyframes dollrotate{
  to {transform:rotate(360deg);}
}

.dollflip{
  animation:dollflip 4s infinite;
  transform-origin:center;
  animation-timing-function: linear;
}

@keyframes dollflip{
  to {transform:rotateX(360deg);}
}

.dollcircle{
  animation:dollcircle 4s infinite;
  transform-origin:center;
  animation-timing-function: linear;
}

@keyframes dollcircle{
  0% {transform:translate(-5px, 0);}
  25% {transform:translate(0, -5px);} 
  50% {transform:translate(5px, 0);}
  75% {transform:translate(0, 5px);}
  100% {transform:translate(-5px, 0);}
}

.dollfloat{
  animation:dollfloat 4s infinite;
  transform-origin:center;
  animation-timing-function: linear;
}

@keyframes dollfloat{
 	0% {transform:translate(0,-5px);}
 	50% {transform:translate(0,5px);}
	100% {transform:translate(0,-5px);}
}

.sticky {
  position:sticky;
}

.marquee1 {
	animation:scroll-left 20s infinite;
	animation-timing-function: linear;
	overflow:hidden;
}

@keyframes scroll-left{
	from {transform:translateX(-150%);}
	to {transform:translateX(150%);}
}

.marquee2 {
	animation:scroll-right 20s infinite;
	animation-timing-function: linear;
	overflow:hidden;
}

@keyframes scroll-right{
	from {transform:translateX(150%);}
	to {transform:translateX(-150%);}
}

#okay {
  height:26vw;
}