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: #0039AA #02003B;
    cursor: url("../assets/Arrow\ texture.png"), auto;
}
  dialog {
    scrollbar-width: thin;
  }
  audio {
    filter: invert(0) !important;
    border: 3px double white !important;
  }

}

@font-face {
    font-family: 'RW Font';
    src: url('../sub_fonts/VecTerminus20Medium.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RW Font Small';
    src: url('../sub_fonts/VecTerminus16Medium.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RW Font Tiny';
    src: url('../sub_fonts/CozetteVector.otf');
    font-weight: normal;
    font-style: normal;
}

html {
cursor: url("../sub_assets/RW\ cursor.gif"), auto;
backdrop-filter: contrast(5); 
}

a:link {
color: rgb(194, 149, 0);
cursor: url("../sub_assets/RW\ cursor\ pointer.gif"), pointer;
}

*::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #02003B;
}

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

*::-webkit-scrollbar-track:active {
  background-color: #40546E;
}

*::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #0039AA;
  border: 1px solid #0044FF;
}

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

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


body {
background: url("../sub_assets/Background.png"), url("../sub_assets/Background\ upside.png"), url("../sub_assets/Background.png"), rgb(27, 27, 49);
background-repeat: repeat-x, repeat-x, repeat-x, no-repeat;
background-position: top, center, bottom, center;
background-size: 614px;
background-blend-mode: saturation;
backdrop-filter: contrast(1.5) brightness(0.7); 
font-family: MS UI Gothic, 'RW Font';
letter-spacing: 1px;
color: whitesmoke;
min-height: 100%;
height: 1400px;
font-smooth: never;
-webkit-font-smoothing : none;
image-rendering: pixelated;
}

.structure {
display: grid;    
grid-template-columns: 400px 400px;
grid-template-rows: 269px 120px 200px 250px 100px 30px;
column-gap: 20px;
row-gap: 80px;
justify-content: center;
margin-bottom: 10px;
}

header {
grid-column: 1/3;
grid-row: 1/2;
text-align: center;
filter: drop-shadow(0 2px 1px rgb(22, 22, 255)) drop-shadow(0 -2px 1px rgba(145, 0, 0, 0.678));
margin-top: 20px;
margin-bottom: 20px;
}

#intro, #rules, #widgets, #members, #buttons {
background-color: rgba(0, 0, 0, 0.527);
padding: 8px;
font-size: 20px;
line-height: 25px;
text-align: justify;
}

#intro {
grid-column: 1/3;
grid-row: 2/3;    
}

#intro p {
margin-top: -3px;
}

#rules {
grid-column: 2/3;
grid-row: 3/4;
}

#rules ul {
list-style-image: url("../sub_assets/Bat\ icon.png");
margin-left: 38px;
margin-right: 5px;
font-size: 16px;
font-family: MS UI Gothic, 'RW Font Small';
margin-top: 20px;
}

#rules ul li {
margin-top: 10px;
}

.rule-box {
overflow-y: scroll;
overflow-x: hidden;
scrollbar-color: blue;
height: 180px;
}

#widgets {
grid-column: 1/2;
grid-row: 3/5;
margin-top: 100px;
}

.widget-box {
overflow-y: scroll;
overflow-x: hidden;
height: 410px;
}

#widgets .widget-box textarea {
float: right;
clear: right;
margin-bottom: 20px;
margin-right: 5px;
margin-top: 25px;
height: 60px;
background-color: transparent;
color: whitesmoke;
font-family: MS UI Gothic, 'RW Font Tiny';
font-size: 13px;
border: 3px double whitesmoke;
border-radius: 3px;
}

#members {
grid-column: 2/3;
grid-row: 4/6;
}

#buttons {
grid-column: 1/2;
grid-row: 5/6;
margin-top: -20px;
font-family: MS UI Gothic, 'RW Font Small';
font-size: 16px;
}

#buttons img {
vertical-align: middle;
margin-bottom: 5px;
}

.button-wrap {
width: 250px;
float: left;
}

.music-desc {
float: right;
clear: left;
border: 3px double white;
width: 133px;
height: 63px;
margin-top: -73px;
margin-right: -1px;
text-align: left;
font-family: 'RW Font Tiny';
font-size: 13px;
line-height: 21px;
padding: 0 3px 0 5px;
}

audio {
background: transparent;
filter: invert(1);
border: 3px double black;
outline: none;
width: 375px;
height: 23px;
}

audio::-webkit-media-controls-panel {
background: transparent, white;
}

#credits {
grid-column: 1/3;
grid-row: 6/7;
font-family: MS UI Gothic, 'RW Font Tiny';
background-color: rgba(0, 0, 0, 0.527);
font-size: 13px;
text-align: center;
align-content: center;
padding: 5px;
margin-top: -20px;
}

#credits img {
vertical-align: middle;
margin-top: -10px;
}

span {
grid-column: 2/3;
grid-row: 6/7;    
color: rgb(194, 149, 0);
position: relative;
z-index: 3;
}

/*Headers for each box*/

.welcome {
grid-column: 1/3;
grid-row: 2/3;
margin-top: -37px;
}

.rule {
grid-column: 2/3;
grid-row: 3/4;
margin-top: -37px;
margin-left: 283px;
}

.widget {
grid-column: 1/2;
grid-row: 3/4;
margin-top: 63px;
}

.member {
grid-column: 2/3;
grid-row: 4/6;
margin-top: -37px;
}

.button {
grid-column: 1/2;
grid-row: 5/6;
margin-top: -57px;
margin-left: 243px;
}

/*Slugcat decorations*/

.skip {
grid-column: 1/3;
grid-row: 2/3;
margin-top: -40px;
margin-left: 180px;
filter: drop-shadow(0 1px 2px blue);
vertical-align: middle;
}

.seeds {
grid-column: 2/3;
grid-row: 2/3;
margin-top: -88px;
margin-left: 250px;
scale: 1.2;
filter: brightness(1.5) contrast(1.5) drop-shadow(-1px 0 1px blue);
}

.fruits {
grid-column: 1/2;
grid-row: 2/3;
transform: scalex(-1);
scale: 1.2;
z-index: -1;
margin-top: 136px;
margin-left: 30px;
filter: brightness(2) contrast(2) drop-shadow(1px 0 1px blue);
}

.bump {
grid-column: 2/3;
grid-row: 3/4;
margin-top: -94px;
margin-left: 30px;
}

.blue {
grid-column: 1/2;
grid-row: 3/4;
margin-left: 138px;
margin-top: 10px;
z-index: -1;
}

.blink {
grid-column: 2/3;
grid-row: 4/5;
margin-left: 145px;
margin-top: -73px;
}

.hang {
grid-column: 2/3;
grid-row: 4/5;
margin-left: 320px;
margin-top: -120px;
}

/*Widget styles*/

#rainRingSurv, #rainRingHunt, #rainRingGourm, #rainRingArti, #rainRingRiv,
#rainRingSpear, #rainRingSaint, #rainRingWatch {
align-items: center;
}

.prev {
display: block;  
font-size: 0;
background-image: url("../sub_assets/Prev.gif");
width: 25px;
height: 25px;
margin-top: 65px;
}

.next {
display: block;  
font-size: 0;
background-image: url("../sub_assets/Next.gif");
width: 25px;
height: 25px;
margin-top: 65px;
}

/*Pixel borders code I got*/

.pixel-corners,
.pixel-corners--wrapper {
  clip-path: polygon(0px calc(100% - 5px),
    1px calc(100% - 5px),
    1px calc(100% - 3px),
    2px calc(100% - 3px),
    2px calc(100% - 2px),
    3px calc(100% - 2px),
    3px calc(100% - 1px),
    5px calc(100% - 1px),
    5px 100%,
    calc(100% - 5px) 100%,
    calc(100% - 5px) calc(100% - 1px),
    calc(100% - 3px) calc(100% - 1px),
    calc(100% - 3px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 3px),
    calc(100% - 1px) calc(100% - 3px),
    calc(100% - 1px) calc(100% - 5px),
    100% calc(100% - 5px),
    100% 5px,
    calc(100% - 1px) 5px,
    calc(100% - 1px) 3px,
    calc(100% - 2px) 3px,
    calc(100% - 2px) 2px,
    calc(100% - 3px) 2px,
    calc(100% - 3px) 1px,
    calc(100% - 5px) 1px,
    calc(100% - 5px) 0px,
    5px 0px,
    5px 1px,
    3px 1px,
    3px 2px,
    2px 2px,
    2px 3px,
    1px 3px,
    1px 5px,
    0px 5px);
  position: relative;
}
.pixel-corners {
  border: 2px solid transparent;
}
.pixel-corners--wrapper {
  width: fit-content;
  height: fit-content;
}
.pixel-corners--wrapper .pixel-corners {
  display: block;
  clip-path: polygon(2px 6px,
    3px 6px,
    3px 4px,
    4px 4px,
    4px 3px,
    6px 3px,
    6px 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 3px,
    calc(100% - 4px) 3px,
    calc(100% - 4px) 4px,
    calc(100% - 3px) 4px,
    calc(100% - 3px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 2px),
    6px calc(100% - 2px),
    6px calc(100% - 3px),
    4px calc(100% - 3px),
    4px calc(100% - 4px),
    3px calc(100% - 4px),
    3px calc(100% - 6px),
    2px calc(100% - 6px));
}
.pixel-corners::after,
.pixel-corners--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(0px calc(100% - 5px),
    1px calc(100% - 5px),
    1px calc(100% - 3px),
    2px calc(100% - 3px),
    2px calc(100% - 2px),
    3px calc(100% - 2px),
    3px calc(100% - 1px),
    5px calc(100% - 1px),
    5px 100%,
    calc(100% - 5px) 100%,
    calc(100% - 5px) calc(100% - 1px),
    calc(100% - 3px) calc(100% - 1px),
    calc(100% - 3px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 3px),
    calc(100% - 1px) calc(100% - 3px),
    calc(100% - 1px) calc(100% - 5px),
    100% calc(100% - 5px),
    100% 5px,
    calc(100% - 1px) 5px,
    calc(100% - 1px) 3px,
    calc(100% - 2px) 3px,
    calc(100% - 2px) 2px,
    calc(100% - 3px) 2px,
    calc(100% - 3px) 1px,
    calc(100% - 5px) 1px,
    calc(100% - 5px) 0px,
    5px 0px,
    5px 1px,
    3px 1px,
    3px 2px,
    2px 2px,
    2px 3px,
    1px 3px,
    1px 5px,
    0px 5px,
    0px 50%,
    2px 50%,
    2px 6px,
    3px 6px,
    3px 4px,
    4px 4px,
    4px 3px,
    6px 3px,
    6px 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 3px,
    calc(100% - 4px) 3px,
    calc(100% - 4px) 4px,
    calc(100% - 3px) 4px,
    calc(100% - 3px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 2px),
    6px calc(100% - 2px),
    6px calc(100% - 3px),
    4px calc(100% - 3px),
    4px calc(100% - 4px),
    3px calc(100% - 4px),
    3px calc(100% - 6px),
    2px calc(100% - 6px),
    2px 50%,
    0px 50%);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #dedede;
  display: block;
  pointer-events: none;
}
.pixel-corners::after {
  margin: -2px;
}