#float {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 font-size:26px;
 line-height: 28px;
 color: #fff;
    animation-name: floating;
    animation-duration: 1.7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

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


 @font-face{
	font-family:'cmunvi';
	src:url(https://6f12d9.neocities.org/fonts/cmunvi.woff)
}
@font-face{
	font-family:'fsmr';
	src:url(https://6f12d9.neocities.org/fonts/fsmr.ttf)
}
@font-face{
	font-family:'ncs';
	src:url(https://6f12d9.neocities.org/fonts/ncs.ttf)
}
@font-face{
	font-family:'1520';
	src:url(https://6f12d9.neocities.org/fonts/1520.otf)
}
@font-face{
	font-family:'bettergaramond';
	src:url(https://6f12d9.neocities.org/fonts/bettergaramond.otf)
}


html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://heck.computer/images/texture.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.03;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
  filter: brightness(125%) contrast(150%);
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

  #texth { 
display: inline-block; 
transition: .2s ease; 
} 
#texth:hover { 
transform: translateY(-10%); 
  cursor:help;
}
  
#texth a { 
display: inline-block; 
transition: .2s ease; 
} 
#texth a:hover { 
transform: translateY(-10%); 
font-color: #000000!important;
} 


body{
	font-family: fsmr;
	font-size:11px;
	margin:0;
	background-color:#ffffff;
	background-size:65px;
	letter-spacing: .9px;
	color:#444444;
	background-image:url("");
	background-repeat:repeat;
	background-size:auto;
	line-height:16px;
	
}
a{
	color:#000000;
	font-weight:300;
	text-decoration-style: dotted;
	border-bottom: 0px solid #ffffff;
}
a:active{
	color: #444444;
}
a:visited{
	color:#000000;
}
a:hover{
	color: #000000;
	background-color: transparent;
	text-decoration: none;
}

scrollbar-color: rebeccapurple green; 

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
  cursor: grabbing}
::-webkit-scrollbar-track {
  background-color: transparent;
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;}
::-webkit-scrollbar-thumb {
  box-shadow: inset -1px -1px 0 0 #888888, inset 1px 1px 0 0 #e6e6e6, inset -2px -2px 0 0 #888888, inset 2px 2px 0 0 #e6e6e6;
  width: 12px;
  height: 12px;
background-image: url(/images/concrete.png);
cursor: grabbing;
  z-index: 1;}
::-webkit-scrollbar:hover {
  cursor: grabbing}
  ::-webkit-scrollbar-corner{background-image: url(/images/concrete.png);}

img{
	max-width:100%;
	height:auto;
	image-rendering:pixelated;
	image-rendering:-moz-crisp-edges;
	image-rendering:crisp-edges;
	border-bottom: none;
}
*{
	box-sizing:border-box
}
#container{
	max-width:600px;
	margin:0 auto;
}
#container a{
	color:#000000
}
#container a:visited{
	color:#000000
}
#container a:active{
	color:#000000
}
#container a:hover{
	color:#ffffff;
	background-color:transparent;
}
#header{
	width:100%;
	background-color:#ffffff;
	height:15px;
	background-image:;
	background-size:100%
}
#navbar2{
	height:30px;
	background-color:#e6e6e6;
	padding:0px 0px 0px 0px;
	border-right: 10px solid black;
	border-left: 10px solid black;

}
#navbar2 ul{
	display:flex;
	padding:5px 10px 0px 0px;
	margin:0;
	justify-content:space-evenly;
	letter-spacing:.1px;
	background-color:transparent;
  list-style-image: url();

}
#navbar{
	height:40px;
	background-color:#e6e6e6;
	padding:10px 0px 0px 0px;
	border-top: 2px solid #000000;
}
#navbar ul{
	display:flex;
	padding:0px 0px 0px 0px;
	margin:0;
	justify-content:space-evenly;
	letter-spacing:1px;
	background-color:transparent;
}
#navbar li a{
	color:#000000;
	font-family:ms gothic;
	font-weight:300;
	font-size:11px;
	border-bottom:1px solid black;
	text-decoration:none;
	background-color:transparent;
}
#navbar2 li a{
	color:#000000;
	font-family:ms gothic;
	font-weight:lighter;
	font-size:11px;
	border-bottom:0px solid black;
	text-decoration:none;
	background-color:transparent;
	box-shadow: inset 0 -100px 0 rgba(255,255,255,1), 4px 4px 0 rgba(0,0,0,1);
  transition: box-shadow 1s;
  color: inherit;
  overflow: hidden;
}
#navbar2 li a:hover{
	color:#ffffff;
	border:0px solid #000000;
	text-decoration:none;
	background-color:#d1d1d1;
	box-shadow: inset 0 -100px 0 rgba(0,0,0,0), 4px 4px 0 rgba(0,0,0,1);
	background-image: url("images/darkflash.gif");
}
#flex{
	display:flex
}
.block {
  display: block;
  padding: 5px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #000000;
  font-size: 13px;
  letter-spacing: 0px;
  font-weight: lighter;
  text-transform: lowercase;
  line-height: 101%;
  margin: 20px 0;
  font-family: bettergaramond;
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #888888;
  border-bottom: 1px solid #888888;
  width: 270px;
    background-image: url("images/concrete.png");
  	text-shadow:1px 1px 1px #ffffff;

}
aside{
	background-color:#ffffff;
	padding:5px;
	font-family: fsmr;
}
#leftSidebar{
	background-color:#ffffff;
	width:300px;
	height: 600px;
	padding:5px;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	font-size:11px;
	font-family: fsmr;
}
#rightSidebar{
	background-color:#ffffff;
	width:250px;
	height: 600px;
	padding:5px;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	font-size:11px;
	font-family: fsmr;
}
main{
	background-color:#ffffff;
	order:2;
	border-top:1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
	max-height:600px;
	overflow:auto;
	font-family: fsmr;
	text-shadow:1px 1px 1px #eeeeee;
	font-size:11px;
	width:350px;
	padding: 10px;
}
#leftSidebar{
	order:1
}
#rightSidebar{
	order:3
}
footer{
	background-color:#e6e6e6;
	width:100%;
	padding:10px;
	text-align:center;
	border-bottom:1px solid black;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
		display:flex;
}
#bottomfooter{
	background-color:#ffffff;
	width:100%;
	padding:10px;
	text-align:center;
	border-bottom:3px solid black;
		display:flex;
  alignment: center;
}
h1,h2,h3,h4,h5,h6{
	color:#000000;
	font-weight: lighter;
	font-family: cmunvi;
	letter-spacing:5px
	line-height: 3%;
}
h1{
	font-size:24px;
}
h2{
	font-size:22px;
}
h3{
	font-size:20px;
}
b{
	color:#999999;
	background-color: #f1f1f1;
	font-weight: lighter;
}
i {
  color:#666666;
  background-color: #f1f1f1;
}
u {
  color:#111111;
  background-color: #f1f1f1;
}
s {
  color:#f1f1f1;
  background-color: #666666;
}

ul {
  list-style-type: square;
  list-style-position: inside;
  margin-left: -40px;
    list-style-image: url(images/hbullet.png);
}

blockquote {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 40px;
  margin-right: 50px;
  padding-left: 5px; 
  border-left: 1px dotted #000000;
  border-right: 1px dotted #000000;
}
.box{
	background-color:#ffffff;
	width:500px;
	height:150px;
	overflow:auto;
	border:1px solid #000000;
	margin-top:5px;
	margin-bottom:5px;
}
.box2{
	background-color:#ffffff;
	width:500px;
	height:150px;
	overflow:auto;
	border:1px solid #000000;
	margin-top:5px;
	margin-bottom:5px;
}
.toybox{
  	background-color:#ffffff;
	margin-left:1px;
	margin-right:1px;
	width:300px;
	height:150px;
	overflow:auto;
	border:1px solid #000000;
	margin-top:.5px;
	margin-bottom:.5px
}
.favibox{
  background-color:#ffffff;
	margin-left:1px;
	margin-right:1px;
	width:250px;
	height:100px;
	overflow:auto;
	border:1px solid #000000;
	margin-top:.5px;
	margin-bottom:.5px
}
.plant{
	width:250px;
	height:250px;
	background-color:#ffffff;
	background-image:url("images/subtlesbg.png");
	border:0px solid #000000;
	padding:25px 25px 25px 25px;
	font-family:fsmr;
	font-size:15px;
	margin:0 auto
}
.hello{
	background-color:#ffffff;
	background-image:url("");
	border:0px solid #000000;
	padding:175px 25px 25px 25px;
	font-family:fsmr;
	font-size:15px;
	margin:0 auto
}
#topBar{
	width:100%;
	height:25px;
	padding:3px;
	background-color:#d1d1d1;
	font-color: #ffffff !important;
	border-top:3px solid black;
	border-bottom:0px solid #000000
}

/**
 * Marching ants border
 */
 
@keyframes ants { to { background-position: 100% 100% } }

.antsdiv {
	padding: 1em;
	border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box,
	            repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
	animation: ants 12s linear infinite;
	
	max-width:225px;
}
.antsdivtwo {
	padding: 1em;
	border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box,
	            repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
	animation: ants 12s linear infinite;
		max-width: 250px;
		font-size: 10px;
		height:125px;
		overflow: auto;
		line-height: 9px;
}

*{
	cursor:grab
}
a{
	cursor:grabbing
}
a img{
	cursor: grabbing
}
::-moz-selection{
	text-shadow:1px 1px 1px #aaaaaa;
	background-color:#eeeeee;
	color:#cccccc
}
::selection{
	text-shadow:1px 1px 1px #cccccc;
	background-color:#eeeeee;
	color:#aaaaaa
}
#statuscafe{
	padding:.5px;
	background-color:#ffffff;
	border:1px solid #000000;
	color:#111111;
}
#statuscafe-username{
	margin-bottom:.5px
}
#statuscafe-content{
	margin:1px 1px 1px 1px
}
@media only screen and (max-width:800px){
	#flex{
		flex-wrap:wrap
}
	aside{
		width:100%
}
	main{
		order:1
}
	#leftSidebar{
		order:2
}
	#rightSidebar{
		order:3
}
	#navbar ul{
		flex-wrap:wrap
}