body {
  font-family: Arial,Helvetica,sans-serif;
  font-size: medium;
  margin: 0px;
}

#header:not(.transparent) {
  -webkit-transition: opacity 2s ease-in;
     -moz-transition: opacity 2s ease-in;
      -ms-transition: opacity 2s ease-in;
       -o-transition: opacity 2s ease-in;
          transition: opacity 2s ease-in;
}

.transparent {
  opacity: 0;
}

#content {
}

#background {
  background-image: url('bgpastelstreaks.gif');
  height: 100%;
}

#container {
  margin: auto;
  height: 80%;
  background-color: white;
  border: 4px outset grey;
  padding: 2%;
}

.darkZone {
  display: none;
}

@media (min-width: 500px) { 
  #container {
    width: 700px;
  }
  #background {
    padding: 4rem 2rem 0rem 2rem;
  }
}

@media (max-width: 500px) { 
  #container {
    width: 90%;
  }
  #background {
    padding: 2rem 2rem 0rem 2rem;
  }
}