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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* My actual code and styles  */


@-moz-document url-prefix() {
  :root {
    scrollbar-width: thin;
    scrollbar-color: #E5CA17 #CC7D23;
    cursor: url("../assets/Arrow\ texture.png"), auto;
}
}

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


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

html {
cursor: url("../assets/Arrow texture.png"), auto;  
}

body {
image-rendering: pixelated;
background: linear-gradient(270deg, rgba(2,0,36,0) 85%, rgb(217, 252, 62, 0.7) 100%), linear-gradient(90deg, rgba(2,0,36,0) 85%, rgb(217, 252, 62, 0.7) 100%), url("../assets/Checkered texture.png"), url("../assets/Checkered\ texture_2.png") rgb(34, 205, 235);
background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
background-position: left, right, bottom, top;
background-size: 40%;
background-blend-mode: normal, normal, hard-light, hard-light;
width: 100%;
min-width: fit-content;
height: 1100px;
color: rgb(0, 3, 14);
font-family: 'New Font';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: none;
font-smooth: none;
overflow-x: hidden;
}

a:link {
cursor: url("../assets/Arrow pointer texture.png"), pointer;
text-decoration: none;
}
a:hover {
color: rgb(226, 190, 27);
}
a:active {
color: deepskyblue;
}

.structure {
display: grid;
grid-template-columns: 230px 230px 110px 160px;
grid-template-rows: 130px 230px 230px 110px 200px 35px;
width: 790px;
height: 900px;
min-width: fit-content;
justify-content: center;
row-gap: 20px;
column-gap: 20px;
background-color: rgb(186, 221, 245);
padding: 20px;
border: 1px dashed black;
border-radius: 5px;
box-shadow: 0 5px 0 rgb(66, 146, 142);
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}

*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #CC7D23;
}

*::-webkit-scrollbar-track:hover {
  background-color: #DBA321;
}

*::-webkit-scrollbar-track:active {
  background-color: #00E397;
}

*::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #E5CA17;
  border: 1px dashed #DDFF00;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #EAEA00;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #EFFF08;
}

.blog, .reviews, .cafe, .abstracta {
border: 1px dashed black;
border-radius: 5px;
z-index: 3;
}

#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;  
}

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

#float_2 {
animation-name: floating_2;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;  
}

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


.cool {
grid-column: 1/2;
grid-row: 1/2;
margin-top: -165px;
}

.dolphin {
grid-column: 4/5;
grid-row: 1/2;
margin-top: 50px;
margin-left: 72px;
z-index: 3;
}

.star {
grid-column: 1/2;
grid-row: 3/4;
z-index: 4;
margin-left: -90px;
}

.splotch {
grid-column: 4/5;
grid-row: 1/2;
margin-top: 200px;
margin-left: -130px;
z-index: 3;
}

.intro {
grid-column: 3/5;
grid-row: 1/2;
background-color: rgb(204, 252, 233);
height: 230px;
padding: 10px;
margin-left: -100px;
border: 1px dashed rgb(66, 146, 142);
box-shadow: 0 5px 0 rgb(144, 183, 190);
text-shadow: 0 1px 0 rgb(48, 255, 151);
border-radius: 5px;
z-index: 2;
}

.intro p {
margin-bottom: 15px;
}

.extras {
grid-column: 4/5;
grid-row: 2/7;
margin-top: 105px;
background-color: rgb(204, 252, 233);
border: 1px dashed rgb(66, 146, 142);
box-shadow: 0 5px 0 rgb(144, 183, 190);
text-shadow: 0 1px 0 rgb(48, 255, 245);
border-radius: 5px;
z-index: 2;
}

.extras h3 {
font-family: 'Kiwisoda';
font-size: 25px;
text-align: center;
margin-bottom: 10px;
text-shadow: 0 1px 0 rgb(50, 190, 172), 0 -1px 0 rgb(233, 233, 233);
}

.tiles {
grid-column: 4/5;
grid-row: 2/6;
background-image: url("../assets/Tiled\ texture_2.png");
background-repeat: repeat-y;
margin-left: -110px;
margin-top: 105px;
height: 655px;
}


.neighborhoods a {
text-align: center;
}

.webrings div, .neighborhoods {
text-align: center;
}

.geekring {
text-align: center;
margin-top: 10px;
}  

.geekring .index_button {
margin-left: -16px;
}

.geekring .random_button {
margin-right: 15px;
}

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

#beepbox-webring {
text-align: center;
display: block;
margin-top: 10px;
}

#webwave-webring {
margin-top: 10px;
margin-bottom: 10px;
}

#neocitiesgang {
margin-top: 0 !important;
border: 1px solid cyan;
}

.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, 166, 245) 0%, rgb(159, 243, 58) 100%) !important;
color: #e0ffd0 !important;
filter: hue-rotate(15deg);
font-weight: bold;
margin-top: 0;
}

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

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

#rwringsurvmonk {
filter: drop-shadow(0 2px 0 #00d5d5);
}

#PNwebring {
font-size: 0;
text-align: center;
}

#PNwebring table {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}

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

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

#PNwebring .webring-prev a {
content: url("../assets/Psi\ ring\ arrow\ left.png");
background-repeat: no-repeat;
width: 22px;
height: 29px;
display: block;
margin-right: 5px; 
}

#PNwebring .webring-next a {
content: url("../assets/Psi\ ring\ arrow\ right.png");
background-repeat: no-repeat;
width: 22px;
height: 29px;
display: block;
margin-left: 5px; 

}

#PNwebring .webring-info a {
content: url("../assets/Psi\ ring\ index.png");
background-repeat: no-repeat;
width: 58px;
height: 87px;
display: block;
}

#surfClub {
text-align: center;
margin-top: 10px;
}

.blog, .reviews, .cafe, .abstracta {
text-align: center;
}

.blog {
grid-column: 1/2;
grid-row: 2/3;
border-color: rgb(129, 150, 12);
background-color: rgb(212, 255, 162);
box-shadow: 0 5px 0 rgb(20, 235, 56);
}

.reviews {
grid-column: 2/3;
grid-row: 2/3;
border-color: rgb(12, 134, 150);
background-color: rgb(61, 242, 255);
box-shadow: 0 5px 0 rgb(20, 131, 235);
}

.cafe {
grid-column: 1/2;
grid-row: 3/4;
border-color: rgb(139, 120, 6);
background-color: rgb(217, 252, 62);
box-shadow: 0 5px 0 rgb(235, 135, 20);
}

.abstracta {
grid-column: 2/3;
grid-row: 3/4;
border-color: rgb(127, 136, 113);
background-color: rgb(233, 233, 233);
box-shadow: 0 5px 0 rgb(162, 163, 152);
}

.shrine_text {
grid-column: 1/2;  
grid-row: 5/6;
font-family: 'Kiwisoda';
font-size: 25px;
margin-top: -28px;
margin-left: 10px;
text-shadow: 0 1px 0 rgb(226, 190, 27), 0 -1px 0 rgb(233, 233, 233);
}

.shrines {
grid-column: 1/3;  
grid-row: 5/6;
display: flex;
}

.shrine_box {
height: 120px;
margin-right: 20px;
}

footer {
grid-column: 1/3;
grid-row: 6/7;
background-color: rgb(3, 59, 73);
margin-left: -20px;
color: rgb(220, 255, 22);
border: 1px dashed rgb(21, 121, 167);
box-shadow: 0 5px 0 rgb(9, 8, 102);
text-align: center;
align-content: center;
}

.checker {
position: absolute;       
background-image: url("../assets/Tiled\ texture.png");
background-position: left;    
width: 164px;
height: 136px;
mix-blend-mode: hard-light;
}

#title {
float: left;  
color: rgb(20, 235, 56);
text-shadow: 0 1px 0 rgb(133, 10, 117);
font-size: 14px;
margin: -20px 0 0 105px;
position: relative;
user-select: none;
z-index: 2;
}

.jukebox {
grid-column: 1/3;   
grid-row: 4/5;
font-family: 'Kiwisoda';
font-size: 25px;
margin-top: -5px;
margin-left: 10px;
text-shadow: 0 1px 0 rgb(226, 190, 27), 0 -1px 0 rgb(233, 233, 233);
}

.music {
grid-column: 1/3;   
grid-row: 4/5;
margin-top: 50px;
}

.music p {
position: absolute;  
background-color: rgb(0, 99, 156);
width: 420px;
padding: 4px 0 2px 4px;
margin-top: -26px;
height: 30px;
font-size: 14px;
color: rgb(220, 255, 22);
text-shadow: 0 1px 0 rgb(1, 19, 24);
margin-left: 0px;
border: 1px solid rgb(20, 235, 56);
z-index: 1; 
}

#toggle {
background-image: url("../assets/Playlist\ button_3.png");
width: 20px;
height: 21px;
margin: -20px 0 0 406px;
position: absolute;
cursor: url("../assets/Arrow\ pointer\ texture.png"), pointer;
}

#toggle:hover {
background-image: url("../assets/Playlist\ button.png");  
}

select {
background-color: rgb(10, 84, 133);
width: 436px;
color: rgb(58, 240, 97);
font-family: "New Font";
font-size: 14px;
border: 1px dashed rgb(231, 9, 157);
text-shadow: 0 1px 0 rgb(231, 9, 157);
padding: 4px 2px;
margin-top: 16px;
margin-left: -1px;
z-index: 2;
}

.audio {
width: 434px;
height: 30px;
background: linear-gradient(0deg, rgb(12, 111, 150) 0%, rgb(50, 190, 172) 100%), rgba(13,27,54,1);
margin-top: -2px;
border: 1px dashed rgb(226, 190, 27);
cursor: url("../assets/Arrow texture.png"), auto;
position: relative;
z-index: 3;
}

#play {
background-image: url("../assets/Play\ button.png");  
width: 14px;
height:18px;  
margin: 6px 3px 5px 7px;
cursor: url("../assets/Arrow\ pointer\ texture.png"), pointer; 
}

#play:hover {
background: url("../assets/Play\ button_4.png"); 
}

#skip {
background-image: url("../assets/Skip\ button.png"); 
margin: -23px 6px 0 375px;
width: 17px;
height:18px;
cursor: url("../assets/Arrow\ pointer\ texture.png"), pointer; 
}

#skip:hover {
background: url("../assets/Skip\ button_4.png");  
}

#slider {
background: url("../assets/Slider_2.png");
position: relative;
width: 320px;
height: 5px;
border-top: 1px solid rgb(48, 46, 158);
margin: -12px 0 0 40px;  
}

#thumb {
position: absolute;  
width: 10px;
height: 10px;
background: url("../assets/Slider\ thumb_3.png");
margin-top: -3px;
z-index: 6;
}

#thumb:hover {
background: url("../assets/Slider\ thumb_4.png");  
}

#progress {
position: absolute;
height: 5px;
background: url("../assets/Slider.png");
}

#oneko {
z-index: 99;
}