/* Root */
body, * {
  margin: 0;
  padding: 0;
}
body {
  width: 10000px;
  height: 10000px;
}

#background {
  background-image: url('../files/homepage-assets/images/stippled-background.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 100%;
}

.night-time #background {
  filter: invert(1);
}

/* All Items */

.text,
.jump,
.header,
.card,
.page,
.image,
.button,
.freeform
{
  position: absolute;
}

/* Item: text */

.text {
  background-color: white;
  padding: 5px;
  border: 1px solid black;
  border-radius: 3px;
  font-size: 1.2em;
}
.night-time .text {
  background-color: black;
  border: 1px solid white;
  color: white;
}

/* Item: jump */

.jump {
  cursor: pointer;
  font-size: 1.5em;
  color: #ff3155;
  background-color: white;
  padding: 5px;
  border-left: 2px solid #ff3155;
  border-right: 2px solid #ff3155;
  white-space: nowrap;
}
.night-time .jump {
  background-color: black;
}
.jump:hover {
  box-shadow: 5px 5px 10px #797f8a;
}
.night-time .jump:hover {
  box-shadow: 5px 5px 10px black;
}
.jump:active {
  box-shadow: none;
}

/* Item: header */

.header {
  color: white;
  background-color: #ff3155;
  padding: 5px;
  white-space: nowrap;
}
.night-time .header {
  background-color: #ff3155;
  color: black;
}

/* Item: card */

.card {
  padding: 10px;
  background-color: white;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  border-radius: 3px;
}
.night-time .card {
  background-color: black;
  color: white;
  border: 1px solid white;
}
.card img {
  width: 100%;
  border: 1px dashed black;
  background-color: white;
}
.night-time .card img {
  border: 1px dashed white;
}
.card p {
  padding-top: 10px;
  font-size: 1.2em;
}
.card:hover {
  box-shadow: 5px 5px 10px #797f8a;
}
.night-time .card:hover {
  box-shadow: 5px 5px 10px black;
}
.card:active {
  box-shadow: none;
}

/* Item: post */

.page {
  border: 3px dashed gray; /* TODO replace with brand color */
  font-size: 1.5em;
  padding: 5px;
  background-color: white;
  text-decoration: none;
  text-align: center;
  color: gray; /* TODO replace with brand color */
  /*white-space: nowrap;*/
}
.night-time .page {
  background: black;
}
.page:hover {
  box-shadow: 5px 5px 10px #797f8a;
}
.night-time .page:hover {
  box-shadow: 5px 5px 10px black;
}
.page:active {
  box-shadow: none;
}

/* Item: freeform */

.freeform.add-white-background {
  background-color: white;
}

/* Demon Bear Chat Bot */

#demon-chat-bot {
  max-width: 300px;
  padding: 10px;
  background-color: black;
}

#demon-chat-bot img {
  width: 280px;
}

#demon-chat-bot p, #demon-chat-bot ul li {
  margin: 0;
  padding: 3px;
  cursor: pointer;
  background-color: #4b2929;
  color: red;
}

#demon-chat-bot ul {
  list-style-type: disclosure-closed;
  padding-left: 15px;
}

#demon-chat-bot ul li {
  margin: 5px;
}

#demon-chat-bot ul li:hover {
  background-color: #6d2222;
}

#demon-chat-bot ul li:active {
  background-color: lightblue;
}

#demon-chat-bot input {
  background-color: #4b2929;
  margin: 5px 0 0 0;
  color: red;
  padding: 3px;
  font-family: serif;
  font-size: 1em;
}
#demon-chat-bot input.hidden {
  display: none;
}

/* Nabeel Valley Webring */

#nabeel-valley-webring {
  width: 180px;
  padding: 10px;
  background-color: white;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  border-radius: 3px;
}
.night-time #nabeel-valley-webring {
  background-color: black;
  color: white;
  border: 1px solid white;
}
#nabeel-valley-webring a {
  display: inline-block;
  padding: 5px;
}
.night-time #nabeel-valley-webring a {
  color: #3eb4ff;
}