html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

@font-face {
font-family: 'New Font';
src: url('../fonts/851H-kktt.ttf') format('truetype');
font-weight: normal;
font-style: normal;  
}

@font-face {
font-family: 'Cubular Title';
src: url('../fonts/cubular-title-pixelated.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

html {
cursor: url("../assets/Arrow texture.png"), auto;
min-height: 100%; 
}

body {
position: relative;  
image-rendering: pixelated;
background: linear-gradient(180deg, rgba(18, 87, 99, 0.096) 0%, rgba(53, 8, 59, 0.253) 50%, #0C000D 100%), url("../assets/New BG_2.png"), #0C000D;
height: 4000px;
max-width: 400%;
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
color: GreenYellow;
text-rendering: optimizeLegibility;
overflow-x: hidden;
cursor: url("../assets/Arrow texture.png"), auto;
}


a:link {
color: rgb(186, 255, 25);
cursor: url("../assets/Arrow pointer texture.png"), pointer;
}
a:hover {
color: rgb(78, 255, 137);
}
a:visited {
color: deepskyblue;
}

::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(116, 0, 29);
background-color: rgb(15, 4, 32);
cursor: url("../assets/Arrow texture.png"), auto;
}

::-webkit-scrollbar-thumb {
background: crimson;
box-shadow: inset 1px 2px 5px rgb(251, 117, 45);
cursor: url("../assets/Arrow texture.png"), auto;
}

::-webkit-scrollbar-corner {
background-color: crimson;
box-shadow: inset 0 0 3px greenyellow;
cursor: url("../assets/Arrow texture.png"), auto;
}

::-webkit-scrollbar-button {
width: 8px;
height: 8px;
background-color: darkorange;
box-shadow: inset 0 0 3px crimson;
cursor: url("../assets/Arrow texture.png"), auto;
}


header {
text-align: center;
margin-top: 20px;
pointer-events: none;
user-select: none;
}

header img {
filter: drop-shadow(0 2px 5px rgba(13, 116, 129, 0.5));
width: 914px;
max-width: 100%;
}

.header {
display: none;
max-width: 100%;
text-align: center;
}

.stars {
position: absolute;  
z-index: -1;
pointer-events: none;
user-select: none;
width: 100%;
}

h1 { 
font-family: 'Cubular Title', 'cubular';
font-size: 38px;
text-align: center;
text-shadow: 0 1px 0 rgb(199, 0, 70);
margin-top: 75px;
margin-bottom: 0;
word-spacing: 5px;
text-shadow: 0 2px 3px rgba(204, 10, 75, 0.8);
}

p, h2 { 
font-family: 'cubular';
font-size: 60px;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0 2px 1px rgb(199, 0, 70);
}

.button {  
height: 334px;
width: 440px; 
border: 0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
z-index: 2;
user-select: none;
}

.image:hover {
opacity: 0;
cursor: url("../assets/Arrow pointer texture.png"), pointer;
}

.button:hover {
background-color: transparent;
background-image: url("../assets/Animated button_2.gif");
border: 0;
cursor: url("../assets/Arrow pointer texture.png"), pointer;
}

.link_2 {
display: none;  
}

.image_2 {
display: none;  
}


.arrow {
width: 125px;
margin-left: auto;
margin-right: auto;   
}

.scroll {
position: absolute;
margin-top: -60px;
margin-left: -10px;
z-index: -1;
}

.pops {
width: 300px;
margin-left: auto;
margin-right: auto;   
}

.pop_1 {
position: absolute;
margin-left: -160px;
margin-top: -100px;
pointer-events: none;
}

.pop_2 {
position: absolute;
margin-left: 230px;
margin-top: 120px;
pointer-events: none;   
}

.rating {
text-align: center;
margin-top: 458px;
}

.sign {
user-select: none;
pointer-events: none;
max-width: 100%;
z-index: 2;
}

.sign_2 {
display: none;
max-width: 100%;  
}

.window {  
text-align: center;  
}

.window_1 {
position: relative;  
float: right;
margin-right: 50px;
margin-top: 400px;
z-index: -2;
pointer-events: none;
user-select: none;
}

.window_2 {
position: relative;  
float: left;
margin-left: 50px;
margin-top: 700px;
z-index: -2;
pointer-events: none;
user-select: none;
}

.left {
position: relative;  
float: left;
clear: left;
margin-top: 10px;
margin-left: 50px;
}

.right {
position: relative;   
float: right;
clear: right;
margin-top: 240px;
margin-right: 50px;
margin-left: 50px; 
}

.lamp {
text-align: center;
margin-top: 200px;
}

.lamp_2 {
float: left;
margin-left: 54px;
pointer-events: none;
user-select: none;
}

.lamp_1 {
float: right;
margin-right: 98px;
pointer-events: none;
user-select: none;
z-index: 3;
}

.branches {
position: absolute;  
width: 100%;
left: 0;
right: 0;
bottom: 0;
top: 1950px;
pointer-events: none;
user-select: none;
}


.neighborhoods {
background: url("../assets/Light\ texture.png");
background-repeat: repeat;
padding: 5px;
text-align: center;
float: left;
clear: left;
margin-top: 20px;
z-index: 3;
}

.webrings {
background: url("../assets/Light\ texture_2.png");
background-repeat: repeat;
padding: 5px;
text-align: center;
float: right;
clear: right;

margin-top: 20px;
z-index: 3;
}  

.neighborhoods h2, .webrings h2 {
font-size: 32px;
font-family: 'Cubular Title','cubular';
color: rgb(186, 255, 25);
text-shadow: 0 1px 0 crimson;
background-color: rgba(52, 141, 140, 0.3);
margin-top: 2px;
margin-bottom: 10px;
border: 1px dashed;
}

#ncring {
margin-right: 144px;
font-size: smaller !important;
}

.geekring {
margin-left: 140px;
margin-top: -55px;   
}  

.geekring a:link {
font-family: 'MS UI Gothic';
font-size: smaller;
}

#funky-webring {
margin-top: 10px;
text-align: center;
font-size: 0;
}

#funky-webring .webring-prev {
vertical-align: middle;  
}  

#funky-webring .webring-next {
vertical-align: middle;  
}  


#funky-webring .webring-prev a {
background-image: url("../assets/Funky arrow left.png");
background-repeat: no-repeat;
width: 21px;
height: 13px;
display: block;
}

#funky-webring .webring-next a {
background-image: url("../assets/Funky arrow right.png");
background-repeat: no-repeat;
width: 21px;
height: 13px;
display: block;

}

#funky-webring .webring-info a {
background-image: url("../assets/buttons/Funky button.gif");
background-repeat: no-repeat;
width: 88px;
height: 31px;
display: block;
}

#beepbox-webring {
margin-left: 146px;  
margin-top: -33px;  
}  

#webwave-webring {
text-align: left;
margin-top: 10px;
margin-left: 8px;
}

.ng-ring {
background-color: #c5ffa7 !important;
border-image: url("../assets/Border.png") 3 round !important;
color: greenyellow !important;
filter: hue-rotate(-60deg);
text-shadow: 0 1px 0 crimson;
}

.ng-button {
color: #1a1a2e !important;  
}  

.ng-button:hover {
color: rgb(173, 0, 92) !important;
filter: hue-rotate(60deg);
text-shadow: 0 1px 0 greenyellow;
}

.ng-topbox {
font-size: 10px;
background: linear-gradient(90deg, rgb(116, 245, 132) 0%, rgb(243, 92, 58) 100%) !important;
color: #e0ffd0 !important;
filter: hue-rotate(15deg);
font-weight: bold;
}

.ng-topbox img {
mix-blend-mode: hard-light;  
}

.floating {
color: rgb(153, 0, 89) !important;
text-shadow: 0 1px 0 greenyellow;
}

#rwringspear {
text-align: right;
margin-top: -80px;
}

footer {
color: rgb(39, 50, 145);
text-align: center;
padding: 5px;
margin-top: 3630px;
z-index: 4;
}

footer p {
font-size: 36px;
font-family: 'Cubular Title';
text-shadow: 0 1px 0 midnightblue;
word-spacing: 5px;
}


@media screen and (max-width: 430px) {

.button {
width: 300px;    
}
    
.button .link {
display: none;
}

.link_2, .image_2 {
display: block;
}

.button:hover {
background: none;  
}

body {
background-size: 300%;
max-width: 100%;
height: 500px;
overflow-x: hidden;
}

header {
width: 100%;  
margin-left: auto;
margin-right: auto;
}

.arrow {
display: none;
}

.pop_1 {
margin-left: -35px;
margin-top: -50px;
}

.pop_2 {
margin-left: 120px;
margin-top: 0;   
}

.rating {
margin-top: 250px;  
}

.sign {
display: none;  
}

.sign_2 {
display: block;
margin-left: auto;  
margin-right: auto;
}

.window_1 {
max-width: 40%;
margin-top: 100px;
}

.window_2 {
max-width: 40%;
margin-top: 150px; 
}

.branches {
width: 200%;
overflow-x: hidden;
top: 1100px;
left: -375px;
}

.left {
display: inline-block;    
margin-top: 10px;
z-index: 4;
margin-left: auto;
margin-right: auto;
float: none; 
}

.right {
display: inline-block;    
margin-top: -80px;
margin-left: 2%;
margin-right: 2%;
float: none;
}

.lamp_1 {
float: none;
margin-left: auto;
margin-right: auto;
}

.lamp_2 {
float: none;
margin-left: auto;
margin-right: auto;
}


.neighborhoods {
max-width: 100%;
margin-left: auto;
margin-right: auto;
float: none;
}

.webrings {
max-width: 100%;
margin-left: auto;
margin-right: auto;
float: none;
}

footer {
margin-top: 285px; 
}

footer p {
font-size: 26px;  
}

}

@media screen and (max-width: 320px) {

body {
background-size: 300%;
max-width: 100%;
height: 500px;
overflow-x: hidden;
}

.button:hover {
background: none;  
}

.sign {
display: none;  
}

.sign_2 {
display: block;
margin-left: auto;  
margin-right: auto;
}

.branches {
left: -320px;  
}

footer {
margin-top: 165px; 
}


}