*{
cursor: url(../img/cursor.gif), auto !important;
}
html {
font-family: 'Cutive Mono', monospace;
margin: 0;
padding: 0;
}

body {
background-color: #181818;
color: #FFF;
margin: 0;
padding: 0;
}

.floatButton {
position: fixed;
padding: 5px 3px;
transition: all .1s linear;
width: 175px;
text-align: center;
border: 2px solid #000;
background: #fff;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0, rgba(230, 200, 250, 1) 50%, rgba(255, 255, 255, 1) 100%);
background-size: 1000% 1000%;
-webkit-animation: AnimationName 1.25s linear infinite;
-moz-animation: AnimationName 1.25s linear infinite;
animation: AnimationName 1.25s linear infinite;
animation: AnimationName 1.25s linear infinite;
}

#discord {
top: 78px;
right: 40px;
}

#discord:hover {
background: #222;
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0, rgba(60, 0, 130, 1) 50%, rgba(0, 0, 0, 1) 100%);
transition: all .1s linear;
cursor: hand;
cursor: pointer;
background-size: 1000% 1000%;
-webkit-animation: AnimationName 1.25s linear infinite;
-moz-animation: AnimationName 1.25s linear infinite;
animation: AnimationName 1.25s linear infinite;
animation: AnimationName 1.25s linear infinite;
}

#discord>* {
color: #000;
font-weight: 700;
animation-duration: 10ms;
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
}

#discord:hover>* {
color: #fff;
font-weight: 700;
animation-name: textflickerhover;
animation-iteration-count: infinite;
animation-direction: alternate;
}

p {
text-align: center;
text-shadow: 0 3px 3px rgba(0, 0, 0, .5);
margin: 10px 0;
padding: 2px;
font-size: 18px;
}

li {
text-align: left;
text-shadow: 0 3px 3px rgba(0, 0, 0, .5);
padding: 2px;
}

p.sticky{
position: sticky;
top:0;	
}

#reading h1{
text-align: center;
font-variant: small-caps;
padding: 0;
box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.75);
border-radius:10px;
transition: all 0.5s linear;
color:rgba(255,255,255,.75);
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#5d5d5d), to(#4d4d4d));
}

#reading h1:hover{
transition: all .15s linear;
color:black;
text-shadow: 1px 1px 1px rgba(255, 255, 255, .2);

}


#reading h2{
text-align: center;
font-variant: small-caps;
box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.35);
border-radius:10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
color:white;
background: rgb(32,32,32);
}

div {
margin-bottom: 20px;
}


a:hover {
cursor: url(../img/cursor.gif), auto !important;
transition: all .1s linear;
}

hr {
display: block;
border: none;
color: #fff;
height: 1px;
background: #000;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#5d5d5d), to(#404040));
}

.center {
margin-top: 20px;
display: block;
width: 300px;
height: 290px;
text-align: center;
align-content: center;
}

#branding {
position: absolute;
margin: -145px 50%;
width: 305px;
height: 284px;
transform: translate(-50%, 0);
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-webkit-animation: shake 100s linear infinite;
-moz-animation: shake 100s linear infinite;
-ms-animation: shake 100s linear infinite;
-o-animation: shake 100s linear infinite;
animation: shake 100s linear infinite;
}

#brandingshadow {
position: absolute;
margin: -145px 50.2%;
width: 308px;
height: 292px;
transform: translate(-50%, 0);
background-position: center;
background-size: cover;
animation: shake 100s linear infinite;
}

#sidenav {	
background-attachment: fixed !important;
background-image: url(../img/tile.gif) !important;
animation: scrollbg 22s linear infinite;
box-shadow: 5px 0px 8px 0px rgba(0,0,0,0.75);
top: 0;
margin: 0;
position: fixed;
display: inline-block;
width: 230px;
height: 100%;
background-color: #000;
color: #fff;
overflow-x: hidden;
overflow-y: auto;
padding: 4px;
border-right: 2px solid #5D5D5D;
z-index: 9999;
max-height:calc(100vh - 8px);
}

#sidenav h1{
text-align:center;
}
#sub-content {
left: 250px;	
}

#full-content,
#sub-content {
min-width: calc(100vw - 310px);
position: absolute;
display: inline-block;
top: 0;
text-align: left;
padding: 14px 0;
}

li {
list-style-type: none;
}

#full-sidebar li span,
a,
a:visited {
border: 1px dotted transparent;
padding: 0 2px;
color: #00E600;
text-decoration: none;
}

li a {
font-size: 14px;
}

#full-sidebar li span:hover,
a:hover {
background-color: #00FF00;
color: #000;
border: 1px dotted #000;
padding: 0 2px;
transition: all .1s linear;
}

h1{
margin:0px;
}

li+h1,
p+h1{
margin-top: 14px;
}

#reading li+h1,
#reading p+h1 { 
margin-top: 40px;
}

#reading {
max-width: 800px;
margin: auto auto 20px;
padding: 40px;
}

#reading h1{
margin-bottom: 20px;
}

#reading ul,
#reading p {
padding:5px 20px;
background-color:rgb(0,0,0,0.175);
border-radius:10px;
transition: all 0.15s linear;
}

#reading ul:hover,
#reading p:hover {
background-color:rgb(0,0,0,0.5);
color:#fff;
box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.25);
}

#reading p img {
border: 2px solid #5D5D5D;
box-shadow: 5px 0px 8px 0px rgba(0,0,0,0.75);
}


@keyframes scrollbg {
0% {background-position: 0px 0px;}
100% {background-position: 200px 200px;};
}

.notice {
opacity:0.5;
font-size:10px;
margin:0px;
padding:0px;
}
.notice:hover{
opacity:1;	
font-size:18px;
}


.notice > a{
margin:0px;
padding:0px;
}

h1{
font-size:28px;
}


.moe{
z-index:9999;
opacity:0;
}

.moe:hover ~ .hide
{
opacity:0;
}
#branding.moe:hover{
opacity:1;
-webkit-animation: shakescale 1.5s linear infinite;
-moz-animation: shakescale 1.5s linear infinite;
-ms-animation: shakescale 1.5s linear infinite;
-o-animation: shakescale 1.5s linear infinite;
animation: shakescale 1.5s linear infinite;
}

#f-tr,
#f-bl{
width:480px;
height:1000px;
pointer-events: none;
position:absolute;
background-size: contain;
background-repeat: no-repeat;
margin:0px;
padding:0px;
image-rendering: pixelated;
}

#f-bl{
bottom:0px;
left:200px;
background-image: url(../img/fracture.png) !important;
background-position: bottom;
-webkit-animation: fade 0.5s linear infinite;
-moz-animation: fade-alt .5s linear infinite;
-ms-animation: fade-alt .5s linear infinite;
-o-animation: fade-alt .5s linear infinite;
animation: fade-alt .5s linear infinite;
}
#f-tr{
top:0px;
right:0px;
background-image: url(../img/fracture-2.png) !important;
-webkit-animation: fade 0.5s linear infinite;
-moz-animation: fade .5s linear infinite;
-ms-animation: fade .5s linear infinite;
-o-animation: fade .5s linear infinite;
animation: fade .5s linear infinite;
}

table{
width:100%;
border-collapse: collapse;
border-spacing: 0;	
margin-bottom:16px;
}

tr{
background-color: rgb(0,0,0,0.1);
}

table th {
background-color: rgb(77,77,77);
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);	
text-align:center;
border:none;
border-radius:0px;
}

table th:first-child{
border-radius:10px 0px 0px 0px;
}
table th:last-child{
border-radius:0px 10px 0px 0px;
}

table tr:last-child td:last-child{
border-radius:0px 0px 10px 0px;
}

table tr:last-child td:first-child{
border-radius:0px 0px 0px 10px;
}

td{
border:1px solid rgb(77,77,77);
padding:2px;
}

tr:nth-child(n+2):hover{
background-color: rgb(0,0,0,0.5);
}

.smol{font-size:10px;}

table.centered tr td{
text-align:center;
}

#reading p.weapon-picker img {
border:none;
background-color:white;
padding:5px;
border-radius:10px;
transition: all .1s linear;
max-height:64px;
}
#reading p.weapon-picker img:hover {
background-color:rgb(200,200,255);
transition: all .1s linear;
}

.w-info{
display:none;
}

.sharpness{
border:2px solid #395142;
margin-bottom:-5px;
}
.sharpness-table{
text-align:center;
font-size:12px;
}

.best{
color:rgb(0,255,0);
}

#reading h2 b {
font-variant: none;	
color:rgb(0, 255, 0);
}
#reading h2 b.chargelv{
font-size:14px;
padding-right:10px;
}

#reading h2 b.coating {
font-size:14px;
color:cyan;
}

span.red {
color:red;
}

.new {
animation: pulse 1s step-start infinite;
border: 1px solid transparent;
border-image: url("../img/border-animated.gif") 1 repeat;
padding:1px 2px;
font-size:12px;
background:rgb(0,32,0);
margin-left:2px;
}

@keyframes pulse {
0%{
color: rgb(0,255,0);
}
50% {
color: rgb(0,200,0);
}
100%{
color: rgb(0,255,0);

}
}

#full-sidebar li{
padding:0px;
}

#full-reading p {
margin-top:0px;
font-size:16px;
text-align:left;
padding:0px;
}

#full-sidebar,
#full-reading{
font-size:16px;
margin: auto auto 20px;
top: 0;
padding: 14px 40px 40px 40px;
}

#full-sidebar{
position: fixed;
max-width: 340px;
left: 210px;
}
#full-reading{
position: absolute;
left: 550px;
max-width: 1000px;
min-width: 300px;
}
quote{
color:rgb(220,220,230);
background-color:rgb(0,0,0);
border-radius:2px;
font-style: italic;
}
#full-reading p.first{
font-weight:bold;
text-decoration:underline;
text-decoration-style: dotted;
}

#full-reading h3{
font-weight:bold;
font-size: 16px;
margin:24px auto 8px;
background:rgba(0,0,0,0.15);
transition: all .1s linear;
}

#full-reading > p:hover,
#full-reading > h3:hover{
background:rgba(0,0,0,0.5);
transition: all .1s linear;
}

#sidenav div.footer{
bottom:0px;
display:block;
position:fixed;
font-size:12px;
max-width:222px;
opacity:0.33;
transition: all .1s linear;
margin-bottom:0px;
}

#sidenav div.footer:hover{
opacity:1;
transition: all .1s linear;
}

.hidden{
display:none;
}

span.opened{
transform:rotate(45deg) translateX(1px)  translateY(-1px) scaleX(110%) scaleY(110%);
display:inline-block;
text-rendering: geometricPrecision;
}

#sidenav li:last-child{
	margin-bottom:60px;
}

@-moz-document url-prefix() {
    span.opened{
        transform:rotate(45deg) translateX(-2px) scaleX(110%) scaleY(110%);
    }
}

code{
	background:rgba(255,255,255,0.05);
	border-radius:4px;
	padding:0px 4px;
}