/* 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." */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/roboto/roboto.woff2) format('woff2');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/roboto/roboto-mono.woff2) format('woff2');
}

@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/im_fell_english/im_fell_english.woff2) format('woff2');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/ubuntu/ubuntu.woff2) format('woff2');
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/ubuntu/ubuntumono-regular.woff2) format('woff2');
}

a:link {
  color: black;
  text-decoration: underline;
}
a:visited {
  color: black;
  text-decoration: underline;
}
a:hover {
  color: #FF00FF;
  text-decoration: underline;
}
a:active {
  color: #FF00FF;
  text-decoration: underline;
}


.invert:link {
  color: white;
  text-decoration:underline;
}
.invert:visited {
  color: white;
  text-decoration: underline;
}
.invert:hover {
  color: #FF00FF;
  text-decoration: underline;
}
.invert:active {
  color: #FF00FF;
  text-decoration: underline;
}

body {
  overflow-y: scroll;
  background-color: #ffffff;
  color: black;
  font-family: "Roboto";
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  /*font-weight: 400;*/
  /*letter-spacing: 0.1em;*/
  text-align: center;
  justify-content: center;
  line-height: 1.3;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

div {
  margin: 0 auto;
  text-align: left;
}

ul {
  text-align: center;
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  font-size: 16px;
  font-family: "IM Fell English";
} 

li {
  border:1px solid #fff;
  display: inline-block;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 10px 10px;
  margin: 2px 0px;
  text-decoration: none; 
}

li:hover {
  color: #000;
  background: #fff;
}

candle {
  border:none;
  display: inline-block;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 5px 2px;
  margin: 2px 0px;
  text-decoration: none; 
}

/* General page stuff */

page_container {
  max-width: 95%;
  width: 760px;
  text-align: center;
  overflow: auto;
}


#box_title {
  max-width:91.25%;
  width:730px;
  background:#ffde00;
  text-align: left;
  border-top: 1px solid black;
  margin: 0 auto;
}

#box_title_p {
  border: 2px inset #00000025;
  margin: 0;
  padding:0.5% 2%;
}

#box_content {
  max-width:91.25%;
  width:730px;
  margin:0 auto;
  background-color:#faebd7;
}

#box_p {
  border: 2px inset #00000025;
  margin: 0;
  padding:0.5%;
}

#box_p_noborder {
  border-top: none;
  border-bottom: none;
  margin: 0;
  padding:0.5%;
}

#site_tree {
  width: max-content;
  text-align: left;
  margin:2px auto;
  background-color:#000;
  color:#fff;
  font-family: "Ubuntu Mono";
  font-size: 14px;
}
#site_tree a:link{
  color: #fff;
  text-decoration: underline;
}
#site_tree a:visited {
  color: #fff;
  text-decoration: underline;
}
#site_tree a:hover {
  color: #FF00FF;
  text-decoration: underline;
}

/* Images page stuff */

#filter_menu {
  background-color: #20B2AA;
  text-align: center;
  font-family: "Ubuntu Mono";
  border: 2px inset #00000025;
  margin: 0;
  padding: 0.2%;
}
      
#images_grid {
  margin:0 auto;
  padding: 2% 0.1%;
  max-width:87.25%;
  width:698px;
  font-size:12px;
  background-color:transparent;
  text-align:center;
}
#images_grid img {
  max-width:30%;
  width:170px;
  border:1px solid #000;
}

#images_nav {
  width:max-content;
  background:black;
  text-align: center;
  margin: 0 auto;
  font-family:"Ubuntu Mono";
  color:white;
}
#images_nav a:link {
  color:white;
  text-decoration: none;
}
#images_nav a:visited {
  color:white;
  text-decoration: none;
}
#images_nav a:hover {
  color: #FF00FF;
  text-decoration: underline;
}

#image_content {
  margin:0 auto;
  background-color:transparent;
  text-align:center;
}
#image_content img {
  max-width:100%;
}

#image_box_content {
  max-width:91.25%;
  width:560px;
  margin:0 auto;
  background-color:#faebd7;
}
#image_box_content img {
  max-width:100%;
}

#image_box_p {
  border: 2px inset #00000025;
  margin: 0;
  padding: 0.5%;
}
#image_box_p>p {
  margin: 0.5em;
}

#image_box_p_img {
  border: 2px inset #00000025;
  margin: 0;
  padding: 0.5%;
  text-align: center;
  background-color:#FFDEAD;
}
#image_box_p_img>p {
  margin: 0.5em;
}

/* Music page stuff */

#album_grid {
  margin:0 auto;
  padding: 2% 0.1%;
  max-width:87.25%;
  width:698px;
  font-size:12px;
  background-color:transparent;
  text-align:center;
}
#album_grid img {
  max-width:100%;
  width:340px;
  border:1px solid #000;
}

/* Films page stuff */

#artwork_nav {
  max-width:91.25%;
  width:730px;
  background:#FAEBD7;
  text-align: center;
  border-top: 1px solid black;
  margin: 0 auto;
  font-family:"Ubuntu Mono";
}

#artwork_nav_p {
  border: 2px inset #00000025;
  margin: 0;
  padding:0.5% 2%;
}
#artwork_nav_p a:link {
  color:black;
  text-decoration: none;
}
#artwork_nav_p a:visited {
  color:black;
  text-decoration: none;
}
#artwork_nav_p a:hover {
  color: #FF00FF;
  text-decoration: underline;
}


#artwork_content {
  max-width:91.25%;
  width:730px;
  margin:0 auto;
  background-color:#faebd7;
}

#artwork_content_p {
  border: 2px inset #00000025;
  margin: 0;
  padding:1%;
  text-align: left;
}

#artwork_credits {
  border: 2px inset #00000025;
  margin: 0;
  padding:1%;
  text-align:justify;
  font-size:12px;
}

#artwork_header {
  text-align:center;
  border:2px inset #00000050;
  margin: 0 auto;
  padding:0.5%;
}

#artwork_glossary {
  text-align:justify;
  border: 2px inset #00000050;
  background-color:#FAEBD775;
  padding: 1%;
  color: black;
}
#artwork_glossary a:link{
  color: #0645af;
  text-decoration: underline;
}
#artwork_glossary a:visited {
  color: #4004a1;
  text-decoration: underline;
}
#artwork_glossary a:hover {
  color: #DC143C;
  text-decoration: underline;
}

#artwork_images {
  border: 2px inset #00000025;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
}
#artwork_images img {
  max-width: 100%;
  width:680px;
}

/* Glossary page stuff */

glos_letter{
  font-family:"IM Fell English";
}

#glos_wrapper{
  display:table;
  line-height:1.5;
  margin:0 auto;
  background-color:#FFDEAD;
  border: 2px inset #00000025;
  padding:3%;
}

#glos_content{
  display:table-row;
}

#glos_content>div{
  display:table-cell;
}

#glos_col {
  width: 338px;
  max-width: 42.25%;
  text-align: left;
  font-size: 14px;
  border: 2px inset #00000025;
  padding: 1%;
  background-color:#FAEBD7;
}

#glos_col a:visited {
  color: #4004a1;
  text-decoration: underline;
}
#glos_col a:hover {
  color: #DC143C;
  text-decoration: underline;
}

#etry_wrapper{
  margin:0 auto;
  padding:0.5%;
  background-color:#FFFAF0;
  line-height:1.8;
  border: 2px outset #00000025;
}

#etry_content{
  display:table;
  table-layout:fixed;
  width:100%;
}

#etry_content>div{
  display:table-cell;
}

#etry_left {
  width: 30%;
  vertical-align:top;
  font-family:"IM Fell English";
  line-height:1.3;
  background-color:#FAEBD7;
  border: 2px inset #00000025;
  text-align:center;
}
#etry_left>img{
  border: 2px inset #00000025;
  max-width: 90%;
  display:block;
  margin: 0 auto;
}
#entry_left>p{
  padding:1.2%
}

#etry_right {
  width: 70%;
  text-align:left;
  font-size: 14px;
}
#etry_right a:link {
  color: #0645af;
  text-decoration: underline;
}
#etry_right a:visited {
  color: #4004a1;
  text-decoration: underline;
}
#etry_right a:hover {
  color: #DC143C;
  text-decoration: underline;
}
#etry_right>p>img{
  max-width: 100%;
}
#etry_right>p{
  padding: 1.5%
}

#return_to_top {
  text-align:left;
  margin:0 auto;
  padding:0.5% 5%; 
  background-color:#00000085;
  color:#A9A9A9;
  border-top: 1px solid #696969;
  font-family:"Ubuntu";
  font-size: 14px;
}
#return_to_top a:link {
  color: #A9A9A9;
  text-decoration: none;
}
#return_to_top a:visited {
  color: #A9A9A9;
  text-decoration: none;
}
#return_to_top a:hover {
  color: #FFF;
  text-decoration: none;
}

/* Blog page stuff */

#blog_nav {
  text-align:center;
  font-family:"Ubuntu Mono";
  color:#FFF8DC;
  margin:0 auto;
  padding: 2%;
  background-color:#696969;
  border-top: 1px solid black;
}
#blog_nav a:link {
  color:white;
  text-decoration: none;
}
#blog_nav a:visited {
  color:white;
  text-decoration: none;
}
#blog_nav a:hover {
  color: #FF00FF;
  text-decoration: underline;
}

#blog_arc_nav {
  text-align:center;
  font-family:"Ubuntu Mono";
  color:#FFF8DC;
  margin:0 auto;
  padding: 2%;
  background-color:#696969;
  border-top: 1px solid black;
}
#blog_arc_nav a:link {
  color:white;
  text-decoration: underline;
}
#blog_arc_nav a:visited {
  color:white;
  text-decoration: underline;
}
#blog_arc_nav a:hover {
  color: #FF00FF;
  text-decoration: underline;
}

#post_title{
  padding: 0.2%;
  background-color:#FF7F50;
  text-align:center;
  font-family:"IM Fell English";
  color:black;
  border-top: 2px inset #00000050;
  border-right: 2px inset #00000050;
  border-left: 2px inset #00000050;
  border-bottom: 1px solid #2F4F4F;
}

#post_older_container{
  background-color:#808080;
  width:593px;
  max-width:100%;
}
#post_older_container a:link {
  color:white;
  text-decoration: none;
}
#post_older_container a:visited {
  color:white;
  text-decoration: none;
}
#post_older_container a:hover {
  color:#FF00FF;
  text-decoration: underline;
  background-color:#FF7F50;
}

#post_older_link{
  padding:0.2em 1em;
  text-align: right;
  border: 2px inset #00000050;
}

#post{
  padding:2.8%;
  text-align:left;
  border-right: 2px inset #00000050;
  border-left: 2px inset #00000050;
  border-bottom: 2px inset #00000050;
}
#post img {
  max-width:100%;
  display:block;
  margin: 0 auto;
}

#post_container{
  background-color:#FAEBD7;
  width:593px;
  max-width:100%;
}

#post_container_dark{
  background-color:#232629;
  color:white;
  width:593px;
  max-width:100%;
}
#post_container_dark a:link {
  color:white;
  text-decoration: underline;
}
#post_container_dark a:visited {
  color:white;
  text-decoration: underline;
}
#post_container_dark a:hover {
  color: #FF00FF;
  text-decoration: underline;
}