/* font - pìxel operator mono*/
@font-face {
  font-family: 'Pixel Operator Mono';
    src: url('fonts/pixel_operator/PixelOperatorMono-Bold.ttf');

    font-weight: 400;
    font-style: bold;
}

/* General tags, IDs and classes */
/* IDs */
#deltarune{
    font: 2em Pixel Operator Mono;
    background-color: black;
    color: white;
}

#deltarune b{
  color: yellow;
}

#deltarune li{
  cursor: pointer;
  list-style: none;
}

#deltarune li:hover{
  list-style: url("imgs/deltaheart-16px.svg");
}

/* General Classes */
.deltacursor{
  overflow: hidden;
  margin: 0px !important;
  min-height: 100% !important;
  width: 100% !important;

  cursor: url(/shrines/deltarune/assets/imgs/deltaheart.svg), pointer !important;
}

.deltarune-textbox {
  width: 800px;

  border: 30px solid transparent;
  border-image: url(/shrines/deltarune/assets/imgs/deltarune-border.webp) 50 round;
  
  margin: auto;
  background-color: black;
}

.deltarune-backbutton{
  margin: auto;
  border: 30px solid transparent;
  border-image: url(/shrines/deltarune/assets/imgs/deltarune-border.webp) 50 round;
}

.deltacenter{
  width: 50%;
  padding: 0.5em;
  border: 3px white solid;
  margin: auto;
}


/* Deltashrine - Main Page - Kaard Shop */
.kaard-header img{
  width: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.deltablerune{
  width: 900px;
  margin: auto;
  background-color: black;
}

.deltablerune a{
  color: inherit;
  text-decoration: none;
}
.deltablerune h1{
  font-size: 2em;
  line-height: 0.1em;
}
.deltablerune h2{
  font-size: 1.75em;
  line-height: 0.025em;
}

.deltablerune td{
  border: 30px solid transparent;
  border-image: url(imgs/deltarune-border.webp) 50 round;
}

.deltablerune-leftbox{
  margin: auto;
  vertical-align:top;  

}

.deltablerune-rightbox{
  width: 250px;
}


.typewriter {
  display: inline-block;
  white-space: normal;
  overflow: hidden;
}

.shadowguy-toggle{
  position: fixed;
  bottom: 0px;
  right: 0px;
  cursor: pointer;
}

/* Popup container - hidden by default */
#spoilerBox {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
}

/* Popup content box */
.spoilerContent {
  width: 600px;

  border: 30px solid transparent;
  border-image: url(/shrines/deltarune/assets/imgs/deltarune-border.webp) 50 round;

  background-color: black;
  margin: 5% auto;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

.closeBtn {
  font: inherit;
  color: inherit;
  font-size: 16pt;
  margin-top: 10px;
  padding: 8px 16px;
  border: 30px solid transparent;
  border-image: url(/shrines/deltarune/assets/imgs/deltarune-border.webp) 50 round;
  cursor: pointer;
  background-color: black;
}

.closeBtn:hover {
  color: red;
}

.takemeawaypls{
  margin: 1em;
  font-size: 12pt;
  color: inherit;
  text-decoration: none;
}
  

/* Deltashrine - Credits */

.credits{
  background-repeat: repeat;
  background-image: url("imgs/deltarune-bg-battle.gif");
}

.credits a{
  text-decoration: underline !important;
}

.credits a:hover{
  color: yellow !important;
}

.deltarune-backbutton{
  margin: auto;
  width: 150px !important;
  text-align: center;
  background-color: black;
  margin-top: 1em;
}

.deltarune-backbutton a{
  color: red;
}

/* Deltashrine - Choose your hero */
.chooseyourhero{
  margin-top: 0;
  cursor: url("imgs/deltaheart-16px.svg"), auto;
}

.chooseyourhero img{
  image-rendering: pixelated;
  margin-top: -5px;

}

.theheroes{
  margin: auto;
  vertical-align: top;
  width: 800px;
}

.theheroes a{
  cursor: url("imgs/deltaheart-16px.svg"), auto;
}

.theheroes p{
  text-align: center;
}

.theherostarwalker{
  opacity: 10%;
  position: fixed;
  bottom: 0;
  right: 0;
}

.starwalker{
  background-image: url(/shrines/deltarune/assets/imgs/the_original_starwalker_bg.webp);
}

/* Deltashrine - Homes */

.deltashine-home{
  width: 1200px;
  display: grid;
  margin: auto;
}

.deltashine-home-text{
    width: 400px;

    border: 30px solid transparent;
    border-image: url(/shrines/deltarune/assets/imgs/deltarune-border.webp) 50 round;
  
    margin: auto;
    background-color: black;

    grid-row-start: 2;
    margin-top: 50px;
}

.deltashine-home-text strong{
  color: red;
}

.deltashine-home-text a{
  color: inherit;
}


/* Deltashrine - Homes - The Soul */

.thesoul a{
  cursor: url("imgs/deltaheart.svg"), auto;
}

.thesoul{ 
  margin: auto;
  width: 800px;
  height: 800px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.thesoul img{
  margin: 50%;
}

.thesoul img:hover{
  filter:hue-rotate(30deg);
  filter: brightness(2);
}

/* Deltashrine - Homes - Kris */

.kris-home-header{
  height: 200px;
  image-rendering: pixelated;
  margin: auto;

  grid-column: span 2 / span 2;
}

.kris-home-bg{
  width: 800px;
  image-rendering: pixelated;
  align-items: center;

  position: sticky;
  top:3em;

  grid-row-start: 2;
}

.kris-home-sprite{
  position: fixed;
  bottom: 0px;
  left: 1em;

  height: 400px;
  image-rendering: pixelated;
}

.kris-home-bg + .deltashine-home-text >  b{
color: red !important;
}

/* Deltashrine - Homes - Susie */

.susie-home-header{
  margin: auto;

  grid-column: span 2 / span 2;
}

.susie-home-bg{
  width: 800px;
  position: sticky;
  top:2em;
  image-rendering: pixelated;
  align-items: center;
  grid-row-start: 2 1;
}

.susie-home-sprite{
  position: fixed;
  bottom: 0px;
  right: 1em;

  height: 400px;
  image-rendering: pixelated;
}

.susie-home-textbox b{
  color: #FF8EEE !important;
}

/* Deltashrine - Homes - The Door */

.thedoor a{
  cursor: url("imgs/deltaheart.svg"), auto;
}

.thedoor{ 
  margin: auto;
  width: 800px;
  height: 800px;
  
  display: flex;
  align-items: center;
  justify-content: center;

}

.thedoor img{
  image-rendering: pixelated;
}


/* Deltashrine - Homes - Kris */

.ralsei-home-header{
  height: 200px;
  image-rendering: pixelated;
  margin: auto;

  grid-column: span 2 / span 2;
}

.ralsei-home-bg{
  margin: auto;
  width: 800px;
  image-rendering: pixelated;
  align-items: center;

  grid-column: span 2 / span 2;
  grid-row-start: 2;

}

.ralsei-home-sprite-izq{
  position: fixed;
  bottom: 0px;
  left: 1em;

  height: 400px;
  image-rendering: pixelated;
}

.ralsei-home-sprite-der{
  position: fixed;
  bottom: 0px;
  right: 1em;

  height: 400px;
  image-rendering: pixelated;
}

.ralsei-home-textbox{
  width: 600px !important;
  grid-column: span 2 / span 2;
    grid-row-start: 3;

}

.ralsei-home-textbox b{
  color: #44D963 !important;
}

/* THE ORIGINAL             STARWALKER */
.theoriginalstarwalker{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    align-items: center;

}

.theoriginalstarwalker img{
  width: 200px;
  image-rendering: pixelated;
}

.theoriginalstarwalker a{
    margin: auto;
}

.starwalker-text-bottom{
  text-align: right;
  color: yellow;
}

/* Chapter's Review - Home */

.reviews a{
  color: white !important;
  text-decoration: none;
}

.reviews hr{
  border-top: 1px solid gray;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

.chapter-select{
  min-width: 800px;
  max-width: 1600px;

  margin: auto;

  padding: 0.5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 5px;

  align-items: center;
  text-align: center;
}

.active-chapter:hover{
  color: yellow !important;
}

.inactive-chapter{
  color: gray;
  cursor: default;
}

/* Chapter's Review - Review's Page - Chapters */

.chapter-overview {
  width: 1000px;

  margin: auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  
  gap: 20px 100px;

  align-items: top;
}
    
.chapter-header {
    margin: 1em auto;

    grid-column: span 2 / span 2;
}

.chapter-header img{
  width: 600px;
  image-rendering: pixelated;
}

.chapter-quote {
    padding: 20px;
    width: 450px;
    grid-row-start: 3;
}

.chapter-quote img{
  background-color: black;
  border: 3px white solid;
  padding: 10px;
  width: 430px;
  display: flex;
}

.chapter-character {
  
  width: 400px;
  grid-row-start: 3;
}

.chapter-character img{
  width: 125px;
  image-rendering: pixelated;
  margin: auto;
  display: flex;
}

.chapter-minireview {
    padding: 20px;
    grid-column: span 2 / span 2;
    grid-row-start: 2;

    padding-bottom: 1em;
    border-bottom: 3px gray solid;
}

.chapter-ost{
  margin: auto;
  grid-column: span 2 / span 2;
  grid-row-start: 4;
}

.chapter-review {
    padding: 20px;
    grid-column: span 2 / span 2;
    grid-row-start: 5;

    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 3px gray solid;
}

.chapter-review h2{
  text-align: center;
}

.chapter-backbutton{

  width: 500px;
  margin: 1em auto;



  border: 30px solid transparent;
  border-image: url(/shrines/deltarune/assets/imgs/deltarune-border.webp) 50 round;

  text-align: center;
  background-color: black;
  color: green;
}

.chapter-backbutton a{
  color: white;
}

.chapter-backbutton a:hover{
  color: yellow !important;
}

/* Chapter's Review - Review's Page - Ch1 & 2 */

.ch1and2-page{
  background-image: url(../assets/imgs/chapter-select/chapter1-2/CyberFieldBG.webp);
  background-position: center;
  background-repeat: repeat-y;

  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

.ch1and2-page .chapter-overview{
  background-color: black;
}

.ch1and2-page b{
  color: #39C58A !important;
}

/* Chapter's Review - Review's Page - Ch3 */

.ch3-page{
  background-image: url(../assets/imgs/chapter-select/chapter3/TVWorldBG.webp);
  background-position: center;
  background-repeat: repeat-y;

  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size:contain;
}

.ch3-page .chapter-overview{
  background-color: black;
}

.ch3-page b{
  color: #6F79D7 !important;
}

/* Chapter's Review - Review's Page - Ch4 */
.ch4-page .chapter-overview{
  background-color: #001F7E !important;
}

.ch4-page .chapter-header{
  margin: 0;
  padding: 0;
  width: 100%;
}
.ch4-page .chapter-header img{
  margin: 0;
  padding: 0;
  width: 100%;
}


.ch4-page{
  background-image:url(../assets/imgs/chapter-select/chapter4/DarkEyesBG.webp);

  background-position: center;
  background-repeat: repeat-y;

  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

.ch4-page b{
  color: red !important;
}

/* Fav Character's Page */

.favcharacters{
  width: 800px;
  margin: auto;
}

.favcharacters img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.quotes-box-wrap{
  width: 600px;

  margin: 1em auto;

  border: 30px solid transparent;
  border-image: url(/shrines/deltarune/assets/imgs/deltarune-border.webp) 50 round;
}

#quotes-box{
  width: 600px;
  height: 200px;
}

.quotes-box-talk{
  width: 200px;

  margin: auto;

  cursor: pointer;

  text-align: center;

  border: 3px solid white;

  padding: 10px 0px;
}

/* Styles for 1080p screens (2560×1440) */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  html{
    zoom: 125%;
  }
}

/* Styles for 1440p screens (2560×1440) */
@media only screen and (min-width: 2560px) and (max-width: 3839px) {
  html{
    zoom: 150%;
  }
}

/* Styles for 4K screens (3840×2160 and up) */
@media only screen and (min-width: 3840px) {
  html{
    zoom: 200%;
  }
}