/* This defines what it'll look like when a user clicks + drags to highlight text. Not declaring this just goes to system default */
::selection {
  color: #f8f8f8;
  background: #4d5548;
}


@font-face {
  font-family: OnliLight;
  src: url(https://hazure03.neocities.org/fonts/OnliLight.woff); 
}

html {
  font-family: OnliLight; 
  color: #1b1b1b; 
  font-size: 15px; 
}

/* I use this mainly to declare a background image */
body {
  background-image: url(../image/nighttime.png)
}


table {
  width:800px; 
  height:800px; 
  margin: 10px auto; 
  border: 1px solid #616161; 
  background: #dadae9; 
}


td {
  border: 2px solid #777777;
  padding: 10px; 
  vertical-align:top; 
}

#header {
  width: 100%; 
  height:100px;
  padding: 0px; 
  margin: 0px; 
  background-image: url(../image/TitleBG.png) 
}

#header img {
  max-width:400px;
  max-height:200px;
  padding: 5px;
}

h1 {
  background:#C8CACB; 
  color:#000000; 
  margin:0px;
  padding:3px;
  text-align: center; 
  font-size: 15px;
  letter-spacing: 5px; 
  
}

h2 {
  background:#d0d2e0;
  color:#000000;
  margin:0px;
  padding:3px;
  text-align: right;
  font-size: 20px;
  letter-spacing: 5px;
}


h3 {
  color:#1a1a1a;
  margin:10px;
  padding:0px;
  font-size: 17px;
}

p {
  margin-left:10px;
}

#menu {
  margin: 0;
  padding: 0;
  width: 25%; 
  vertical-align: top;
}

/*mods*/

#menu img {
  height:50px;
  width:50px;
  padding: px;
  float:left;
  border: 1px solid;
  margin-left:10px;
}

#menu .username {
  margin-left: 70px;
  margin-right: 10px;
  font-size: 16px;
}

#menu .offline::before {
  content: url("../image/offline.webp"); 
  vertical-align:-50%; 
  margin-right: 5px;
}

#menu .online::before {
  content: url("../image/online.webp"); 
  vertical-align:-50%; 
  margin-right: 5px;
}

/*mods end*/

#content .post {
  color:#000000;
  margin:0px;
  padding:3px;
  border: 1px solid #616161;
}

#content .post .postimg {
  padding:5px;
  max-height: 160px;
  max-width: 220px;
  float:right;
}


/* youtube button vvvv */

#content .post .yt::before {
  content: url("../image/yt.png"); 
  vertical-align:-55%; 
  margin-right: 5px;
}


#menu ul {
  margin: 0;
  padding: 0;
  list-style-type:none; 
  vertical-align: top;
}

#menu li {
  text-align:left; 
  padding:3px;
  margin: 5px;
  background: #d0d2e0;
 
}

/* gotta make separate rules for each bullet point for differing images */
#menu .home::before {
  content: url("../image/grass.webp"); 
  vertical-align:-50%; 
  margin-right: 5px;
}

#menu .buildings::before {
  content: url("../image/workbench.webp"); 
  vertical-align:-50%; 
  margin-right: 5px;
}

#menu .vehicles::before {
  content: url("../image/compass.gif"); 
  vertical-align:-50%; 
  margin-right: 5px;
}

#menu .redstone::before {
  content: url("../image/redstone.webp"); 
  vertical-align:-50%; 
  margin-right: 5px;
}

#menu .misc::before {
  content: url("../image/sign.webp"); 
  vertical-align:-50%; 
  margin-right: 5px;
}

#footer {
  height: 25px;
}

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

a:hover {
  font-style:italic;
  color: #472bb6;
}

.divider {
  border-bottom: 1px dashed #000000;
  margin: 5px 0px;
}

.steveimg {
  position: fixed; 
  bottom: 0; 
  right: 0;  
  padding-right: 50px;
  width: 200px;
}