/*CUSTOM FONTS*/
    @font-face {
  font-family: system;
  src: url(DOS.ttf);
  font-display: swap;    
}

body {
font-family: 'system', serif, sans-serif;
}

.cusbutton {background-color:#111;width: 150px;margin:auto;}
      .cusbutton h2{outline-color:#777; outline-style:outset;}

      .cusbutton a {text-decoration: none;color:#eee;}
      
      /*hovering over button*/
      .cusbutton:hover { background-color:#333;width: 150px;margin:auto;}
      .cusbutton:hover h2 {font-family: 'system', serif, sans-serif;outline-color:#555; outline-style:inset;}
      .cusbutton:hover a {font-family: 'system', serif, sans-serif;text-decoration: none;text-shadow: 0px 0px 8px grey;color:#ddd;}
      /*click button*/
      .cusbutton:active { background-color:#330000;width: 150px;margin:auto;}
      .cusbutton:active a {font-family: 'system', serif, sans-serif;text-decoration: none;text-shadow: 0px 0px 8px red;color:red;}
      .cusbutton:active h2 {font-family: 'system', serif, sans-serif;outline-color:#290000; outline-style:inset;}




/*CUSTOM UPLOAD BUTTON */
.cusbuttonUpload {
  position: relative;
  left:30px;
  background-color: #144;
  border: none;
  padding: 3px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'system', serif, sans-serif;
  font-size:16px;/*Roughly matches my H2 cusbuttons*/
  margin:auto;
  cursor: pointer;
}

.cusbuttonUpload h2 {background-color:#111;outline-color:#777; outline-style:outset;margin:0px;padding:2px 40px;}
.cusbuttonUpload a {text-decoration: none;color:#eee;}

.cusbuttonUpload:hover h2 {background-color:#333;outline-color:#555; outline-style:inset;}
.cusbuttonUpload:hover a {text-decoration: none;text-shadow: 0px 0px 8px grey;color:#ddd;}
.cusbutton:active a {text-decoration: none;text-shadow: 0px 0px 8px red;color:red;}
.cusbutton:active h2 {background-color:#330000;outline-color:#290000; outline-style:inset;}
/*END OF BUTTON UPLOAD*/


/*DIV ABSOLUTE (using it for the MS-DOS logo)*/
div.absolute {
  position: absolute;
  top: 10;
  left: 10;
  width: 300px;
  
}

/*HIDE WHEN SCREEN TOO SMALL*/
@media (max-width:1275px) {
  img#hideitems {
    display: none;
  }
}


/*DOSBOX CONTAINER*/
      .dosbox-container { width: 640px; height: 400px; }
      .dosbox-container > .dosbox-overlay { background: url(images/play.png); }

/*KEYBOARD BUTTON STYLE*/
    kbd>kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}


  /*START CUSTOM SCROLL BAR*/       
          /* width */
::-webkit-scrollbar {
  width: 17px;
     outline: solid;
  outline-color: #222;
  outline-width: 1px;
 
}

/* Track */
::-webkit-scrollbar-track {
 background: #333;

}
         
          
/* Handle */
::-webkit-scrollbar-thumb {
  background: #777;

}
::-webkit-scrollbar-thumb:hover {
  background: #222;

}
 ::-webkit-scrollbar-thumb:active {
  background: #330000;

}
          /*SCROLL BUTTONS*/
  ::-webkit-scrollbar-button {
    background: #555;
    background-image: url("images/scroll.png");
    
            }
  ::-webkit-scrollbar-button:hover {
    background: #555;
    background-image: url("images/scrollhover.png");  
          }
              
  ::-webkit-scrollbar-button:active {
    background: #555;
    background-image: url("images/scrollclick.png");  
          }

::-webkit-scrollbar-corner{
background: #777;
}

  /*END CUSTOM SCROLL BAR*/       

.navbar {
  overflow: hidden;
  background-color: #333;
  border-style: double;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 7px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  margin-left:-3px;
  display: none;
  position: absolute;
  background-color: #777;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-style: hidden double  double double;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: #c99b02;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/*Some Table Styling*/
 th, td {
  position:relative;
  border:1px solid #222;
  outline-color:#222;
  outline-style: ridge;
}
/*th {
  background-image: url('images/pixelBG-test2.png');
}*/
table {
  position:relative;
max-width:100%;
}