/* =========================================================
   MSPFA VIEWER — NEOCITIES BASE STYLE
   ========================================================= */


/* =========================================================
   PAGE / BODY
   ========================================================= */

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background: #5a5a5a;
  margin: 0;
  font-family: 'Courier New', Courier, monospace;

  position: relative;
  min-height: 100vh;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.main {
  position: relative;
  width: 100%;
}


/* =========================================================
   PAGE BODY
   ========================================================= */

.pageBody {
  position: relative;
  width: 100%;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navBanner,
.customNavBanner {
  position: relative;
}

.navList {
  width: 950px;
  height: 17px;

  display: flex;
  align-content: center;
  justify-content: center;

  position: relative;

  font-size: 10px;
  line-height: 16px;

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;

  color: white;

  margin: auto;
}

.navList a {
  text-decoration: none;
}

.navList a:hover {
  text-decoration: underline;
}


/* Original MSPFA-style navigation colors */

.navList a:nth-child(n+0):nth-child(-n+1) {
  color: #fff;
}

.navList a:nth-child(n+2):nth-child(-n+4) {
  color: #29ff4a;
}

.navList a:nth-child(n+5):nth-child(-n+9) {
  color: #39d5f6;
}

.navList a:nth-child(n+10):nth-child(-n+13) {
  color: #f7f72a;
}

.navList a:nth-child(n+13) {
  color: #ffb529;
}


/* =========================================================
   CANDY CORN
   ========================================================= */

.candyCorn {
  content: url(./candycorn.gif);

  margin: 0 9px;

  flex-shrink: 0;
}


/* =========================================================
   PAGE FRAME
   ========================================================= */

.pageFrame {
  background: #c6c6c6;

  width: 950px;

  padding-top: 7px;
  padding-bottom: 23px;

  margin: 0 auto;

  flex: 0 1 auto;

  display: flex;

  justify-content: center;

  font-weight: 600;

  position: relative;
}


/* =========================================================
   PAGE CONTENT
   ========================================================= */

.pageContent {
  background: #fff;

  max-width: 950px;
  width: 650px;

  display: flex;

  flex: 0 1 auto;

  align-items: center;

  flex-flow: column;

  position: relative;
}


/* =========================================================
   STORY TEXT
   ========================================================= */

.story-text {
  position: relative;
}


/* =========================================================
   COMMAND
   ========================================================= */

#command {
  text-align: center;

  line-height: 1.1;

  font-size: 32px;

  padding: 15px 0;

  max-width: 590px;

  position: relative;
}


/* =========================================================
   STORY CONTENT
   ========================================================= */

#content {
  padding: 0 25px;

  line-height: 1.15;

  margin: 0 0 30px 0;

  font-size: 14px;

  text-align: center;

  position: relative;

  overflow-wrap: break-word;
}


/* Story images */

#content img {
  margin: 0 -25px;

  max-width: calc(100% + 50px);

  height: auto;
}


/* =========================================================
   STORY LINKS
   ========================================================= */

#links {
  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: x-large;

  font-weight: 400;

  margin: 0 25px 30px;

  position: relative;
}

#links > span > div::before {
  content: "> ";
}


/* =========================================================
   START OVER / GO BACK
   ========================================================= */

.bottomLinks {
  font-size: 10px;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  padding: 0 25px 10px;

  position: relative;
}

.bottomLinks a {
  text-decoration: none;
}

.bottomLinks a:hover {
  text-decoration: underline;
}


/* =========================================================
   GENERAL LINKS
   ========================================================= */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* =========================================================
   SPOILERS
   ========================================================= */

.spoiler {
  border: 1px dashed gray;

  padding: 1px;

  position: relative;
}

.spoiler > div:last-child {
  margin: 12px 5%;

  padding: 3px;

  text-align: left;
}

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


/* =========================================================
   SPOILER COMPATIBILITY
   ========================================================= */

.spoiler.open {
  position: relative;
}

#content .spoiler.open {
  position: relative;
}


/* =========================================================
   INFO / ADVENTURE BOX COMPATIBILITY
   ========================================================= */

#info {
  position: relative;
}

#info > span {
  position: relative;
}

#info #infobox {
  position: relative;
}

#info > span > .spoiler.open {
  position: relative;
}

#info #infobox > .spoiler.open {
  position: relative;
}


/* =========================================================
   COMMENT AREA COMPATIBILITY
   ========================================================= */

#comment,
#commentBox {
  position: relative;
}

#comment textarea,
#commentBox textarea {
  max-width: 100%;

  box-sizing: border-box;
}

#comment button,
#comment input[type="submit"],
#comment input[type="button"],
#commentBox button,
#commentBox input[type="submit"],
#commentBox input[type="button"] {
  cursor: pointer;
}


/* =========================================================
   CUSTOM BUTTONS
   ========================================================= */

.custom-button {
  display: inline-block;

  text-decoration: none;
}

.custom-button:hover {
  text-decoration: none;
}


/* =========================================================
   HEADER COMPATIBILITY
   ========================================================= */

header {
  position: relative;
}

header .mspfalogo {
  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  height: 110px;

  box-sizing: border-box;

  padding-left: 12px;
  padding-right: 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: auto;

  position: relative;
}

footer {
  position: relative;
}

footer .mspfalogo {
  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;
}


/* Footer images */

.footer img {
  max-width: 100%;
  height: auto;
}

.footer .bannerImage {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   HEART / FAVORITE BUTTON
   ========================================================= */

div.heart {
  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;
}


/* =========================================================
   OVERLAY COMPATIBILITY
   ========================================================= */

/*
   The original MSPFA themes used #overlay and
   .overlay-1 through .overlay-4.

   The Neocities versions of the themes mostly create
   their decorative effects using body::before and
   body::after, but these rules remain here so that
   actual overlay elements can still work if needed.
*/


#overlay,
#overlay > div,
.overlay-1,
.overlay-2,
.overlay-3,
.overlay-4 {
  pointer-events: none;

  user-select: none;
}


/* =========================================================
   OVERLAY POSITIONING
   ========================================================= */

#overlay {
  position: fixed;

  inset: 0;

  pointer-events: none;

  user-select: none;
}

.overlay-1,
.overlay-2 {
  position: fixed;

  pointer-events: none;

  user-select: none;
}

.overlay-3 {
  position: fixed;

  pointer-events: none;

  user-select: none;
}

.overlay-4 {
  position: fixed;

  pointer-events: none;

  user-select: none;
}


/* =========================================================
   THEME DECORATION SAFETY
   ========================================================= */

/*
   Theme pseudo-elements should never block clicks.
*/

body::before,
body::after {
  pointer-events: none;
}


/* =========================================================
   IMAGE SAFETY
   ========================================================= */

img {
  max-width: 100%;

  height: auto;
}


/* =========================================================
   FORM ELEMENT SAFETY
   ========================================================= */

input,
textarea,
select,
button {
  box-sizing: border-box;
}


/* =========================================================
   THEME HOOK
   ========================================================= */

/*
   Individual theme files are loaded AFTER this stylesheet
   by index.html:

       glittervoid.css
       intermission.css
       mindfang.css
       meteor.css
       snowbubble.css

   Therefore the individual themes can override:

       body
       .main
       .pageFrame
       .pageContent
       #content
       #links
       .spoiler
       navigation
       logos
       etc.

   without needing !important everywhere.
*/


/* =========================================================
   RESPONSIVE SAFETY
   ========================================================= */

/*
   Your original viewer is designed around a 950px-wide
   MSPFA layout. This prevents it from causing unwanted
   horizontal overflow on smaller screens.

   The desktop 950px layout remains unchanged.
*/

@media (max-width: 950px) {

  .navList {
    width: 100%;
  }

  .pageFrame {
    width: 100%;
  }

  .pageContent {
    width: 650px;
    max-width: 100%;
  }

}


/* =========================================================
   SMALL SCREEN STORY IMAGE SAFETY
   ========================================================= */

@media (max-width: 700px) {

  #content img {
    max-width: 100%;

    height: auto;

    margin-left: -25px;
    margin-right: -25px;
  }

}


/* =========================================================
   END MSPFA NEOCITIES BASE
   ========================================================= */