:root {
  --banner: url("img/preztest/prezVidyaTitle.gif");
}
a {
    color: #0000ff !important;
}
.major:not(h1, h2, h3, h4, h5, h6) {
	font-size: 16px;
}
.major {
	font-weight: bold;
	font-family: "Press Start 2P";
	color: #aaaaaa;
	text-shadow: 0 2px #777777;
}
.customTitle {
  color: #ffff00;
  font-weight: normal;
  font-family: 'Press Start 2P';
  font-size: 22px;
  text-align: center;
  text-shadow: 0.05em 0.05em 0 #0000ff;
  text-transform: uppercase;
  letter-spacing: -0.075em;
  margin-top: 4px;
}



/* fonts */
/* cyrillic-ext */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nYivN04w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nRivN04w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nWivN04w.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* Header */
#page:before {
  content: "";
  display: block;
  background: #000034;
	background-color: rgb(0, 0, 52);
	background-attachment: scroll;
	background-size: auto;
	background-origin: padding-box;
	background-clip: border-box;
	border-bottom: solid 10px #ffff00;
  height: 100px;
  background-image: var(--banner);
  background-repeat: no-repeat;
  background-position: center;
}
nav {
  padding-top: 0 !important; 
  background-color: #000;
	font-family: "arial";
	font-weight: bold;
	font-size: x-small;
	text-align: center;
	height: 15px;
	padding: 2px;
	text-transform: uppercase;
	color: #00f;
}
nav * {
	vertical-align: middle;
  background-color: #000;
}
.heart {
  background-image: url("https://homestuck.com/logosAndAds/candycorn.gif") !important;
  image-rendering: auto;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 6px;
	padding: 0 !important;
	background-repeat: no-repeat;
	background-position: center;
}



/* body */
body {
	/*
	normal
	--bg-color: #f3f3e3;
  --border-color: #000;
  --content-bg-color: #f3f3f3;
  --text-color: #431;
  --link-color: #900;
  --link-hover-color: rgba(0, 0, 0, 0.05);
  --unavailable-bg-color: rgba(0, 0, 0, 0.1);
  --unavailable-color: #999;
  --tab-bg-color: #dedede;
  --tab-color: #ddd;
  --tab-hover-color: #ececec;
  --card-border-color: #ccc;
  --card-bg-color: #ddd;
	dark mode
	--bg-color: #000;
  --border-color: #fff;
  --content-bg-color: #242424;
  --text-color: #efefef;
  --link-color: #ff8080;
  --link-hover-color: rgba(255, 255, 255, 0.06);
  --tab-bg-color: #555555;
  --tab-color: #505050;
  --tab-hover-color: #242424;
  --card-border-color: #4c4c4c;
  --card-bg-color: #3f3f3f;
	*/
	--bg-color: #000000;
  --border-color: #000000;
  --content-bg-color: #000000;
  --text-color: #fff;
  --link-color: #0000ff;
  --link-hover-color: rgba(255, 255, 255, 0.06);
  --unavailable-bg-color: rgba(0, 0, 0, 0.1);
  --unavailable-color: #999;
  --tab-bg-color: #555555;
  --tab-color: #505050;
  --tab-hover-color: #242424;
  --card-border-color: #4c4c4c;
  --card-bg-color: #3f3f3f;
	margin: 0;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	overflow-y: scroll;
	background-image: url("https://file.garden/aAUSRxm2KRQR_iG2/prezstuck/prezBackground.gif");
}
#page {
  width: 950px;
	margin: 0 auto;
	padding: 0;
	background-color: #000034;
	position: relative !important;
	height: 100vh + 100px;
}



/* Content */
#glorkycontainer {
  background: #000034;
  padding: 7px 0;
	font-weight: bold;
	font-size: 14px;
	width: 676px;
  margin-left: auto;
	height: 100vh;
	font-weight: bold;
  font-size: 14px;
}
#slide {
  margin: 0 auto 20px;
	margin-bottom: 8px;
	display: table;
	max-width: 940px;
	padding: 0 25px !important;
	margin: 0 auto 20px;
  word-wrap: break-word;
  word-break: break-word;
  border-left: 8px #000 solid;
	margin-bottom: 8px !important;
	background-color: #000 !important;
  color: #fff;
	height: 100vh;
}
#content {
  font-size: 12px;
	text-align: center;
	margin-bottom: 14px;
	width: 618px;
	max-width: 618px;
  background-color: #000 !important;
	color: #fff;
}
#content>span>br:first-child {
	display: none;
}
#content img {
	max-width: 940px;
}
#content img.major,
#content video.major,
#content iframe.major,
#content canvas.major,
#content object.major,
#content ruffle-object.major {
	margin: 0 -25px;
}
#tools_wrapper {
	position: absolute;
  top: 126px;
  left: 0;
  bottom: 130px;
  width: 250px;
	background-color: #000;
  border: solid #000;
	color: #fff;
	height: 100vh;
	text-align: left;
  padding: 4px;
  font-weight: bold;
}

/* bottom */
footer {
  margin-top: 1em;
  font-size: 0.8em;
  position: relative;
}
footer a {
  padding-right: 1em;
}



/* mspfa stuff ??? */
#dialog {
	position: fixed;
	min-width: 280px;
	max-width: 880px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: 1;
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	border: 1px solid #a9a9a9;
	background-color: #eeeeee;
}

#dialog>div:nth-child(1) {
	padding: 8px;
	background-color: #dddddd;
}

#dialog>div:nth-child(2) {
	padding: 12px;
}

#dialog>div:nth-child(3) {
	padding: 8px;
	text-align: right;
}

.spoiler {
	border: 1px dashed gray;
	padding: 1px;
}

.spoiler>div:last-child {
	margin: 12px 5%;
	padding: 3px;
	text-align: left;
}

.spoiler.closed>div:last-child {
	display: none;
}

#slide .spoiler img {
	max-width: 100%;
}



/* dendry text stuff */
#content #read-marker {
  border: none;
  border-top: 1px solid var(--border-color);
  height: 1px;
  width: 20%;
  clear: left;
}
#content h1:first-child {
  margin-top: 0.5em;
}
#content h1 {
  margin: 2em 0 1em 0;
  font-size: 1.35em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 2px,
               rgba(0, 0, 0, 0.1) -1px -1px 2px;
}
a {
  color: var(--link-color);
  text-decoration: none;
}
p {
  margin: 0;
  margin-bottom: 1em;
  text-indent: 1em;
}
p.game-over {
  border: 2px solid #bbb;
  padding: 0.5em;
  margin: 0.5em 0 0 0;
  border-radius: 4px;
  color: #999;
}
ul.choices {
  border: 2px solid #876;
  padding: 0;
  margin: 0.25em 0 0 0;
  list-style-type: none;
  border-radius: 4px;
  clear: left;
}
ul.choices li {
  border-bottom: 1px solid #876;
  padding: 0.5em;
}
ul.choices li div.subtitle {
  margin-left: 2em;
  font-style: italic;
}
ul.choices li.unavailable {
  color: var(--unavailable-color);
  background-color: var(--unavailable-bg-color) !important;
  cursor: default !important;
}
ul.choices li:hover {
  background-color: var(--link-hover-color);
  cursor: pointer;
}
ul.choices li:last-child {
  border-bottom: none;
}
ul.choices a {
  text-decoration: none;
}
blockquote {
  margin: 1em 2em;
}
blockquote.attribution {
  margin-left: 4em;
}
blockquote + blockquote.attribution {
  margin-top: -1em;
}
#qualities {
  text-indent: 0;
  line-height: 1.3em;
}
#qualities p {
  text-indent: 0;
}
#qualities h1 {
  font-size: 1.1em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 2px,
               rgba(0, 0, 0, 0.1) -1px -1px 2px;
}
#qualities h1 + p:first-line {
  font-weight: normal;
}



/* tabs */
.tab_container {
    background-color: var(--tab-bg-color);
}
.tab_button {
    font-family: "Courier New", Courier, monospace;
    background-color: var(--tab-color);
    color: var(--text-color);
    /*float: left;*/
    border: none;
    outline: none;
    padding: 10px;
}
.tab_button.active {
    background-color: var(--content-bg-color);
}
.tab_button:hover {
    background-color: var(--tab-hover-color);
}



/* save */
.overlay {
    background: rgba(0,0,0,0.7);
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    overflow: scroll;
}
.options {
    text-align: right;
}
.overlay_top {
    position: relative;
    max-width: 540px;
    margin: 100px auto;
    background: rgba(50,50,50,0.7);
    border: 2px solid;
    color: white;
}
.save_info {
    min-width: 10em;
}
/*
 * This is used for overlaying transparencies
 * only transition on fade-in
 * */
.b {
}
.save_button {
}
.delete_button {
}



/* Card stuff for dendrynexus */
ul.decks, ul.hand, ul.pinned-cards {
  list-style: none;
  padding-left: 0;
}

.hand {

}

.pinned-cards {

}

.deck {

}

a.card {
  display: inline-block;
  width: 120px;
  height: 150px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  border: 10px solid var(--card-border-color);
  margin-bottom: 0.5em;
  position: relative;
}
a.card:hover {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
  left: -5px;
  top: -5px;
}
div.blank-card {
  display: inline-block;
  width: 120px;
  height: 150px;
  background-color: var(--card-bg-color);
  border: 10px solid var(--card-border-color);
  margin-bottom: 0.5em;
}

.card-in-hand, .pinned-card, .deck {
  display: inline-block;
  position: relative;
  max-width: 150px;
  margin-right: 1em;
  vertical-align: top;
}

/* TODO: unavailable card */
.unavailable-card {
  color: var(--unavailable-color);
  background-color: var(--unavailable-bg-color) !important;
  cursor: default !important;
}

.card-caption {
  text-align: center;
  display: block;
  font-size: 1em;
}

.card-tooltip {
  position: absolute;
  visibility: hidden;
  width: 150px;
  max-width: 200px;
  font-size: 0.9em;
  z-index: 2;
  padding: 0.2em;
  border: 1px solid var(--border-color);
  background-color: var(--content-bg-color);
  left: 105%;
}

.card-img {
  height: 150px;
  width: 120px;
  object-fit: cover;
}

a.card:focus .card-tooltip, a.card:hover .card-tooltip {
  visibility: visible;
  position: absolute;
}

/* Unlike cards, face images can have different sizes. */
.face-figure {
  /*vertical-align: top;*/
  display: inline-block;
  border: 5px solid var(--card-border-color);
  float: left;
  max-width: 35%;
  /*max-height: 180px;*/
  margin-right: 1em;
  margin-bottom: 0.5em;
  overflow: hidden;
}
.face-img {
  /*max-width: 150px;*/
  vertical-align: bottom;
  object-fit: cover;
}

/* cards are smaller on mobile */
  .card-img {
    height: 125px;
    width: 100px;
  }
  a.card {
    width: 100px;
    height: 125px;
    border: 8px solid var(--card-border-color);
    margin-bottom: 0.5em;
    position: relative;
  }
  div.blank-card {
    width: 100px;
    height: 125px;
    border: 8px solid var(--card-border-color);
    margin-bottom: 0.5em;
  }
  .card-in-hand, .pinned-card, .deck {
    max-width: 120px;
    margin-right: 1em;
    vertical-align: top;
  }
}