body {
 background-color: #404;
 color: white;
}

div.banner {
 background-image: linear-gradient( to right, black, blue);
 overflow: hidden;
  text-shadow:
    -1px -1px 0 #f7f,
    1px -1px 0 #f7f,
    -1px 1px 0 #f7f,
    1px 1px 0 #f7f;
}
h1 {
 margin: auto;
 text-align: center;
 font-size: 3em;
}
h2 {
 margin: auto;
 text-align: center;
 font-size: 2em;
}
h3 {
 margin: auto;
 text-align: center;
 font-size: 1.8em;
}
h4 {
 margin: auto;
 text-align: center;
 font-size: 1.4em;
}


.main_title, .sub_title {
 color: #BF40BF;
}

div.moon {
 float: left;
 background-image: url(../gfx/moon.png);
 background-repeat: no-repeat;
 background-size: cover;
 width: 100px;
 height: 100px;
}

div.sun {
 float: right;
 background-image: url(../gfx/sun.png);
 background-repeat: no-repeat;
 background-size: cover;
 width: 100px;
 height: 100px;
}
 li p{
   text-align: left;
 }
 p.reviewer {
  font-style: italic;
 }
@media screen and (orientation: landscape) {                            

 div.page {
  display: block;
}
 div.cabin {
  position: relative;
 }
 div.content_landscape {
  position: absolute;
  display: block;
  background-color: #44004455;
  margin-top: 27%; 
  margin-left: 27.5%;
  margin-right: 26%;
  width: 42%;
  height: 64%;
  z-index: 2;
  overflow-y: scroll;
  padding-left: 1%;
  padding-right: 1%;
 }
 
 div.content_portrait {
  display: none;
 }
}

@media screen and (orientation: portrait) {                            
 
  div.page {
  display: grid;                                                    
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;                                         
}
 div.cabin {
  grid-column: 1;
  grid-row: 1;
 }

div.content_portrait {
  background-color: #ffffff55;
  align-self: center;   /* Center vertically inside parent */
  justify-self: center; /* Center horizontally inside parent */
  width: 90%;
  text-align: left; 
  padding: 1%;
 }
 div.content_landscape {
  display: none;
 }

}

div.cabin {
 clear: both;
 width: 90%;
 margin: auto;
 background-image: url(../gfx/cabin.png);
 background-repeat: no-repeat;
 background-size: cover;
 aspect-ratio: 900 / 1086;
}


div.menu span.spacer {
display: none;
}
div.menu {
 clear: both;
 color: white;
 text-align: center;
}

div.menu a {
 color: white;
 padding-left: 1em;
 padding-right: 1em;
}

@media screen and (max-width: 566px) {

h1 {
 margin: auto;
 text-align: center;
 font-size: 2.5em;
}
h2 {
 margin: auto;
 text-align: center;
 font-size: 1.5em;
}
h3 {
 margin: auto;
 text-align: center;
 font-size: 1.2em;
}
h4 {
 margin: auto;
 text-align: center;
 font-size: 1.0em;
 font-weight: bold;
}

}

@media screen and (max-width: 510px) {
 div.sun {
  width: 75px;
  height: 75px;
 }
 div.moon {
  width: 75px;
  height: 75px;
 }
 .main_title, .sub_title {
 font-size: 1.2em;
 }

}