/*
Got most of this done with sadgirl.online's LAYOUT BUILDER !
You can find it here: https://sadgirl.online/projects/layout-builder 
Thanks for the help in making my webpage what I want it to be!
*/

/* body {
  background-image:url('/images/wb.png');
  background-size:auto;
  color:#FFFFFF;
  background-repeat:repeat
}
*/

/* Colour Behind Text Boxes */

.black_bg
{
  background-color:#000000;
  padding:3px;
}

.blue_bg
{
  background-color:#0000a8;
  padding:3px;
}

.white_bg
{
  background-color:#FFFFFF;
  padding:3px;
}

/* Container Code */
/* Done with the help of SADGRL's Layout Maker :) */

<style>
:root{
  --header-image:url('https://www.gameinformer.com/sites/default/files/styles/full/public/2021/04/23/1eafd78b/mgs_2_header_image.jpg');
  --body-bg-image:url('https://sadhost.neocities.org/images/tiles/blobz.gif');
  
  --content: #FFFFFF;
}

/*
body {
  margin:0;
  background-color:#000000;
  background-size:65px;
  color:#FFFFFF;
  background-image:var(--body-bg-image);
}
*/

body {
  background-image:url('https://sadhost.neocities.org/images/tiles/page_background_animated_04.gif');
  url('https://sadhost.neocities.org/images/tiles/anisnow.gif')
  background-size:auto;
  background-repeat:repeat;
  color:#000000;
}

{
  box-sizing:border-box;
}

#container {
/*  background-color:#000000; */
  max-width:900px;
  padding:10px;
  margin:0 auto;
  
} 

#container a {
  /* color:#ED64F5;*/
  color:#000000;
  font-weight: bold;
  text-decoration:none;
}

/* links
#container a {
color: #ED64F5;
font-weight: bold;
text-decoration:none;
*/

#header {
  width: 100%;
/*  background-color:#FFFFFF; */
  height:100px;
  background-image:var(--header-image);
  background-size:100%;
  background-repeat:repeat;
}

#navbar {
  height:40px;
  background-color:#EBEDEE;
  width:100%;
}

#navbar ul {
  display:flex;
  padding:0;
  margin:0;
  list-style-type:none;
  justify-content:space-evenly;
}

#navbar li {
  padding-top:10px;
}

#navbar li a{
  color:#000000;
  /* font-weight:800; */
  text-decoration:none;
}

#navbar li a:hover {
  color:#a49cba;
  text-decoration:none;
}

#flex {
  display:flex;
}

#leftsidebar {
/* background-color:#FFFFFF; */
width:150px;
padding:0px;
margin-right:10px;
/* font-size:smaller; */

}

#rightsidebar {
/* background-color:#FFFFFF; */
width:110px;
padding:0px;
margin-left:10px;
/* font-size:smaller; */
}


main {
/* background-color:#FFFFFF; */
  flex: 1;
/*  width:50%; */
  width:640px;

/*  padding-left:0px;
  margin-left:10px;
  margin-right:0px;
  order:3; */
}

/* Sidebars Order */

/*
#leftsidebar {
  order:1;
}


main {
  order:2;
}

#rightsidebar {
  order:3;
}

*/

footer {
  background-color:#EBEDEE;
  width:878px;
  height:20px;
  padding:10px;
  text-align:center;
}

/* Text Colours and Things */

h1,
h2,
h3 {
  color:#000000;
}

h1 {
  font-size:25px;
}
 strong {
  color:#000000;
}

/* dunno what this is */

.box {
  background-color:#EBEDEE;
  border: 1px solid #C0C6C9;
  padding:10px;
}

.box2 {
  background-color:#EBEDEE;
  border: 1px solid #C0C6C9;
  padding:10px;
}

.box3 {
  background-color:#FFFFFF;
  border: 1px solid #C0C6C9;
  padding:10px;
  width:480px;
  color:#000000
}

.footerbox {
  border: 1px solid #C0C6C9;
  padding-top:0px;
  margin-top:10px;
}

.headerbox {
  border:1px solid #c0c6C9;
  padding-bottom:0px;
  margin-bottom:10px;
  height:40px;
}

/* this box makes it so text doesnt expand all your shit */
 .textbox {
  margin-left:60px;
  margin-right:60px;
  padding-top:10px;
  padding-bottom:10px;
  color:#000000;
}
/* these are specifically for having and putting text in the notepad.png and notepad_thin.png images */
.notepadtext {
  padding-top:60px;
  margin-left:60px;
  margin-right:80px;
  color:#000000;
}
.abtnotepadtext {
  padding:40px;
  margin-top:12px;
  margin-left:6px;
  margin-right:30px;
  color:#000000;
  text-align:left;
}
.abttext {
  margin-top:-6px;
/*  margin-top:12px; */
  margin-left:100px;
  color:#000000;
  text-align:left;
  position:absolute;
  width:360px;
}

.updatesbox {
  background-color:#FFFFFF;
  border: 1px solid #C0C6C9;
  padding:10px;
  font-size:smaller;
}

.whbox {
  background-color:#EBEDEE;
  padding:6px;
}

#topbar {
  width:900%;
  height:30px;
  padding:10px;
  font-size:smaller;
  background-color:#859144;
}

}
</style>

/* Dividers */

.dashed {
  border-top:3px dashed #bbb;
}
.dotted {
  border-top:3px dotted #bbb;
}
.solid {
  border-top:3px solid #bbb;
}
.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}

/* Text Over Images */

.imgcontainer {
  position:relative;
  text-align:center; 
  color:#FFFFFF;
}
.bottom-left {
  position:absolute;
  bottom:8px;
  left:16px;
}
.top-left {
  position:absolute;
  top:8px;
  left:16px;
}
.top-right {
  position:absolute;
  top:8px;
  right:16px;
}
.bottom-right {
  position:absolute;
  bottom:8px;
  right:16px;
}
.centered {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}