html {
  height:100%;
  font-family:"Ubuntu",sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: black;
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(100, 0, 100, 0.45)
    ),
    url("images/bg.png");
  background-size:50.1vw;
  background-attachment:fixed;
  color: #99ccCC;
}

.commentary {
  font-style: italic;
  color: #777;
  margin-top:0;
  padding-top:0;
}

.button:hover {
  background-color: #426;
}

.hide {
  display: none;
}

h1 {
  color: #edbd79;
}

.flush {
  margin-bottom:0;
  padding-bottom:0;
}

.indent {
  margin-left:3em;
}

.doubledent {
  margin-left:6em;
}

a {
  text-decoration:none;
  color: #AA88AF;
  transition-property: color;
  transition-duration: 1s;
}

a:hover {
 color: #DD00DD;
}

.normal {
  color:#99CCCC;
}

.container {
  margin: 15%;
  padding: 6% 9%;
  border-radius: 1vw;
  background: 
  no-repeat top 1vw left 1vw / 15% url("images/UL.png"),
  no-repeat bottom 1vw right 1vw / 15% url("images/LR.png"),
  linear-gradient(
      rgba(0, 0, 0, 0.75), 
      rgba(0, 0, 0, 0.75)
    );
}

.var {
  color: #BB99DD;
}

.semi {
  color: #FF99AA
}

#entrance {
  margin:17% 30%;
  padding:5%;
  background-color: rgba(0, 0, 0, .75);
  border-radius: 35px;
  text-align: center;
}

#menu {
  display:none;
  float:right;
  margin:2em;
  padding:1em;
}

@media screen and (max-width: 768px){  
  h1 {
    font-size: 5vw;
  }
  p {
    font-size: 4vw;
  }
}

@media screen and (min-width: 769px) {  
  h1 {
    font-size: 24px;
  }
  p {
    font-size:18px;
  }
}