@import url("https://fonts.googleapis.com/css2?family=Kameron:wght@700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");


@media screen and (max-width:900px){
  body #introtext {
    font-size: 7px;
  }

  body #startepisode {
    font-size:10px;
  }
  body .tv__controls {
    margin:auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  body .chatbubble{
    font-size: 7px;
  }

  body {
    height:fit-content;
  }

  body .tv__screen__h1 {
    font-size: 30px;
  }

  body .tvbutton {
    height:20px;
  }

  body .character {
    width: 50%;
  }
}

.background-music{
  opacity:0;
  position: absolute;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #e6e6d8;
  font-family: "Kameron", serif;
}

p {
    line-height: 2;
    letter-spacing: 0.2em;
    margin: 30px;
    font-weight: 100;
}

.instructionstxt {
  font-size:9px;
  margin:10px;
  padding:10;
  align-self: center;
  word-spacing:0pt;
  text-align: center;
}
.episodeintro{
  height:90%;
  width:88%;
  display:flex;
  flex-direction: column;
  white-space: pre-wrap;; /* Preserve spaces and line breaks */
  word-wrap: break-word; /* Break long words to fit within the container */

  
}

ol li {
    line-height: 2;
    letter-spacing: 0.2em;
    margin: 30px;
    font-weight: 100;
}

.character {
    z-index: 2;
}

.chatbubble {
  border-color:black;
  border-style:solid;
  border-width:5px;
  background-color: white;
  border-radius: 10px;
  width:80%;
  height:200px;
  margin:auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color:black;
  margin-top:50px;
  text-align:center;
  align-items:center;
}

.sparkle{
  height:10px;
  width:10px;
  margin:auto;
  opacity: 0%;
  position:absolute;
  
}

.tv {
  width: 70%;
margin-top:30px;  height: 800px;
  background: #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  border-radius: 1px;
}
  .tv__screen {
    width: 70%;
    height: 640px;
    border: 8px solid #000;
    border-radius: 8px;
    background: #0f0a1e;
    color: white;
    box-shadow: 0px 0px 1px 12px #888;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Press Start 2P", cursive;
  }
  .tv__screen-wrapper {
    width: 70%;
    height: 640px;
    background: #0f0a1e;
    display: flex;
    justify-content: center;
    align-items: center;
  animation: turnOff 0s forwards; 
}
.darkenbackground{
  width:49.5%;
  height: 640px;
  z-index:0;
  background-color: rgb(0,0,0,.3);
  position: absolute;
}
.magicalforest{
  background-image: url(magicalforest.jpg.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width:49.5%;

}
.cave{
  background-image: url(cave.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width:49.5%;

}
.stream{
  background-image: url(stream.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width:49.5%;
  height:655px;
  border-radius: 10px;
}
.path{
  background-image: url(path.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width:49.5%;

}
.lair{
  background-image: url(dragonlair.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width:49.5%;
}
.rainbow{
  background-image: url(rainbow.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width:49.5%;

}
  .tv__screen__h1 {
    --stroke-orange: rgb(242 160 77);
    --stroke-dark-orange: rgb(196 90 64);
    --stroke-white: white;
    --stroke-width: 5px;
    margin: 0;
    margin-bottom: 1rem;
    font-size: 3em;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-align: center;
    color: rgb(251 227 102);
    text-shadow: var(--stroke-width) var(--stroke-width) 0 var(--stroke-orange),
      calc(var(--stroke-width) * 2) calc(var(--stroke-width) * 2) 0
        var(--stroke-dark-orange),
      0 0 0 black, 0 calc(var(--stroke-width) * -1) 0 var(--stroke-white);
  }

  .tv__screen__h4 {
    animation: blinker 2s linear infinite;
  }

  .tv__details {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .tv__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .tv__brand {
    font-size: 24px;
    margin-top: 20px;
  }

  .tvbutton {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    background: #999;
    border-width:3px;
    color:white;
    font-family: "Press Start 2P", cursive;
    text-transform: uppercase;
    font-size: 8px;
  }

  .greenstart {
    border-color:darkgreen;
    background-color: green;
  }

  .bluestart {
    border-color:darkblue;
    background-color:royalblue;
  }

  .redstart {
    border-color:darkred;
    background-color:crimson;
  }

  .yellowstart {
    border-color:darkgoldenrod;
    background-color:goldenrod;
  }

  .instructions {
    display: flex;
    flex-direction:row;
    padding:4px;
    position: absolute;
    justify-content: space-between;
    align-items:flex-end;
    align-content: flex-end;
   margin-bottom: -10px;
    width:30%;
    height:640px;
  }

  .startpopup {
    width: 40%;
    height: 100px;
    border-radius: 10px;
    background: #999;
    border-width:3px;
    color:white;
    font-family: "Press Start 2P", cursive;
    text-transform:capitalize;
    font-size: 12px;
    position:absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }

  .downarrow {
    height:20px;
    width:20px;
    margin-top:-7px;
    animation: blinker 2s linear infinite;
  }

  .tv__audio {
    height: 120px;
    width: 220px;
    position: relative;
    top: 20px;
    border-radius: 2px;
    background-color: #555;
    background-image: linear-gradient(
        45deg,
        #666 25%,
        transparent 25% 75%,
        #666 75%
      ),
      linear-gradient(-45deg, #666 25%, transparent 25% 75%, #666 75%);
    background-size: 5px 5px;
  }
.spacer{
    height:225px;
}

.minispacer {
    height:60px;
}

#sitemap {
    width: 80%;
    background-color: rgb(225,225,225);
    border-radius: 5px;
}
/*Episode elements*/
#startepisode {
  width: 70%;
  height: 50px;
  letter-spacing: 1px;
  border-radius: 10px;
  background: #999;
  border-width:3px;
  color:white;
  font-family: "Press Start 2P", cursive;
  text-transform:capitalize;
  font-size: 12px;
  margin:auto;
  margin-bottom:30px;
  max-width: 200px;
}
/*animations */
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes turnOff {
  0% {
      transform: scale(1, 1);
      opacity: 1;
  }
  50% {
      transform: scale(1, 0.1);
      opacity: 1;
  }
  100% {
      transform: scale(0, 0);
      opacity: 0;
  }

}
@keyframes turnOn {
  0% {
    transform: scale(0, 0);
    opacity: 0;
  }
  50% {
      transform: scale(1, 0.1);
      opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }

}
@keyframes sparkle{
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(10, 10);
    opacity: 1;
}
100% {
    transform: scale(0, 0);
    opacity: 0;
}
}

@keyframes startpopup{
  0%
  {transform: scale(0, 0);
    opacity: 0;}
  100%
  {transform: scale(1, 1);
    opacity: 1;}
}

@keyframes slidein{
  0%
  {transform: translateX(-100%);
    opacity: 0;}
  100%
  {transform: translateX(10%);
    opacity: 1;}
}

/*Part of the animation to turn the tv off/on*/
.turnOffAnimation {
  animation: turnOff .75s forwards;
}
.turnOnAnimation {
  animation: turnOn .25s forwards;
}
.sparkleanimation {
  animation: sparkle .6s;
  animation-delay: .43s; /* Start after the TV turn off animation */
}
.startpopupanimation {
  animation: startpopup .1s forwards;
  animation-delay: 1s;
}
.slideinAnimation {
  animation: slidein .3s;
  animation-delay:12.3s;
  animation-iteration-count:1;
  animation-fill-mode: forwards; 
}
.fadeInFastAnimation {
  animation: fadeIn .1s;
  animation-delay:12.6s;
  animation-iteration-count:1;
  animation-fill-mode: forwards; 

}
/* screen transisitons */
@keyframes fadeIn{
  0%
  {
    opacity: 0;}
  100%
  {
    opacity: 1;}
}

.fadeInAnimation {
  animation:fadeIn 4s;
}

@keyframes fadeOut{
  0%
  {
    opacity: 1;}
  100%
  {
    opacity: 0;}
}

.fadeOutAnimation {
  animation:fadeOut 3s;
}

.longFadeInAnimation{
  animation:fadeIn 13s;

}