/* Color Palette */
:root {
  --dk-color: #12175e;
  --mid-color: #cc00cc;
  --lt-color: #f7f5f1;
  --dkest-color: #010211;
  --accent: #0051ff;
  --shadow: #15ff0081;
}

/*FONTS*/

@font-face {
  font-family: "Knewave";
  src: url(/fonts/Knewave-Regular.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Comic Relief";
  src: url(/fonts/ComicRelief-Regular.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Pixel";
  src: url(/fonts/ARCADECLASSIC.TTF);
  font-display: swap;
}


/* TEXT STYLING */
a {
  color: var(--dkest-color);
  font-weight: 700;
  text-decoration: none;
}
a:hover {
  color: var(--accent);
  text-decoration: none;
}
hr {
  height: 2px;
  background-color: var(--dk-color);
  border: none;
}

li {
  line-height: 20px; 
}

br {
  display: block;
  margin: 5px
}

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Section Styling */

.section-title {
  display: inline-block;
  margin: 1px 1px 5px 5px;
  color: var(--dk-color);
  font-size: 1em;
  font-weight: 700;
  font-family: "Comic Relief";
  filter: drop-shadow(2px 0 0 rgb(255, 255, 255)) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white);
}

.section-title-right {
  display: inline-block;
  writing-mode: vertical-lr;
  padding-top: 20px;
  min-width: 30px;
  max-width: 30px;
  margin: 1px 1px 5px 5px;
  color: var(--dk-color);
  font-size: 1em;
  font-weight: 700;
  font-family: "Comic Relief";
  filter: drop-shadow(2px 0 0 rgb(255, 255, 255)) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white);
}

.section-title-left {
  display: inline-block;
  writing-mode: vertical-rl;
  padding-top: 20px;
  min-width: 30px;
  max-width: 30px;
  margin: 1px 1px 5px 5px;
  color: var(--dk-color);
  font-size: 1em;
  font-weight: 700;
  font-family: "Comic Relief";
  filter: drop-shadow(2px 0 0 rgb(255, 255, 255)) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white);
}

.section-buttons {
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-bottom: 2px solid var(--dk-color);
  border-right: 2px solid var(--dk-color);
  color: var(--dk-color);
  padding: 2px;
  line-height: 8px;
  display: inline-block;
  height: 20px;
  width: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.section-buttons-display {
	float: right;
  margin-right: 5px;
  overflow: hidden;
}
.sub-section {
  font-size: 1em;
  color: var(--dkest-color);
  padding: 1px;
  background-color: var(--mid-color);
  background-clip: padding-box;
  border-bottom: 2px solid var(--dk-color);
}


.section-heading {
  font-family: "Comic Relief"; 
  font-size: 1em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: var(--dk-color);
  border-radius: 5px;
  padding: 2px;
  margin: 0;
}
.section-sub-heading {
  text-align: center;
  background-color: var(--mid-color);
  border-radius: 5px;
  padding: 2px;
  margin: 10px 0;
}

.section-tab {
  text-align: left;
  border-top: 2px solid #ff00ff;
  border-left: 2px solid #00FFFF;
  padding: 1px;
  background-color: var(--mid-color);
  overflow: hidden;
  text-align: center;
}

.rpg-tab {
  text-align: left;
  background: linear-gradient(to left, #1d27adb4, transparent);
  overflow: hidden;
  
  font-size: 1.1em;
}

/* GENERAL */

* {
  box-sizing: border-box; 
}

/* Background of Pages*/
#index-wallpaper {
  background-image: url(/img/background.png), url("/img/BlurryBox.png");
}

#writing-wallpaper {
  background-image: linear-gradient(to bottom, #000000, #00000000), url(/img/background.gif);
}

.index-body {
  max-width: 65%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  display: block;
  font-size: 1.1em;
  color: var(--dkest-color);
  font-family: "Comic Relief";
}

.about-body {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.1em;
  color: white;
  font-family: "Comic Relief";
}


.about-body a{
  color: white;
}

.about-body a:hover{
  color: rgb(0, 0, 0);
}

.container {
  border: 3px ridge var(--dk-color);
  border-radius: 30px;
  background-color: var(--lt-color);
  box-shadow: -3px 5px #00FFFF7e, -5px 3px #FF00FF7e, -5px 5px #ffff007e;
  padding: 10px;
}

.box-style {
  border: 3px ridge var(--dk-color);
  overflow: hidden;
  border-radius:30px;
  box-shadow: -2px 0px 0 #ff0000, -3px  0px 0 #bbff00, 2px 0px 0 #1100ff, 3px 0px 0 #00e1ff;;
  background-color: var(--lt-color);
}

.dark-style {
  border: 3px ridge var(--lt-color);
  overflow: hidden;
  border-radius:15px;
  background: linear-gradient(to top, #1d27adb4, #6b75ffb4);
}

.rpg-style {
  border: 3px ridge var(--lt-color);
  overflow: hidden;
  border-radius:15px;
  background: linear-gradient(to top, #11198bb4, #32399eb4);
  font-family: "Pixel";
  font-size: 1.1em;
  letter-spacing: .05em;
}

/*.box-style {
  border: 3px solid transparent;
  background: linear-gradient(var(--lt-color),var(--lt-color)) padding-box,
              linear-gradient(to right, #00FFFF, #FF00FF) border-box;
  border-radius:30px;
  overflow: hidden;
  box-shadow: 0 1px 1px 1px var(--shadow);
} */

/* IMAGE HOVER EFFECTS */

.rotate-hover, .rotate-hover img, .zoom-hover, .zoom-hover img {
  transition: transform .3s;
}
.rotate-hover:hover, .rotate-hover img:hover {
  transform: rotate(5deg);
}
.zoom-hover:hover, .zoom-hover img:hover {
  transform: scale(1.1);
}

/* HEADER */

#header {
  
  height: auto;  
  border-radius:  0 0 25px 25px;
  background-clip: padding-box;
  background-position: center;
  background-size: cover;
  margin-bottom: 10px;
  background-image: url(/img/noisebanner.gif);
  overflow: hidden;
}

.title {
  font-family: Knewave;
  font-size: 4em;
  text-align: center;
  text-shadow: -3px 0px 0 #ff0000, -6px  0px 0 #bbff00, 3px 0px 0 #1100ff, 6px 0px 0 #00e1ff;
}

/* FOOTER */

#footer {
  border-radius: 25px;
  background: var(--mid-color);
  border: 3px ridge var(--dk-color);
  text-align:center;
  margin-top: 10px;
}

/* MINOR ELEMENTS */

.content {
  padding: 10px;
  overflow: auto;
}

.notice {
  border: 3px dashed var(--dkest-color);
  border-radius: 10px;
  background-color: #fff;
  background-clip: padding-box;
  text-align: center;
  padding: 10px;
  margin: 10px 0 5px;
}

.invis-box {
  border: 3px dashed transparent;
  border-radius: 15px;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
}


/* INDIVIDUAL PAGE Grid Layouts*/


/* Index Page Style*/
#index-grid { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 50px auto auto auto 40px;
  grid-column-gap: 10px;
  grid-row-gap: 10px; 
}

#index-navigation {
  height: 50px;
  grid-area: 1 / 1 / 1 / 6;
}

#index-navigation .content {
  height: auto;
  padding: 0;
}

#index-navigation a {
  text-decoration: none;
}

.navigation-button {
  margin: 0;
  padding: 2px;
  color: var(--dkest-color);
  border-top: 2px solid var(--dk-color);
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 2px solid var(--dk-color);
  font-family: "Comic Relief";
  font-size: 1em;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: .2s;
}
.navigation-button:hover {
  text-shadow: -3px 0px 0 #ff0000, -6px  0px 0 #bbff00, 3px 0px 0 #1100ff, 6px 0px 0 #00e1ff;
}

#index-body { 
  grid-area: 2 / 2 / 2 / 5;
  background-image: url("/img/PaperBack.jpg");
  overflow: hidden;
} 

#index-body img{ 
  max-height: 250px;
  filter:drop-shadow(-2px 5px 0 #ff00ff91);
} 

#right-aside { 
  grid-area: 2 / 5 / 2 / 5;
  overflow: hidden;
} 

#left-aside { 
  grid-area: 2 / 1 / 2 / 1;
  position: relative;
  overflow: hidden;
} 

#index-updates p { 
  margin: 0;
}

#index-updates .content { 
  height: 150px;
}

#index-changelog p { 
  margin: 0;
}
#index-changelog .content { 
  height: 200px;
}
#index-body-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  padding: 15px;
}
#index-body-main { 
  grid-area: 1 / 1 / 2 / 3;
  background-size: 25%, cover;
  text-align: center;
  height: auto;
  padding: 10px;
}

#index-body-footer {
  grid-area: 2 / 1 / 2 / 3;
  text-align: center;
}

#index-button {
  text-align: center;
}
#index-button .content img { 
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0px 1px 1px #FF73BA) drop-shadow(0px 1px 1px #FF73BA);
  margin: 5px;
}

#to-do-list {
  position: absolute;
  bottom:0;
  max-height: 500px;
}

#index-mood {
  grid-area: 3 / 1 / 3 / 4;
}

#index-mood img{
  height: 300px;
  width: auto;
  border: 3px solid;
}

#index-video {
  grid-area: 4 / 3 / 4 / 6;
}

#index-mood img{
  height: 300px;
  width: auto;
  border: 3px solid;
}

/* ABOUT Page Style*/
#about-grid { 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
#about-aside {
  grid-area: 2/ 1 / 3 / 1;
  flex-direction: column;
  display: flex;
  gap: 10px;
}

#about-picture {
  background-image: url(/img/PFPBackdrop.jpg);
  width: 100%;
  height: auto;
  grid-area: 1 / 1 / 1/ 7;
  overflow: hidden;
}

#about-picture img {
  width: 100%;
  vertical-align: bottom;
  height: auto;
}

#about-info {
  grid-area: 2 / 2 / 2 / 5;
  padding: 15px;
  font-size: 1.1em;
  background-image: url("/img/PaperBack.jpg");
  overflow: hidden;
}

#about-extra {
  grid-area: 2 / 2 / 2 / 5;
  padding: 15px;
  height: 491px;
  font-size: 1.1em;
  overflow: scroll;
}

.interest-card {
  width: 400px;
}

.back-button {
  grid-area: 1 / 1 / 1 / 1;
  max-width: 125px;
  font-size: 1.1em;
  text-align: center;
}

/* JOURNAL Page Style */

#directory-grid { 
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}




.Journal-grid { 
  display: block;

}

#journal-body { 
  grid-area: 1 / 1 / 1 / 5;
  background-image: url("/img/PaperBack.jpg");
  overflow: hidden;
} 

#journal-body-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  padding: 15px;
}

#journal-aside {
  grid-area: 1 / 5 / 1 / 6;
  flex-direction: column;
  display: flex;
  gap: 10px;
}

/* style table in which archive is displayed */
.archivePage {
  grid-area: 2 / 1 / 2 / 6;
  background-image: url("/img/PaperBack.jpg");
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  padding: 15px;
}

.archiveTable {
  width: 90%;
  border-collapse:collapse;
}

/* style archive table cells */
.archiveTable td {
  padding: 3px;
  vertical-align: center;
  
}

/* style table cell in which page title is displayed */
.archiveCellTitle:not(.leftAlignTableText) {
  max-width: 300px;
  text-align: center;
}

.archiveCellNum {
  text-align: center;
  min-width: 30px;
}


/* for left aligning the text in a table cell */
.leftAlignTableText td {
  text-align: left;
}

/* highlight a table row and make pointer into hand when moused over */
.archiveRow:hover {
  background-color: #ff00ff;
  color: #ffffff;
  cursor: pointer;
}

.tinawc {
  grid-area: 1 / 1 / 1/ 3;
}

#comic-grid { 
  display: flex;
  flex-direction: column;
  grid-column-gap: 10px;
  grid-row-gap: 10px; 
}


#comic-body { 
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  overflow: hidden;
} 


#comic-body {
  background-image: url("/img/PaperBack.jpg");
  overflow: hidden;
}

#showComic img {
  margin-top: 15px;
  margin-bottom: 15px;
}


.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
}
.comicNav img {
  width: 150px;
  max-width: 98%;
  padding-right: 30px;
  filter:drop-shadow(-3px 5px 1px #ff00ff91);
}

.comicNav img:hover {
  transform:rotate(5deg);
}

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

/* Tabs */
.tab {
  overflow: hidden;
}
.tab button {
  float: left;
  height: 40px;
  border-radius: 10px 10px 0 0;
  background: var(--lt-color);
  font-family: "Comic Relief";
  color: var(--dk-color);
}
.tab button:hover {
  background: var(--mid-color);
  color:var(--lt-color);
}
.tab button.active {
  background: var(--dk-color);
  color: var(--lt-color);
}
.tabcontent {
  display: none;
  border-top: none;
  animation: fadeEffect .25s;
}
.tab-pixel {
  float: left;
  margin-right: 5px;
  height: 20px
}

/* Media Carousel */
.carousel {
  margin: 5px;
  display: flex;
  overflow-x: auto;
}
.carousel::-webkit-scrollbar {
  display: none;
}

.marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 60s infinite linear;
}

.card {
  flex: 0 0 5em;
  height: 225px;
  align-content: center;
}

.card img {
  max-height: 225px;
}

/* ART */
.thumbnail-image {
  width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background-position: center;
  display: block;
  border-radius: 5px;
  background: #fff;
  padding: 7px;
  box-shadow: 0 1px 1px 1px var(--shadow);
  border: 3px solid var(--dkest-color);
  margin: 5px;
}
/* OC Directory */
.directory-box {
  margin: 10px 0;
  width: 100%;
  border: 2px solid var(--dk-color);
  border-radius: 5px;
  background: var(--mid-color);
  box-shadow: 0 1px 1px 1px var(--shadow);
}
.character {
  margin: 10px;
  padding: 10px;
  width: auto;
  background-color: var(--lt-color);
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 1px 1px 1px var(--shadow);
}
.character img {
  height: 110px;
  width: 110px;
  cursor: pointer;
}


/* Alignment */

.flex {
  display: flex;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.space-end {
  justify-content: end;
}
.space-start {
  justify-content: start;
}
.space-evenly {
  justify-content: space-evenly;
}
.space-between {
  justify-content: space-between;
}
.space-around {
  justify-content: space-around;
}
.center {
  justify-content: center;
}
.wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
}

.wide{
  width: 100%;
}
.inline {
  display: inline;
}
.block {
  display:block;
}

/* Scrollbar */   
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dk-color) var(--lt-color);
}
*::-webkit-scrollbar {
  width: 5px;
}
*::-webkit-scrollbar-track {
  background: var(--lt-color);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--dk-color);
  border-radius: 10px;
  border: 1px solid var(--dkest-color);
}
/* Animations */   
@keyframes scroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes fadeEffect {
  0% { transform: translate(1px, 1px) rotate(0deg); opacity: 0; }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); opacity: 1; }
}

@keyframes spin {
  from {translate: 0;}
  to {translate: -100%;}
}