html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: -20px 20% 0px;
  padding: 20px 10px 0px;
  border: solid #ccb;
  border-width: 0 2px;
  background: linear-gradient(to left, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) left/20% repeat-y,
              linear-gradient(to right, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) right/20% repeat-y,
              #ddc;
}

h4 {
  margin-bottom: 0;
}

section p {
  margin-left: 20px;
}

code {
  border: 1px dotted #444;
  padding: 0 2px;
  background-color: #eee;
}

@media (max-width: 500px) {
  body {
    margin: -20px 5% 0px;
    background: linear-gradient(to left, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) left/5% repeat-y,
                linear-gradient(to right, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) right/5% repeat-y,
                #ddc;
  }
}

@media (max-width: 800px) and (min-width: 500px) {
  body {
    margin: -20px 10% 0px;
    background: linear-gradient(to left, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) left/10% repeat-y,
                linear-gradient(to right, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) right/10% repeat-y,
                #ddc;
  }
}

@media (min-width: 1600px) {
  body {
    margin: -20px 30% 0px;
    background: linear-gradient(to left, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) left/30% repeat-y,
                linear-gradient(to right, #c0c0b0, #989c8c 5%, #707868 15%, #485444 35%, #203020) right/30% repeat-y,
                #ddc;
  }
}