body{
  margin: 1%;
  padding: 0;
  background:rgb(2, 22, 41);
  font-family: 'Roboto Slab', serif;
  height: 100vh;
}
h2{
  font-family: 'Montserrat', sans-serif;
}
/* fixed tv logo */
.tv-fixed{
  position: fixed;
  top:.9em;
  right: .25em;
  width: 8em;
  height: auto;
}
/* logo and search div */
.logoAndSearch{
  margin-top: 5.5em;
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  gap:1.5em; 
  align-items:center;
}
/* left img */
.img-div{
  margin-top: -10px;
  height: 140px;
  width: 300px;
  object-fit: contain;
}
/* marquee */
marquee{
  color:aqua;
  margin-top: 1%;
  font-size: larger;
}
.shows-episodes{
  display: grid;
  grid-template-columns: 1fr 1fr ;
}
/* root div where everything appended */
#root div{
  margin: 15% 3% 3% 3%;
  box-shadow: 0 0 6px rgb(5, 218, 255);
  background:linear-gradient(35deg, rgb(10, 18, 29), 55%, rgb(7, 36, 69));
}

#root{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-gap: 2px;
  color: rgb(231, 199, 16);
  text-align: center;
  padding: 5px 10px;
}
.image{
  height: 225px;
  width: 275px;
  object-fit: contain;
  margin-top: 0;
}
.season-details{
  margin-top: .2em;
  margin-left: 2%;
  color: rgb(236, 197, 0);
}
.Eps-details{
  padding: 0 10px;
  text-align: start;
  margin-left: 10%;
  color: rgb(27, 226, 183);
}
#search{
  margin-top: 5%;
  border-radius: 4px;
  padding: 2px 5px;
  outline: none;
  border: none;
  height: 35px;
  width: 85%;
  font-size: large;
}
#search:focus{
  width: 99%;
  transition: .45s ease-out;
  background-color: rgb(247, 207, 133);
}
#search-count{
  margin-left: 1%;
  color: white;
}
#selectEpisode{
  margin-left: 1%;
  margin-top: 2%;
  border-radius: 4px;
  padding: 2px 5px;
  outline: none;
  border: none;
  height: 35px;
  font-size: medium;
  background-color: rgb(206, 188, 224);
  width: 40%;
}
#selectShows{
  margin-left: 1%;
  margin-top: 2%;
  border-radius: 4px;
  padding: 2px 5px;
  outline: none;
  border: none;
  height: 35px;
  font-size: medium;
  background-color: rgb(206, 188, 224);;
}
label{
  font-weight: bold;
  color:rgb(255, 94, 0);
  font-size: medium;
}
/* level 500 - pages for all tv shows */
#root2{
  display: grid;
  color:azure;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:1fr;
  text-align: center;
}

.showInnerFlex{
  display: flex;
  flex-direction: column;
  align-items:flex-start;
}
footer{
  color:rgb(205, 110, 2);
  text-align: center;
  font-weight: bold;
  padding: .75em;
}
/* mobile and other device layout handled */
@media only screen and (max-width: 890px) {
  body{
    font-size: 87%;
  }
  .logoAndSearch{
  display: flex;
  flex-direction: column;
  }
  .img-2{
    display: none;
  }
  #root{
  display: grid;
  grid-template-columns: 1fr ;
  grid-auto-flow: row;
  }
  .Eps-details{
  text-align: center;
  margin-left: 5%;
}

.shows-episodes{
  display: grid;
  grid-template-columns: 1fr;
  gap:.75em;
}
#select{
  margin-left: 1%;
  margin-top: 2%;
  border-radius: 4px;
  padding: 2px 5px;
  outline: none;
  border: none;
  height: 35px;
  width: 50%;
  font-size: small;
  background-color: rgb(206, 188, 224);
}
.img-div img{
  display: none;
}
/* mobile and other device layout handled */
#root2{
  display: grid;
  grid-template-columns: 1fr;
  margin: 4px;
}
}