html {
  cursor: url("./images/banner.png"), pointer;
}

body {
  font-family: MS Gothic;
  background: url(./images/desert2.png);
  background-repeat: repeat;
  color: #000000;
  font-size: 10pt;
  cursor: url("./images/cursor.ico"), auto;
  scrollbar-width: auto;
  scrollbar-color: #203041 #4a5068;
}

a {
  text-decoration: none;
  font-weight: 600;
  cursor: url("./images/cursor.ico"), pointer;
  color: #ffffff;
  font-family: MS Gothic;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: url("./images/cursor.ico"), auto;
}

input {
  cursor: url("./images/cursor.ico"), pointer;
}

.body_div {
  width: 960px;
  height: 1000px;
  display: flex;
}

.flex_row {
  display: flex;
  flex-direction: row;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.UI {
  z-index: 100;
  position: relative;
  width: 100%;
}

.main_content_body {
  width: 100%;
  height: 840px;
}

.logo {
  width: 130px;
  height: 130px;
  margin: 0 auto;
  margin-top: 26px;
}

.logo_img {
  background: radial-gradient(white 0%, rgba(255, 255, 255, 0) 50%);
  width: 130px;
  height: 130px;
  animation: logo_glow linear infinite;
  animation-duration: 10s;
}

.anim_logo {
  width: 126px;
  height: 126px;
  background-size: 100%;
  background-repeat: no-repeat;
  animation: logo_spin linear infinite;
  animation-duration: 10s;
}

.anim_logo:hover {
  animation-duration: 0.5s;
}

.marquee_container {
  width: 954px;
  height: 180px;
  overflow: hidden;
  position: absolute;
}

.marquee_bg {
  position: absolute;
  width: 954px;
  height: 600px;
}

/* left_column includes the logo box at the top */

@keyframes logo_glow {
  0% {
    scale: 1;
  }

  50% {
    scale: 0.5;
  }

  100% {
    scale: 1;
  }
}

@keyframes logo_spin {
  0% {
    transform: rotate(0, 0, 0, 0deg);
  }

  50% {
    transform: rotate3d(0, 100, 0, 180deg);
  }

  100% {
    transform: rotate3d(0, 2000, 0, 360deg);
  }
}

@keyframes rain_anim {
  from {
    bottom: 0px;
  }

  to {
    bottom: -300px;
  }
}

@keyframes snow_anim {
  from {
    bottom: 0px;
  }

  to {
    bottom: -300px;
  }
}


/* this one is only the interactive left column */

.left_column {
  width: 192px;
  min-height: 844px;
  border-right: solid 6px;
  border-left: solid 6px;
  z-index: 999;
}

.inner_left_column {
  background-image: linear-gradient(to bottom, #ffffffdb, #00000000);
  height: 520px;
}

.bleft_column {
  border-image: linear-gradient(to bottom, #000000, #00000000);
  border-image-slice: 1;
}

.bottom_cont {
  border-top: solid black 6px;
  border-right: solid black 6px;
  border-bottom: double rgb(0, 0, 0) 6px;
  min-height: 188px;
  overflow: hidden;
  background-image: linear-gradient(to top, #ffffff 0%, #ffffff3d 70%, #00000000);
}

.heading {
  color: #ffffff;
  font-size: 66pt;
  margin: 22px;
  left: 220px;
  text-shadow: #ffffffa5 200px 30px 0px, #00000080 200px 30px 6px;
  z-index: 0;
  font-weight: 100;
}

.heading2 {
  color: #000000;
}

.secretary_wdw {
  height: 300px;
  border: ridge #ffffff9c 6px;
  position: relative;
  /* filter: contrast(200%); */
  background: linear-gradient(to top right, #000000, #ffffff00);
}

#secretary {
  position: relative;
  top: 141px;
  filter: drop-shadow(-5px 5px 4px rgba(28, 28, 28, 0.468)) grayscale(10%);
}

#dialog_opt {
  visibility: hidden;
}

#dialog_box {
  margin: 10px;
  min-width: 146px;
  height: fit-content;
  position: relative;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  font-weight: 700;
  color: rgb(0, 0, 0);
  padding: 6px;
  top: -187px;
  background: linear-gradient(to bottom,
      rgb(255, 255, 255) 0%,
      rgba(255, 255, 255) 10%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0.75) 55%,
      rgba(255, 255, 255) 100%);
  border-top: 1px solid #000000;
  border-left: 1px solid #7a7a7a;
  border-bottom: 3px solid #ffffff;
  border-right: 1px solid #7a7a7a;
  border-radius: 8px;
  visibility: hidden;
}

#dialog_box a {
  color: #000000;
}

#dialog_box_tip {
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom right,
      rgb(255, 255, 255) 50%,
      rgba(255, 255, 255, 0) 51%);
  border-left: 1px solid #000000;
  position: relative;
  top: -197px;
  left: 90px;
  visibility: hidden;
}

.dialog_button {
  justify-self: center;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0) 0%,
      rgba(0, 0, 0) 10%,
      rgba(0, 0, 0, 0.9) 50%,
      rgba(0, 0, 0, 0.7) 55%,
      rgba(0, 0, 0) 100%);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #7a7a7a;
  border-bottom: 3px solid #000000;
  border-right: 1px solid #7a7a7a;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  width: 160px;
  padding: 8px;
  transition: 0.1s;
  height: fit-content;
  margin-left: 16px;
  margin-top: 8px;
}

.dialog_button:hover {
  transition: 0.1s;
  scale: 1.2;
}

 .postList {
   margin: 20px;
   width: 694px;
   /* height: 784px; */
   padding: 20px;
   color: #cad1da;
   font-family: "Times New Roman", Times, serif;
   font-size: 12pt;
   background: linear-gradient(to bottom, #000000, #ffffff00);
   /* overflow-y: auto; */
   white-space: normal;
   word-break: break-word;
   border: 1px solid;
   border-bottom: none;
   border-image: linear-gradient(to bottom, #ffffff, #00000000);
   border-image-slice: 1;
 }

 nav {
   margin-left: 20px;
   z-index: 20;
   position: absolute;
   top: 174px;
   left: 210px;
 }

 nav ul {
   display: flex;
   gap: 0.99rem;
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 18pt;
   justify-content: center;
 }

 nav a {
   color: #000000;
   transition: 0.4s;
 }

 nav li {
   width: 104px;
   text-align: center;
 }

 nav li.active-btn a {
   color: #ffffffa5;
   text-shadow: 0px 0px 4px #00000080, 0px 39px 0px white,
     0px 39px 6px white;
 }

 nav li a:hover {
   color: #ffffffa5;
   text-shadow: 0px 0px 4px #00000080, 0px 39px 0px white,
     0px 39px 6px white;
   text-decoration: none;
   transition: 0.2s;
 }

 .section {
   display: none;
 }

 .section.active {
   display: block;
 }

 .main_content_body img {
   max-width: 90%;
   max-height: 600px;
 }

 #dialog_prompt {
   display: block;
   text-align: center;
   width: 192px;
 }

.CRnotice {
  padding: 12px;
  color: #84878f;
  bottom: 0;
}

/* width */
::-webkit-scrollbar {
  width: 16px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #7a9ba7;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #23373f;
  border-color: #2d3a3f;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: black;
  border-color: #ffffff;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:active {
  background: black;
  border-color: #ffffff;
}