@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");

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;
}

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

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

.tv {
  width: 900px;
  height: 800px;
  background: #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  border-radius: 1px;
}
  .tv__screen {
    width: 850px;
    height: 650px;
    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: 850px;
    height: 650px;
    background: #0f0a1e;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: turnOff 0s forwards;
}
  .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:350px;
    height:640px;
  }

  .startpopup {
    width: 400px;
    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;
}
/*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;}
}

/*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;
}