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: #D0FF12 #BD4D72;
    cursor: url("../assets/Arrow\ texture.png"), auto;
    }

   .comments {
      scrollbar-width: thin; 
	}
}

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

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

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

body {
image-rendering: pixelated;
overflow-x: hidden;
font-family: 'New Font';
}

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

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

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

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

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

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

.structure {
display: grid;
grid-template-rows: 650px 30px 50px;
grid-template-columns: 500px 100px 500px;
justify-content: center;
transform: rotate(3deg);
row-gap: 5px;
margin-top: 150px;
}

h1 {
grid-column: 1/2;
grid-row: 1/2;
margin-top: -100px;
}

.form_box {
grid-column: 1/2;
grid-row: 1/2;
background-color: rgb(226, 244, 0);
border: 1px dashed rgb(230, 156, 57);
padding: 5px;
}

.form_box #message {
width: 480px;
height: 450px;
}

#comment-section {
grid-column: 3/4;
grid-row: 1/2;
}

.comments {
height: 650px;
overflow-y: scroll;
scrollbar-width: none;
}

.comments:focus {
outline: none;
}

.comment {
background-color: rgb(226, 244, 0);
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 1px dashed rgb(230, 156, 57);  
}

.comment:first-child {
margin-top: 0;
}

.comment.reply {
background-color: rgb(255, 180, 66);
border: 1px dashed crimson;
margin-top: 5px;
margin-right: 0;
}

.comment h3, .comment.reply strong {
color: rgb(240, 255, 213);
text-shadow: 0 2px 2px crimson, 0 -1px 0 turquoise;
font-family: 'Cubular Title';
font-size: 32px;
}

.comment p {
margin-top: 10px;
margin-bottom: 10px;
}

small {
font-size: small;
}

.pagination {
grid-column: 3/4;
grid-row: 3/4;
}

.pagination a {
background-color: rgb(0, 204, 153);
text-decoration: none;
border: 1px dashed rgb(0, 113, 119);
font-family: 'Cubular Title';
color: black;
font-size: 20px;
}

.pagination a:last-child {
float: right;
}

input[type="file"] {
display: none;
} 

.question {
grid-column: 1/2;
grid-row: 2/3;
background-color: rgb(244, 255, 221);
padding: 5px;
border: 1px solid rgb(230, 156, 57); 	
}

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

.image_button {
float: left;
background-color: rgb(249, 217, 108);
width: 100px;
padding: 10px;
text-align: center;
border: 1px dashed;
font-family: 'Cubular Title';
word-spacing: 3px;
font-size: 25px;
color: darkorange;
}

.submit_button {
float: left;
background-color: rgb(0, 204, 153);
font-family: 'Cubular Title';
word-spacing: 3px;
font-size: 25px;
border: 1px dashed rgb(0, 113, 119);
padding: 10px;
margin-left: 5px;
}

#emoji-picker {
background-color: rgb(244, 255, 221);
padding: 5px;
border: 1px solid rgb(230, 156, 57); 
}

#emoji-picker img {
vertical-align: middle;
}

@media screen and (max-width: 700px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  .structure {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 30px 50px auto;
    row-gap: 30px;
    column-gap: 0;
    justify-content: center;
    margin-top: 50px;
    transform: none;
    padding: 0 10px;
  }

  h1 {
    grid-column: 1/2;
    grid-row: 1;
    margin-top: 0;
    text-align: center;
  }

  .form_box,
  .form_box #message,
  #comment-section,
  .comment,
  .comment.reply {
    width: 100% !important;
    max-width: 100%;
    margin-right: 0 !important;
  }

  .form_box #message {
    height: 300px;
  }
  
  .question { 
  grid-column: 1/2;
  grid-row: 2/3;
  }
  
  #captcha {
  width: 100px;
  }
  
  .buttons {
  grid-column: 1/2;
  grid-row: 3/4;
  }

  #comment-section {
    grid-column: 1/2;
    grid-row: 4/5;
  }

  .comments {
    height: auto;
    max-height: 500px;
    overflow-y: auto;
  }

  .submit_button {
    text-align: center;
  }

  .image_button {
    text-align: center;
    width: 45%;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}