html{
  font-family: "F1499 Alde Manuce Pro Normal";
  color: #360900;
}

html, body{
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://i.postimg.cc/KvnVwPH8/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-areas:
    "picture main"
    "nav main";
  grid-template-columns: 200px 600px;
  padding: 5px;
}

.page {
  display: grid;
  grid-template-areas:
    "picture main"
    "nav main";
  grid-template-columns: 200px 600px;
  padding: 5px;
  column-gap: 10px;
  row-gap: 0;
}

body *::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background: none;
}

body *::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-button {
  width: 14px;
  height: 14px;
  background: #C1B074;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px black;
  border: 1px solid;
  border-color: silver #000 #000 silver;
}

body *::-webkit-scrollbar-track {
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;
}

body *::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 14px;
}

body *::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-corner {
  background: black;
}

/* dakedres was here ;3 */

ul {
  padding-top: 0;
  padding-left: 20px;
  margin-bottom: 10px;
}

ol {
  padding-top: 0;
  padding-left: 20px;
  margin-bottom: 10px;
}

p {
  margin-bottom: 0;
  margin-top: 0;
  padding: 5px;
}

p + ul {
  margin-top: 5px;
}


.picture {
  grid-area: picture;
  margin: 0;
  margin-bottom: 0;
  margin-left: 7px;
  height: 150px;
  width: 195px;
}

.nav {
  background-color: #360900;
  grid-area: nav;
  margin: 5px;
  padding: 5px;
  width: 190px;
  height:520px;
  margin-top: 0;
}

a {
  color: #360900;
  text-decoration: none;
}

a:hover{
  color: #663300;
}

.searchbar {
  width: 140px;
  border: 2px inset #755d32;
}

::placeholder{
  color: #36090090;
}

.searchbar-parent{
  display: flex;
  justify-content:center;
}

.chatbox {
  margin-top: 10px;
  border: 3px inset #755d32;
}

.main {
  height: 691px;
  width: 595px;
  background-color: #360900;
  grid-area: main;
  padding: 5px;
  display: grid;
  grid-template-areas:
    "header header"
    "qotd qotd"
    "info events"
    "info events"
    "info events";
  grid-template-columns: 2fr 1fr;
  padding: 5px;
  gap: 5px;
}

.header {
  font-family: "Monsieur La Doulaise", cursive;
  border: 2px inset #755d32;
  text-align: center;
  align-content: center;
  font-size: 60px;
  color: white;
  background-image: url("https://i.postimg.cc/7PQsRBVp/Untitled126-20251105204615.png");
  background-repeat: no-repeat;
  background-size: 100% 100px;
  grid-area: header;
}

.qotd {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  grid-area: qotd;
  text-align: center;
  border: 2px inset #755d32;
  background-color: black;
  background-image: url("https://i.postimg.cc/tRr7P65s/qotd.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 50px;
  color: #FFF8D0;
}

.info {
  height: 526px;
  grid-area: info;
  border: 2px inset #755d32;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
  background-image: url("https://i.postimg.cc/52bGVXhz/infobg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.info1, .info2, .info3, .info4, .info5, .calender, .update-log {
  margin: 5px;
}

.update-log {
  height: 262px;
  grid-area: events;
  border: 2px inset #755d32;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
  background-image: url("https://i.postimg.cc/52bGVXhz/infobg.png");
  background-repeat: no-repeat;
  background-size: cover;
}