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 */

@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: 'Cubular Title';
  src: url('../fonts/cubular-title-pixelated.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

.content{
scrollbar-width: none;
scrollbar-color: #967b05 transparent;
}

.update_text {
scrollbar-width: thin;
scrollbar-color: #cc9600 #e2c20b;
}

.text_box {
scrollbar-width: thin;
scrollbar-color: #00b64c #67ff38;
}

.thanks_text {
scrollbar-width: thin;
scrollbar-color: #091d3a #066774;
}

.poster {
scrollbar-width: none;
}

}

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

body {
image-rendering: pixelated;
background:url("../assets/Main\ metal_2.png"), url("../assets/Main\ metal_3.png"), url("../assets/Main\ metal.png");
background-position: center top, center bottom, center;
background-repeat: repeat-x, repeat-x, repeat;
width: 100%;
min-width: fit-content;
min-height: 100%; 
color: GreenYellow;
font-family: 'New Font';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: none;
font-smooth: none;
overflow-x: hidden;
}

a:link {
color: rgb(224, 220, 7);
cursor: url("../assets/Arrow pointer texture.png"), pointer;
text-shadow: 0 1px 0 rgb(153, 0, 51);
text-decoration:none;
}
a:hover {
color: rgb(255, 168, 168);
}
a:active {
color: deepskyblue;
}

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

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

*::-webkit-scrollbar-track:active {
  background-color: #0E5237;
}

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

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

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


.structure {
display: grid;
grid-template-columns: 240px 237px 65px 229px 320px;
grid-template-rows: 220px 300px 340px 31px 250px 31px 35px;
column-gap: 3px;
row-gap: 10px;
justify-content: center;
margin-top: 120px;
margin-bottom: 2%;
}

.sparkle {
grid-column: 5/6;
grid-row: 1/2;  
margin-top: -120px;
margin-left: -30px;
pointer-events: none;
user-select: none;
}

header {
display: block;
grid-column: 1/2;
grid-row: 1/2;
width: 460px;
height: 69px;
padding: 5px;
margin-top: -100px;
pointer-events: none;
user-select: none;
}

nav {
grid-column: 1/2;
grid-row: 1/2;
background-image: url("../assets/Nav\ square.png");
padding-right: 5px;
padding-left: 3px;
margin-top: 18px;
}

nav ul {
margin-top: 21px;
margin-left: 3px;  
}

.navheader {
grid-column: 1/2;
grid-row: 1/2;
z-index: 2;
margin-left: 20px;
margin-top: -5px;
pointer-events: none;
user-select: none;
}

p {
margin-top: 0;
margin-bottom: 9px;
font-size: 17px;
line-height: 21px;
}

ul, ol, dl {
font-size: 16px;
list-style-type: none;
margin-top: 5px;
word-spacing: -3px;
}

li {
line-height: 1.0;

}  

.blog {
grid-column: 1/2;
grid-row: 2/3;
background-image: url("../assets/Blog\ square.png");
padding: 6px;  
}

.entries {
height: 160px;
width: 212px;
margin-top: 105px;
text-align: center; 
}

.entries p {
background-color: rgba(188, 243, 35, 0.8);
color: rgb(19, 0, 13);
text-shadow: 1px 0 0 rgb(255, 204, 73), 0 1px 0 rgb(255, 204, 73), -1px 0 0 rgb(255, 204, 73), 0 -1px 0 rgb(255, 204, 73);
padding: 2px;
border: 1px dashed rgb(6, 103, 116);
}

.news {
grid-column: 1/2;
grid-row: 3/4;  
background-image: url("../assets/News\ square.png"); 
}

.content {
margin-top: 60px;
margin-left: 4px;
width: 227px;
height: 276px;
overflow-y: scroll;
}

.content img {
user-select: none;
pointer-events: none;
}

.content::-webkit-scrollbar {
width: 4px;
height: 8px;
}

.content::-webkit-scrollbar-track {
box-shadow: none;
background-color: transparent;
}

.content::-webkit-scrollbar-thumb {
background: rgb(150, 123, 5);
box-shadow: none;
width: 4px;
border: 0;
}

.content::-webkit-scrollbar-corner {
background-color: crimson;
box-shadow: inset 0 0 3px greenyellow;
}

.content::-webkit-scrollbar-button {
width: 0;
height: 7px;
background-color: transparent;
box-shadow: none;
}

.buttons_1 {
grid-column: 1/2;
grid-row: 4/5;
}

.buttons_2 {
grid-column: 1/2;
grid-row: 6/7;
}

.buttons_1, .buttons_2 {
margin-left: 20px;  
}

.clock {
grid-column: 1/2;
grid-row: 5/6;
background-image: url("../assets/Clock\ square.png");
}

.monitor {
text-align: center;
align-items: center;
margin-left: -20px;
margin-top: 40px;
}

.box {
display: block;
width: 80px;
height: 36px; 
background-image: url("../assets/Clock\ panel.png");
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}

#clock {
font-family: 'Cubular Title';
font-size: 36px;
color: rgb(48, 232, 152);
text-shadow: 0 2px 0 rgb(19, 0, 13), 0 0 3px rgb(188, 243, 35);
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
background-clip: text;
animation: hue 10s infinite linear;
}

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}


#gif {
height: 132px;
width: 138px;
}

.intro {
grid-column: 2/4;
grid-row: 1/2;
width: 664px;
height: 746px;
margin-left: 22px;
margin-top: -70px;
background-image: url("../assets/Intro\ square.png");
z-index: 3;
}  

.intro p {
transform: rotate(-22deg);
margin-left: 360px;
margin-top: 180px;
width: 250px;
color: rgb(216, 255, 110);
text-shadow: 0 1px 0 rgb(19, 0, 13);
}

.mood {
grid-column: 2/3;
grid-row: 3/4;
background-image: url("../assets/Mood\ square.gif");
height: 213px;
width: 326px;
margin-top: -100px;
margin-left: 50px;
z-index: 4;
}

.wobble {
margin-top: 62px;
margin-left: 20px;
}

.feel span {
font-size: 45px;
}

.corkboard {
grid-column: 5/6;
grid-row: 1/3;
background-image: url("../assets/Cork\ board.png");
height: 484px;
width: 440px;
margin-left: 70px;
margin-top: 25px;
z-index: 2;
}

.corkboard img {
position: absolute;
}

.yellow {
margin-left: 160px;
margin-top: 20px;
z-index: 5;
cursor: url("../assets/Arrow\ pointer\ texture.png"), pointer;
}

.orange {
grid-column: 5/6;
grid-row: 1/2; 
margin-left: 30px;
margin-top: 190px;
z-index: 4;
cursor: url("../assets/Arrow\ pointer\ texture.png"), pointer;
}

.blue {
margin-left: 210px;
margin-top: 280px;
z-index: 3;
cursor: url("../assets/Arrow\ pointer\ texture.png"), pointer;
}

.paint_3 {
grid-column: 5/6;
grid-row: 1/2;
margin-top: -55px;
margin-left: -70px;
z-index: -1;
}

.palette {
grid-column: 5/6;
grid-row: 1/2;  
background-image: url("../assets/Palette\ menu.png");
width: 164px;
height: 500px;
margin-top: 435px;
margin-left: 110px;
z-index: 5;
}

.links {
text-align: center;
margin-left: 10px;
margin-top: 45px;
}

#link { 
display: block;   
height: 86px;
width: 135px;
border: 1px dashed;
margin-top: 9px;
}

#link:hover {
border-top: 4px solid;
height: 83px;
}

.guest {
background-image: url("../assets/Guest\ square.png");
border-color: rgb(153, 0, 51) !important;
}

.guest:hover {
background-image: url("../assets/Guest\ square_2.png");
}

.cool {
background-image: url("../assets/Cool\ square.png");
border-color: rgb(58, 32, 153) !important;
}

.cool:hover {
background-image: url("../assets/Cool\ square_2.png");
}

.graphics {
background-image: url("../assets/Graphics\ square.png");
border-color: rgb(150, 123, 5) !important;
}

.graphics:hover {
background-image: url("../assets/Graphics\ square_2.png");
}

.resources {
background-image: url("../assets/Resources\ square.png");
border-color: rgb(207, 114, 7) !important;
}

.resources:hover {
background-image: url("../assets/Resources\ square_2.png");
}

.announcements {
grid-column: 2/5;
grid-row: 3/4;
background-image: url("../assets/Announcements\ square.png");
text-align: center;
margin-left: 50px;
margin-top: 136px;
height: 236px;
width: 617px;
}

.arrow_1 {
position: absolute;
margin-left: -300px;
margin-top: 104px;
cursor: url("../assets/Arrow pointer texture.png"), pointer;
}

.arrow_2 {
position: absolute;
margin-left: 267px;
margin-top: 104px;
cursor: url("../assets/Arrow pointer texture.png"), pointer;
}

.poster {
display: flex;
column-gap: 3px; 
background-color: rgb(91, 106, 173);  
margin-top: 7px;
width: 520px;
height: 222px;
margin-left: 40px;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}

.poster::-webkit-scrollbar {
width: 0;
height: 0;
}

.slide {
position: relative;   
scroll-snap-align: start;
flex: 0 1 auto;
width: 100%;
min-width: 520px;
min-height: 222px;
z-index: 4;
}

.slide:hover { 
z-index: 6;
}


.look {
grid-column: 5/6;
grid-row: 3/4;
margin-left: -110px;
margin-top: 36px;
}

.big_star {
grid-column: 5/6;
grid-row: 3/4;
margin-left: -110px;
margin-top: 35px;
z-index: -1;
}

.stars {
grid-column: 2/3;
grid-row: 4/5;
margin-left: 100px;
z-index: -1;
}

.mini {
grid-column: 4/5;
grid-row: 5/6;
margin-top: -83px;
margin-left: 50px;
z-index: 5;
}

.stamps {
grid-column: 2/4;
grid-row: 6/7;
margin-top: -96px;
margin-left: 55px;
}

.stamps img {
margin-top: 5px;
}

.aquarium {
grid-column: 4/5;
grid-row: 5/7;
margin-top: 79px;
margin-left: 45px;
height: 212px;
width: 228px;
background-image: url("../assets/Aquarium.gif");  
pointer-events: none;
user-select: none;
}  

.paint_1 {
grid-column: 1/2;
grid-row: 2/3;
z-index: -1;
margin-left: 90px;
margin-top: 60px;
}

.paint_2 {
grid-column: 2/4;
grid-row: 5/6;
z-index: -1;
margin-top: 85px;
}

.button {
grid-column: 5/6;
grid-row: 5/7;  
background-image: url("../assets/Buttons\ square.png");
margin-top: 30px;
margin-left: 50px;
height: 255px;
padding: 3px;
color: rgb(19, 0, 13);
}

.button div {
margin-top: 120px;
margin-left: 10px;
}

.button p {
margin-bottom: 2px;
text-shadow: 0 1px 0 rgb(94, 255, 228), 0 -1px 0 rgb(94, 255, 228), 1px 0 0 rgb(94, 255, 228), -1px 0 0 rgb(94, 255, 228);
}

.button img {
margin-bottom: 10px;
}

.button blockquote {
position: absolute;  
background-color: rgb(58, 243, 104);
text-shadow: 0 1px 0 rgb(241, 222, 43), 0 -1px 0 rgb(241, 222, 43), 1px 0 0 rgb(241, 222, 43), -1px 0 0 rgb(241, 222, 43);
width: 240px;
padding: 3px;
margin-left: 5px;
margin-right: 5px;
margin-top: 70px;
border: 1px dashed rgb(58, 32, 153);
}

.buttonheader {
grid-column: 5/6;
grid-row: 5/7;
z-index: 4;
margin-left: 74px;
margin-top: -15px;
}

footer {
grid-column: 1/3;
grid-row: 7/8;
width: 440px;
background-color: rgb(34, 26, 80);
color: rgb(48, 232, 152);
border: 1px dashed rgb(79, 107, 230);
text-align: center;
align-content: center;
}

.counter {
grid-column: 5/6;
grid-row: 7/8;
background-image: url("../assets/Counter\ texture.png");
padding: 3px;
margin-left: 162px;
width: 150px;
border: 1px dashed rgb(188, 243, 35);
}

.counter p {
display: inline-block;
font-family: MS Pgothic, Arial;
font-size: 13px;
color: rgb(19, 0, 13);
width: 90px;
margin-top: -3px;
line-height: 18px;
}

.counter div {
float: right;
}

dialog {
border: 1px dashed rgb(150, 123, 5);
padding: 1px;
margin-top: 100px;
overflow-x: hidden;
}

dialog::backdrop {
  background: rgba(32, 0, 10, 0.363);
}

dialog:focus {
outline: none;
}

dialog a:focus {
outline: none;
}

.dialog-content {
  background-color: rgb(19, 0, 13);
  text-align: center;
  position: relative;
}

.dialog-content:focus {
outline: none;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: url("../assets/Arrow\ pointer\ texture.png"), pointer;
}

/* Dialog styles! */

.to-do {
background-color: rgb(181, 201, 0);
}

.to-do .dialog-content {
background-color: rgb(181, 201, 0);
color: rgb(19, 0, 13);
padding: 3px;
max-width: 100%;
width: 600px;
height: 400px;
}

.header_1 {
margin-top: 20px;
}

.header_1_mobile {
display: none;
width: 210px;
height: 136px;
margin-left: auto;
margin-right: auto;
}

.lists {
display: grid;
grid-template-columns: 250px 250px;
grid-template-rows: 247px;
justify-content: center;
column-gap: 50px;
margin-top: 20px;
}

#list {
background-color: rgb(204, 255, 22);
border: 1px dashed rgb(8, 109, 122);
padding: 3px;
overflow-y: hidden;
}

.text_box {  
overflow-y: scroll;
height: 239px;
}

.text_box h3 {
font-family: 'Cubular Title';
font-size: 30px;
word-spacing: 5px;
margin-top: 2px;
text-shadow: 0 1px 0 rgb(103, 255, 56);
}

.text_box::-webkit-scrollbar {
width: 4px;
height: 8px;
}

.text_box::-webkit-scrollbar-track {
box-shadow: none;
background-color: rgb(103, 255, 56);
}


.text_box::-webkit-scrollbar-button {
width: 0;
height: 0;
background-color: transparent;
box-shadow: none; 
}

.text_box::-webkit-scrollbar-thumb {
background: rgb(0, 182, 76);
box-shadow: none;
border-bottom: 1px solid rgb(0, 130, 134);
width: 4px;
border: 0;
}

#list ul {
line-height: 20px;
text-align: justify;
margin-top: 10px;
padding-left: 18px !important;
margin-right: 5px;
}

#list li {
padding-left: 2px !important;  
list-style: outside;
list-style-type: square;
text-shadow: 0 1px 0 rgb(28, 255, 20);
margin-bottom: 10px;
line-height: 22px;
}

.main_things {
grid-column: 1/2;
grid-row: 1/2;
}

.future_things {
grid-column: 2/3;
grid-row: 1/2;
}


/* Changelog dialog ahead! */

.changelog {
background-color: rgb(238, 166, 33);
border: 1px dashed rgb(207, 114, 7);
}

.changelog .dialog-content {
background-color: rgb(238, 166, 33);
color: #8b4513;
width: 600px;
height: 400px;
max-width: 100%;
}

.header_2 {
margin-top: 20px;
}

.updates {
display: grid;
grid-template-columns: 546px;
grid-template-rows: 263px;
max-width: 100%;
justify-content: center;
}

.update_box {
grid-column: 1/2;
grid-row: 1/2;
margin-top: 20px;
background-color: rgb(255, 234, 46);
padding: 2px;
border: 1px dashed rgb(207, 114, 7);
overflow: hidden;
}

.update_text {
overflow-y: scroll;
height: 237px;
width: 540px;
}

.update_text ul li {
padding: 5px 2px 0 2px;
text-align: justify;
margin: 0 5px 5px 0;
font-size: 16px;
color: rgb(19, 0, 13);
text-shadow: 0 1px 0 rgb(255, 180, 18);
line-height: 24px;
} 

.update_text ul li span {
color: rgb(230, 84, 0);
}

.update_text::-webkit-scrollbar {
width: 4px;
height: 8px;
}

.update_text::-webkit-scrollbar-track {
box-shadow: none;
background-color: rgb(226, 194, 11);
}


.update_text::-webkit-scrollbar-button {
width: 0;
height: 0;
background-color: transparent;
box-shadow: none; 
}

.update_text::-webkit-scrollbar-thumb {
background: rgb(204, 150, 0);
box-shadow: none;
border-bottom: 1px solid rgb(134, 54, 0);
width: 4px;
border: 0;
}


/* Special thanks dialog ahead! */


.thanks {
background-color: rgb(0, 141, 129);
border: 1px dashed rgb(6, 103, 116);
}

.thanks .dialog-content {
background-color: rgb(0, 141, 129);
color: rgb(19, 0, 13);
width: 600px;
height: 400px;
overflow-y: hidden;
}

.header_3 {
margin-top: 20px;
}

.thanks_text {
overflow-y: scroll;
height: 210px;
width: 590px;
margin-top: 20px;
}

.thanks_text::-webkit-scrollbar {
width: 4px;
height: 8px;
}

.thanks_text::-webkit-scrollbar-track {
box-shadow: none;
background-color: rgb(6, 103, 116);
}

.thanks_text::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  background-color: transparent;
  box-shadow: none; 
  }
  
.thanks_text::-webkit-scrollbar-thumb {
  background: rgb(9, 29, 58);
  box-shadow: none;
  border-bottom: 1px solid rgb(8, 109, 122);
  width: 4px;
  border: 0;
  }

.divider {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}

.person_thanks {
background-color: rgb(16, 202, 162);
height: max-content;
width: 480px;
padding: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
text-align: justify;
border: 1px dashed rgb(0, 130, 134);
text-shadow: 0 1px 0 rgb(0, 182, 76);
line-height: 23px;
}

.person_thanks a {
color: rgb(9, 29, 58);
text-shadow: 0 1px 0 rgb(181, 201, 0), 0 -1px 0 rgb(181, 201, 0), 1px 0 0 rgb(181, 201, 0), -1px 0 0 rgb(181, 201, 0);
}

.person_thanks a:hover {
text-shadow: 0 1px 0 rgb(103, 255, 56), 0 -1px 0 rgb(103, 255, 56), 1px 0 0 rgb(103, 255, 56), -1px 0 0 rgb(103, 255, 56);
}

.person_thanks img {
float: left;
margin-right: 10px;
}

.update {
text-align: center;
}


ul, ol, dl {
font-size: 16px;
list-style-type: none;
margin-top: 5px;
word-spacing: -3px;
}

.menu {
line-height: 1.8;
}


/* Media queries ahead! For mobile display */

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

.header_1 {
display: none;
}

.header_1_mobile {
display: block;
margin-top: 20px;
}

.lists {
grid-template-columns: 250px;
grid-template-rows: 247px 247px;
justify-content: center;
row-gap: 50px;
}

.main_things {
grid-column: 1/2;
grid-row: 1/2;
}

.future_things {
grid-column: 1/2;
grid-row: 2/3;
margin-bottom: 20px;
}

}