/*-- Main structure --*/

body
{
  margin:0px;
  background-color: var(--clr-bg1, #000);
  color: var(--clr-txt, #ddd);
  font-family:"Ubuntu",sans-serif;

  overflow: hidden;
}

body::before
{
  position:absolute;
  content:"";
  opacity: 0.8;
  width:0px;
  height:100%;
  left:50%;
  margin-left: var(--wdt-half, 600px);
  box-shadow:0px 0px 8px 5px #000000;
}

h1
{
  font-weight: 400;
}

a
{
  color: var(--clr-txt, #ddd);
}
a:hover
{
  color: #888;
}

#header_container, #menu_container, #main_container, #footer_container
{
  position:absolute;
  width:100%;
  text-align:center;
}
#header_container
{
  height:60px;
}
#menu_container
{
  height:20px;
  top:80px;
}
#main_container
{
  top:120px;
  bottom:60px;
}
#footer_container
{
  height:20px;
  bottom:20px;
}
#header, #menu, #main, #footer
{
  width:100%;
  max-width: var(--wdt-full, 1200px);
  padding:10px 0px 10px 0px;
  display:inline-block;
  vertical-align:top;
  height:100%;
}

#header
{
  background-color: var(--clr-bg2, #070707);
}
#menu
{
  background-color: var(--clr-bg3, #0f0f0f);
}
#main
{
  background-color: var(--clr-bg4, #171717);
  overflow:auto;
  text-align:left;
}
#footer
{
  background-color: var(--clr-bg3, #0f0f0f);
}
#header, #menu, #footer
{
  /*font-variant:small-caps;*/
  overflow: hidden;
}
#content
{
  padding: 0px 10px 0px 10px;
}

#header h1
{
  margin: 0px;
  font-size: 3em;
}

#switch
{
  position: absolute;
  width: 1.1em;
  height: 1.1em;

  right: var(--pad, 5px);
  bottom: var(--pad, 5px);

  border-radius: 0.55em;
  opacity: 0.8;
  overflow: hidden;
}

.switch-light
{
  background-color: var(--clr-txt, #000);
}

.switch-dark
{
  background-color: var(--clr-txt, #ddd);
}

@font-face
{
  font-family: "Ubuntu";
  src: url("ubuntu.ttf");
}


/*-- Special Containers --*/
.window, .button, .special
{
  color: #fff;
  text-shadow: 1px 1px 1.5px #000;
  box-shadow: 1px 1px 1.5px #000;
}

.window
{
  margin-bottom: 5px;
  border-radius: var(--rad, 10px);
  overflow: hidden;
}
.window .title
{
  font-size: 1.2em;
  padding: var(--pad, 5px);

  background-color: #7f7f7f;
}
.window .title .icon
{
  margin-right: var(--pad, 5px);
}
.window .area
{
  min-height: 1em;
  padding-top: var(--pad, 5px);
  padding-bottom: 0px;
  padding-left: var(--pad, 5px);
  padding-right: var(--pad, 5px);
  background-color: rgba(127, 127, 127, 0.5);
}
.window .area p
{
  margin: 0px;
  padding-bottom: var(--pad, 5px);
}

.window a, .button a, .special a
{
  color: #fff;
  text-decoration: none;
}

.window a:hover, .button a:hover, .special a:hover
{
  color: #888;
}

.icon
{
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
}

.para-img
{
  max-height: 250px;
  max-width: 250px;
  margin-left: 10px;
  margin-right: 10px;
}

.left
{
  display: inline-block;
  float: left;
}
.right
{
  display: inline-block;
  float: right;
}
.centered
{
  text-align: center;
}