/*
  fixed layout width of mockup = 960px
*/

body
{
    margin: 1.041666666667%;   /* 10px / 960 = 0.01041666666667*/

}

h1, h2, h3, h4, h5, h6, li
{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}

h1
{
    font-size: 3.5em;
}

h2
{
    font-size: 1.25em;
}

li
{
    margin: 1em;
}


body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(#87ceeb 30vh, #81c784 30vh);
}

/* Billboard container */
.billboard-scene {
  position: relative;
  text-align: center;
  padding-top: 60px;
  margin-bottom: 160px; /* space for poles */
}

.billboard {
  display: inline-block;
  background: white;
  padding: 25px 50px;          /* smaller padding */
  border: 6px solid #555;      /* thinner frame */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);  /* softer shadow */
}

.billboard h1 {
  margin: 0;
  font-size: 2.2rem;           /* smaller text */
  font-family: "Arial Black", Arial, sans-serif;
  letter-spacing: 2px;
  color: #c62828;              /* slightly deeper red */
}

/* Support poles */
.billboard-scene::before,
.billboard-scene::after {
  content: "";
  position: absolute;
  bottom: -120px;
  width: 18px;
  height: 120px;
  background: #666;
}

.billboard-scene::before {
  left: 30%;
}

.billboard-scene::after {
  right: 30%;
}







section
{
    margin-top: 5em;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    max-width: 90%;
  margin: 0 auto;
  padding: 20px 20px;
  background: white;    
}

footer
{
    text-align: center;
    margin: 2em;
    line-height: 150%;
}

.lead-in {
  font-weight: 700;      /* bold */
  font-size: 1.5em;      /* larger than surrounding text */
}

@media screen and (max-width: 36em)
{

  .billboard h1 {
    font-size: 1.6rem;
  }

  .billboard {
    padding: 20px 30px;
  }    
}