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

/* MAIN PAGE */
.mainpage {
  display: grid;
  width: 1480px;
  max-width: 95%;
  margin: auto;
}

.mainpage a {
  color:#fa950a;
  text-decoration: none;
}
.mainpage a:hover {
  color: #ffffff;
}
/* MAIN PAGE HEADER*/
header1 {
  text-align: center;
  font-family: "Doto";
  font-size: 30px;
  color: #fa950a;
  background-image: url("../img/main/eteroutsider_board2.webp");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  padding: 5rem 0rem 5rem 0rem;
  margin: -13px;
}
header1 p {
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  gap: 0.5rem;
  background-color: black;
  margin-inline: min(20vw, 20rem);
  padding: 0rem 0rem 1rem 0rem;
  overflow-y: auto;
  max-height: 8rem;
}
@media only screen and (max-width: 600px) {
  header1 p {
    margin: auto;
    padding: 1rem 0rem 2rem 0rem;
    overflow-y: auto;
    max-height: 10rem;
  }
}

/* MAIN PAGE MIDDLE*/
article1 {
  height: 1150px;
}

@media only screen and (max-width: 600px) {
  article1 {
    height: 1000px;
  }
}

/* MAIN PAGE FOOTER*/
footer1 {
  color: #ffffff;
  margin-top: 12px;
  margin-bottom: 15px;
  font-family: "Montserrat";
  float: left;
  width: 100%;
  font-size: 12px;
  text-align: center;
}
.socmedlinks {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.socmedlinks a {
  fill: #5e5e5e;
}
.socmedlinks a:hover {
  fill: #ffffff;
}
footer1 textarea {
  width: 88px;
  height: 31px;
  font-size: small;
}

/* ABOUT AUTHOR PAGE */

/* WINDOWS */
#all-windows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999999;
  pointer-events: none;
  height: 100%;
}
#all-windows > div {
  pointer-events: all;
}
#all-windows > div {
  display: none;
}
.window {
  display: block;
  background: #b9b9b9;
  margin: 0.5rem;
  margin-top: -5rem;
  z-index: 1;
  position: relative;
  width: 20rem;
  height: 21rem;
}
.windows-box-shadow, .window-content > label {
  box-shadow: -2px -2px #e0dede, -2px 0 #e0dede, 0 -2px #e0dede, -4px -4px white, -4px 0 white, 0 -4px white, 2px 2px #818181, 0 2px #818181, 2px 0 #818181,  2px -2px #e0dede, -2px 2px #818181, -4px 2px white, -4px 4px black, 4px 4px black, 4px 0 black, 0 4px black, 2px -4px white, 4px -4px black;
}
inverse-windows-box-shadow, .window-content > label:active {
  box-shadow: -2px -2px #818181, -2px 0 #818181, 0 -2px #818181, -4px -4px black, -4px 0 black, 0 -4px black, 2px 2px #e0dede, 0 2px #e0dede, 2px 0 #e0dede,  2px -2px #818181, -2px 2px #e0dede, -4px 2px black, -4px 4px white, 4px 4px white, 4px 0 white, 0 4px white, 2px -4px black, 4px -4px white;
}
.window.about {
  display: block;
  width: 40%;
  min-width: 40%;
  height: 30rem;
  min-height: 20rem;
  margin: auto;
  margin-top: 8rem;
}
@media only screen and (max-width: 600px){
  .window.about {
   width: 80%;
   margin-top: 2rem;
  }
}
.window-content {
  padding: 0.5rem;
}
.header {
  background: #000b7c;
  color: white;
  padding: 0.25rem;
}
.options {
  display: flex;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.options:before, #items:before {
  content: '';
  width: 2px;
  height: calc(100% - 1rem);
  position: absolute;
  background: #f2f2f2;
  box-shadow: 1px 1px 0 #818181;
  left: 0.5rem;
  top: 0.5rem;
}
#items:before {
  top: 0;
  height: calc(100% - 2px);
}
.options > div {
  padding: 0 1rem 0 0;
  opacity: 0.5;
}
.options.padding {
  padding: 0.75rem 0.5rem 0.5rem 1.25rem;
}
.options.padding > input {
  width: 100%;
  padding: 0.25rem;
  box-sizing: border-box;
}
.options .item.float-right {
  position: absolute;
  top: 0;
  right: -1rem;
  opacity: 1;
}
.header-buttons {
  position: absolute;
  display: flex;
  top: 0.3rem;
  z-index: 999999999;
  right: 0.3rem;
  cursor: pointer;
}
.header-buttons > label {
  background: #c0c0c0;
  width: 1rem;
  height: 1rem;
  font-family: "Arial Black", sans-serif;
  box-sizing: border-box;
  font-size: 0.75rem;
  position: relative;
  color: black;
  line-height: 1rem;
  margin: 0 0 0 0.55rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}
.header-buttons > label.maximize:after,
.header-buttons > label.maximize:before {
  content: '';
  width: 0.3rem;
  border: 2px solid black;
  border-top: 3px solid black;
  background: #c0c0c0;
  height: 0.25rem;
  top: 5px;
  position: absolute;
  left: 1px;
  z-index: 2;
}
.header-buttons > label.maximize:before {
  top: 1px;
  left: 5px;
  z-index: 1;
  width: 0.3rem;
}
.header-buttons > label.minimize:before {
  content: '';
  background: black;
  width: 7px;
  position: relative;
  top: 3px;
  height: 3px;
}
.header-buttons > label:active {
  box-shadow: -2px -2px #818181, -2px 0 #818181, 0 -2px #818181, -4px -4px black, -4px 0 black, 0 -4px black, 2px 2px #e0dede, 0 2px #e0dede, 2px 0 #e0dede,  2px -2px #818181, -2px 2px #e0dede, -4px 2px black, -4px 4px white, 4px 4px white, 4px 0 white, 0 4px white, 2px -4px black, 4px -4px white;
}
.window p {
  width: 100%;
  position: relative;
  padding: 1rem;
  box-sizing: border-box;
  top: 2px;
  height: 100%;
  border: none;
  appearance: none;
}
.window-content {
  background: #ffffff;
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  margin-top: 2px;
  overflow-y: scroll;
  max-height: 86.7%;
  min-height: 86.7%;
}
/* START BAR */
#start-bar {
  background: #c0c0c0;
  height: 3.2rem;
  position: absolute;
  bottom: -1;
  width: 100%;
  display: flex;
  padding: 0.5rem;
  z-index: 999999999;
  justify-content: space-between;
  box-shadow: 0 -2px #fffdfc, 0 -4px #cce9eb;
}
#start-button-input:checked ~ #start-bar > #start-menu {
  display: block;
}
#start-button {
min-width: 104px;
background-image: url("../img/about/startbutton.webp");
width: 6.5rem;
background-size: auto 80%;
background-repeat: no-repeat;
background-position: 0.25rem;
cursor: pointer;
height: 2.25rem;
}
#time-options {
  box-shadow: 0 2px white, 0 -2px #7d7d7d, -2px -2px #7d7d7d, 2px 2px white, -2px 2px #7d7d7d, 2px -2px white;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#start-button:active {    
  box-shadow: -2px -2px #818181, -2px 0 #818181, 0 -2px #818181, -4px -4px black, -4px 0 black, 0 -4px black, 2px 2px #e0dede, 0 2px #e0dede, 2px 0 #e0dede,  2px -2px #818181, -2px 2px #e0dede, -4px 2px black, -4px 4px white, 4px 4px white, 4px 0 white, 0 4px white, 2px -4px black, 4px -4px white;
}
label {
  display: block;
}
[type="checkbox"], [type="radio"] {
  display: none;
}

#start-button-input:checked ~ #start-menu {
  display: block;
}
#items {
  margin: 0 0 0 1rem;
  padding: 0 0 0 2rem;
  display: flex;
  overflow: hidden;
  padding: 4px 0 0 2rem;
  position: relative;
  position: relative;
  top: -3px;
  height: calc(100% + -1px);
}
/* START MENU */
#start-menu {
  bottom: 3.5rem;
  position: absolute;
  background: #c0c0c0;
  left: 0.25rem;
  width: 24rem;
  min-height: 24rem;
  display: none;
  z-index: 999999999;
}
#start-button-input:checked ~ #start-bar > #start-menu {
  display: block;
}
#start-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#start-menu ul li label {
  height: 4rem;
  float: left;
  cursor: pointer;
  padding: 0 0.5rem 0 0.5rem;
  margin: 0 2.5rem;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  width: calc(100% - 3rem);
}

#start-menu > ul > li label:before {
  width: 10px;
  background: black;
  content: '';
  height: 0.5px;
  position: absolute;
  bottom: 20px;
  left: 3rem;
}
#start-menu > ul > li label:first-of-type:before {
  width: 14px;
  margin-left: 0.5rem;
}

#start-menu > ul > li label:hover:before {
  background: white;
}
#start-menu ul li.line label {
  box-shadow: 0 2px #808280, 0 4px white;
}
.line {
  box-shadow: 0 2px #808280, 0 4px white;
}
#start-menu ul li img {
  width: 2rem;
  height: auto;
  margin: 0 1rem 0 0;
}
#start-menu ul li label:hover {
  background: #0c1b98;
  color: white;
  box-shadow: -8px 0 #0c1b98, 8px 0 #0c1b98;
}

#windows-start-menu-blue {
  color: white;
  font-weight: 900;
  position: absolute;
  transform: rotateZ(-90deg);
  width: 24rem;
  font-size: 1.25rem;
  font-family: "Arial Black", sans-serif;
  background: #84878C;
  left: 0;
  transform-origin: 0 0;
  top: 24rem;
  box-sizing: border-box;
  padding: 0.125rem 0.75rem;
}
#windows-start-menu-blue span {
  font-weight: 100;
  font-family: "Arial", sans-serif;
}

/* RAREBIT WEBCOMIC CODE */
body, div, main, section, article {
  box-sizing: border-box; 
}

/* universal background color */
body {
  background-color: #000000;
  color: #ffffff;
}

/* header image */
header img {
  width: 500px;
  max-width: 98%;
  margin: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*FONTS*/

/* header font */
#showComic, header, h1, h2, h3, h4, h5 {
  font-family: 'Sofia Sans Condensed';
  margin: 0.2rem;
}

/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'Montserrat';
}

/* STYLING FOR SUBPAGES (about, characters, etc) */

/*general*/

.subPage {
  width: 1000px;
  max-width: 98%;
  background-color: #000000;
  color: #000000;
  margin: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 5px 12px 0px 12px;
}
.subPage:not(.archivePage) {
  text-align: center;
}
.subPage span {
  background-image: url("../img/comic/paper.webp");
}
.subPage h1, h2, h3 {
  margin-top: 1.7rem;
}

/* for pictures displayed to the left */
.leftPic {
  clear: left;
  float: right;
  margin-left: 20px;
}

/* for pictures displayed to the right */
.rightPic {
  clear: right;
  float:left;
  margin-left: min(8vw, 120px);
}

@media only screen and (max-width: 600px) {
  .rightPic {
  clear: right;
  float:left;
  margin: auto;
  padding: 4rem;
  }
}

/* specific to Characters */
.charTable, .charTable td { 
  width: 100%;
  text-align: left;
}
@media only screen and (max-width: 600px) {
  .charTable, .charTable td {
  text-align: center;
}
  }

/* link colors */
a {
      color: #ffffff;
      text-decoration: none;
    }

a:hover {
      color: #fd6423;
    }

/* HEADER */
header #nav {
  background-color: #000000;
  color: #ffffff;
  font-size: 30px;
  width: 98%;
  margin: auto;
  text-align: center;
}

/* COMIC HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
}
.comicNav img {
  width: 80px;
  max-width: 98%;
  padding-right: 30px;
}

/* style comic page image */
.comicPage img {
  width: 900px;
  max-width: 98%;
}

/* style author notes */
#authorNotes {
  background-color:#ffffff;
  color: #000000;
  margin: auto;
  padding: 3px;
  width: 900px;
  max-width: 98%;
  background-image: url("../img/comic/paper.webp");
}
#authorNotes a {
  color: #fd6423;
}
#authorNotes a:hover {
  color: #000000;
}
/* FOOTER */
footer {
  color: #ffffff;
  margin-top: 12px;
  margin-bottom: 15px;
  float: left;
  width: 100%;
  font-size: 12px;
  text-align: center;
}

footer p {
  margin: auto;
}

footer a
 {
  color: #ffffff;
}

footer a:hover {
  color: #fd6423;
}
footer textarea {
  width: 88px;
  height: 31px;
  font-size: small;
}
footer p, h1, h2, h3 {
  margin: auto;
  padding: 0.2rem;
}
/* take away margins from the edges of the screen */
html, body {
  margin: 0;
}