/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*root is a pseudo class that allows the variables to be used globally*/
:root {
  --pageheight: 900px;
  --sidebarwidth: 18%;
  --sidebarpadding: 1.5%;

  --sidebarbgcolor: #FFFFBB;

}

body {
  /*background-image: url("bg_yellow2.png");*/ /*smaller yellow check pattern*/
  /* aesthetic pink japan pixel art bg; jpegged to shit
  background-image: url("bg/japan-pink-aesthetic-pixel-art.jpg");
  background-repeat: no-repeat;
  background-color: #246d8d;
  
  background-size: 100%;
  background-position-x: 50%;
  */

  background-image: url("bg/bg_train3.png");
  /*these three lines make the image full width, centered, and not repeat, so a color can be filled in below. */
  background-size: 100%;
  background-position-x: 50%;
  background-repeat: no-repeat;
  /*background fill color (match bottom of bg image)*/
  background-color: #9badb7; /*nice aesprite gray*/ 

  color: black;
  font-family: "Times New Roman";
}

/*header used for about, nav, and (maybe) content sections*/
h2 {
  width: 100%;
  font-family: "Verdana";
  font-size: 100%;
}

/*container div for main website content space*/
.main {
  width: 900px;
  margin: auto;
}

/*banner area at the top of the site*/
.banner {
  /*background-color: #CCCCCC;*/
  height: 250px;

}

/*container div for the 3 side by side objects*/
.panels {
  background-color: #CCCCFF; /*should rely on each item individually; and set their heights the same*/
  width: 100%;
  height: 400px;
  height: var(--pageheight);
}

.about {
  width: var(--sidebarwidth);
  /*height: var(--pageheight);*/
  height: 97%;
  float: right;
  padding: var(--sidebarpadding);

  /*
  border: 3px solid transparent;
  border-image: url(border_test1.png) 3 round;
  */

  background-color: var(--sidebarbgcolor);
}

.nav {
  width: var(--sidebarwidth);
  /*height: var(--pageheight);*/
  height: 97%;
  float: left;
  padding: var(--sidebarpadding);

  /*border: solid;*/

  background-color: var(--sidebarbgcolor);
}

.content {
  width: 55%;
  margin: auto;
  /*height: var(--pageheight);*/
  height: 97%;
  float: center;
  padding: 1.5%;

  background-color: #FFFFDD;
}

.footer {
  background-color: #CCCCCC;
}



/*
*
*
*/
/*not_found.html*/
.notfound {
  /*bounding box*/
  background-color: #FFFFFF88;
  padding: 12px;
  
  /*center div*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /*font*/
  font-family: "Verdana";

}