@import url('https://fonts.cdnfonts.com/css/pixelated-ms-sans-serif'); /* backup default */



@font-face {
  font-family: 'W95FA';
  src: url('fonts/w95fa1/W95FA.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
  
@font-face {
  font-family: 'ModernDOS';
  src: url('fonts/modern_dos/ModernDOS8x14.ttf');
}


@font-face {
  font-family: 'ModernDOS';
  src: url('/fonts/modern_dos/ModernDOS8x14.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '2Credits';
  src: url('fonts/2credits/2Credits.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


  /* font-family: ms pgothic, serif;
  font-weight: bold; */

body {
  background-color: black;
  background-size:cover;
  font-family: ms pgothic, serif;
  margin: 0;
  padding: 0;
  cursor: url('/cursor/cur918.cur'), default;
  color: black;
  image-rendering: pixelated;
}

a {
  color: #f7adff;
  text-decoration: underline;
}
a:hover {
  color: #faffb3;
  background-color: #415fc0;
  cursor: url('/cursor/cur902.gif'), pointer;
}

h1, h2, h3 {
  font-family: '2Credits';
  color: blue;
  font-size:18px;
}



hr {
  border-top: 3px double #3243db;
}

::selection {
  background-color: #5da2cf;
  color: white;
  text-shadow: 1px 1px #faffb3;
}

    .content-wrapper {
      width: 1000px;
      margin: 40px auto;
    }

    .header {
    
    }
    
    .headerbox {
    height: 100%;
    width: 100%;
    }
  
  
      .header2 {
      height:27px;

    }
    
    .headerbox2 {
    height: 100%;
    width: 100%;

    }
    
    .headerbox2 img {
    height: 100%;

    }

    .column-container {
      display: flex;
      width: 100%;
      padding: 5px 0px;
    }
      

    .left-menu, .right-menu {
      width: 190px;

      font-size: 14px;
    }

    .box {
    width:190px;
    }
    
   .menubox {
     width:190px;
   }
   
   .menubox img:hover {
  filter: brightness(1.3);

   }


    .left-menu ul,
    .right-menu ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .left-menu li,
    .right-menu li {
      margin-bottom: 10px;
    }

    .left-menu a,
    .right-menu a {
      color: #3243db;
      text-decoration: none;
    }

    .left-menu a:hover,
    .right-menu a:hover {
      color: #faffb3;
      background-color: #415fc0;
    }

    .main-box {
      width: 620px;
      height: 600px;
      margin: 0;
      background-color:#7738ff;
    }

    .box2 {
    width:100%;
    }
    
    .box2 img {
    max-width:100%;
    }
    
    .textbox {
    padding: 10px 10px 0px;
    font-size:18px;
    background-color:white;
    width:90%;
    margin:auto;
    }
    
    .box3 {
width:60%;
height:100px;
	border: 1px solid #5d6af5;
	padding:6px;
	overflow:auto;
	margin:auto;

}

#fixed {
  position: fixed;
  top: 120px;
  left: calc(50% + 450px + 1px); /* 20px to the right of the container */
  z-index: 9999;
  pointer-events: none;
}

#fixed2 {
  position: fixed;
  top: 500px;
  left: calc(50% + -630px + 1px); /* 20px to the right of the container */
  z-index: 9999;
  pointer-events: none;
}


.response-area {
 border: 1px solid #ccc;
 background: #fff;
 height: 60px;
 margin: 5px 0;
 padding: 5px;
 font-size: 12px;
 overflow-y: auto;
 text-align:left;
 box-sizing: border-box;
}

textarea {
 width: 100%;
 height: 50px;
 font-size: 12px;
 resize: none;
 padding: 5px;
 box-sizing: border-box;
 margin-bottom: 5px;
}

button {
 padding: 5px;
 font-size: 12px;
 background-color: #007BFF;
 color: #fff;
 border: none;
 cursor: pointer;
 border-radius: 4px;
 height: 30px;
}

button:hover {
 background-color: #0056b3;
}
.ask-the-admin {
 background-color:#ff4400;
 width: 100%;
 height: 200px;
 margin: auto;
 text-align: center;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 5px;
 font-family: 'W95FA';
 color:blue;
}

.ask-the-admin h2 {
 font-size: 17px;
 margin: 0;
 padding: 0;
 color: #ffd500;
 text-align: center;
  font-family: '2Credits';

}

.response-area {
 background: #fff;
 height: 80px;
 font-size: 14px;
 overflow-y: auto;
 text-align:left;
 padding: 5px;
 margin: 5px 0;
 box-sizing: border-box;
}

textarea {
 width: 100%;
 height: 50px;
 font-size: 14px;
 resize: none;
 padding: 5px;
 box-sizing: border-box;
 margin-bottom: 5px;
 font-family: 'W95FA';
}


button {
 height: 30px;
 font-size: 12px;
 padding: 0;
 background: linear-gradient(to bottom, rgba(135, 206, 250, 0.7), rgba(30, 144, 255, 0.9));
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.5);
 border-radius: 8px;

 text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
 cursor: pointer;
 transition: background 0.3s ease, box-shadow 0.3s ease;
 backdrop-filter: blur(5px);
}

button:hover {
 background: linear-gradient(to bottom, rgba(173, 216, 230, 0.9), rgba(70, 130, 180, 1));
}

button:active {
 background: linear-gradient(to bottom, rgba(30, 144, 255, 1), rgba(25, 25, 112, 1));
 box-shadow: inset 0 2px rgba(0, 0, 0, 0.3);
}