/* layout grid */
html {
  scroll-behavior: smooth;
  font-family: "Josefin Sans", sans-serif;
}
body {
  display: grid;
  background: url(https://wallpapertag.com/wallpaper/full/9/b/b/786986-gorgerous-lotr-background-2560x1600-for-iphone-6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  top: 0;
  left: 50px;
}
main {
  margin: 0px 0px 0px 75px;
}
header {
  width: 100%;
  height: 100vh;
  text-align: center;
  color: wheat;
  font-family: "EB Garamond", serif;
  font-size: 2em;
}
header .char1,
header .char5,
header .char17 {
  position: relative;
  font-size: 1.5em;
  top: 0.2em;
}
header .char5,
header .char17 {
  margin-right: -5px;
}
header .char1{
  margin-right: 3px;
}
header .char4,
header .char9,
header .char12,
header .char16 {
  margin-right: 5px;
}
footer {
  height: 10vw;
  background: #300;
  margin: 0px 0px 0px 75px;
}
/* /layout grid */


/* Aside */
#aside {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  background: #600;
  display: grid;
  grid-template-rows: repeat(5, 20vh);
  padding: 0px 0px;
  width: 75px;
}
#aside a {
  color: wheat;
  font-size: 1.2em;
  text-decoration: none;
  justify-self: center;
  align-self: center;
  display: inline-block;
  writing-mode: vertical-lr;
}
.asideTabs {
  z-index: -1;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  display: grid;
  grid-template-rows: repeat(5, 20vh);
  padding: 0px 0px;
  width: 75px;
}
.fade {
  width: 75px;
  height: 100%;
  background: #200;
}
/* /Aside */



/* video */
.mejs__currenttime, 
.mejs__duration {
  font-size: 16px;
}
.mejs__overlay, .mejs__layer{
  height: 90vh !important;
  width: 100% !important;
}
.mejs__mediaelementplayer, .mejs__container, video{
  height: 90vh !important;
  width: 100% !important;
}
.mejs__time-rail{
  width: 80%
}
#trailer{
  max-width: 100%;
  max-height: 100vh;
}
/* /video */



/* synopsis */
#synopsis{
  display: grid;
  grid-template-columns: 30% 70%;
  grid-gap: 30px;
  background: #400;
  padding: 100px;
}
.poster{
  background: url(https://m.media-amazon.com/images/M/MV5BN2EyZjM3NzUtNWUzMi00MTgxLWI0NTctMzY4M2VlOTdjZWRiXkEyXkFqcGdeQXVyNDUzOTQ5MjY@._V1_.jpg) 50% 50%;
  background-size: cover;
  height: 400px;
  width: 275px;
  justify-self: right;
}
.summary{
  justify-self: left
}
#synopsis .char1,
#synopsis .char5,
#synopsis .char23 {
  position: relative;
  font-size: 1.5em;
  top: 0.2em;
}
#synopsis .char5 {
margin-right: 2px;
}
#synopsis .char23 {
  margin-right: -3px;
}
#synopsis .char1{
  margin-right: 3px;
}
#synopsis .char4,
#synopsis .char15,
#synopsis .char18,
#synopsis .char22 {
  margin-right: 5px;
}
#synopsis h1 {
  text-align: center;
  color: wheat;
  font-family: "EB Garamond", serif;
}
#synopsis p {
  max-width: 600px;
  margin: 0 auto;
  color: wheat;
  line-height: 1.5em;
}
.tag {
  text-align: right;
  padding-top: 10px;
}
/* /synopsis */



/* castInfo */
#castInfo {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 10% 90%;
  background: #400;
  margin-bottom: 0;
}
#castInfo h1 {
  grid-column: 1 / span 2;
  text-align: center;
  color: wheat;
  font-family: "EB Garamond", serif;
}
.cast {
  padding: 25px;
  color: lightgray;
  text-align: right;
}
.cast h3,
.cast h5 {
  margin: 5px 0px;
}
.castcolor2 {
  color: wheat;
}
.frodo,
.gandalf,
.bilbo,
.aragorn {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  margin: 10px 0px;
}
.castBio {
  overflow: hidden;
  color: wheat;
  max-width: 600px;
  height: 90vh;
  padding: 25px;
}
.castBio div {
  background-size: cover;
  height: 500px;
  max-width: 500px;
  max-height: 50vh
}
.castBio h2 {
  margin-bottom: 5px;
}
.castBio h4 {
  margin-top: 0px;
}
.castBio p {
  line-height: 1.5em;
}
.castBio a {
  color: #f5de50;
  text-decoration: none;
}
.ianImg {
  background: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/11/27/10/gandalf-ian-mckellen.jpg)
    no-repeat 50% 50%;
}
.eliImg {
  background: url(https://www.syfy.com/sites/syfy/files/styles/1200x680/public/wire/legacy/images/frodoandtheonering.jpg)
    no-repeat 50% 50%;
}
.viggoImg {
  background: url(https://assets1.ignimgs.com/2018/06/19/aragorn-1529432894864_1280w.jpg)
    no-repeat 50% 50%;
}
.holmImg {
  background: url(http://reasonish.com/wp-content/uploads/2017/10/Ian-Holm-Bilbo.jpg)
    no-repeat 50% 50%;
}
/* /castInfo */



/* Footer */
#tickets {
  background: #400;
  color: wheat;
  padding: 50px;
  text-align: center;
}
#tickets a {
  text-decoration: none;
  color: #3478c1;
}
footer p{
  color: wheat;
  text-align: center
}
/* /Footer */





@media (max-width: 850px){

  body {
    left: 0px;
  }
  main {
    margin: 0px
  }
  header {
    font-size: 1em;
  }
  header h1{
    padding: 20px
  }
  footer {
    height: 30vw;
    margin: 0px;
    background: #000;
  }
  /* /layout grid */
  
  

  /* Aside */
  #aside {
    display: none;
  }
  /* /Aside */
  
  
  
  /* video */
  .mejs__overlay, .mejs__layer{
    height: 50vh !important;
    width: 100vw !important;
  }
  .mejs__mediaelementplayer, .mejs__container, video{
    height: 50vh !important;
    width: 100vw !important;
  }
  #trailer{
    max-height: 50vh;
  }
  /* /video */
  
  
  
  /* synopsis */
  #synopsis{
    display: block;
    padding: 20px;
  }
  .poster{
    display: none;
  }
  #synopsis .char1,
  #synopsis .char5,
  #synopsis .char23 {
    font-size: 1em;
    top: 0em;
  }
  #synopsis .char5 {
  margin-right: 0px;
  }
  #synopsis .char23 {
    margin-right: 0px;
  }
  #synopsis .char1{
    margin-right: 0px;
  }
  #synopsis .char4,
  #synopsis .char15,
  #synopsis .char18,
  #synopsis .char22 {
    margin-right: 0px;
  }
  #synopsis h1 {
    font-size: 1.5em;
    padding: 0px 40px;
  }
  /* /synopsis */
  
  
  
  /* castInfo */
  #castInfo {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 10vh 100%;
    background: #400;
  }
  #castInfo h1 {
    grid-column: 1;
    grid-row: 1;
  }
  .cast {
    display: none;
  }
  .castBio {
    grid-row: 2;
    padding: 20px;
    height: 100%;
    max-width: 850px;
    grid-template-rows: repeat(4, 500px)
  }
  .castBio div{
    margin: 0 auto;
    max-width: 850px
  }
  .viggo, .eli, .ian, .holm{
    display: block;
    margin-bottom: 70px;
  }
  /* /castInfo */
  
  
  
  /* Footer */
  #tickets {
    padding: 20px;
    background: #300;
  }
  /* /Footer */
}

@media (max-height: 500px){
  #aside a{
    font-size: 1em;
  }
}