body {
    background: #007b6b;
    background: linear-gradient(#009789, #007b6b, #009789);
}

main {
    max-width: 640px;
    margin: 80px auto;
    background-color: #d5ffba;
    padding: 20px;
    border-radius: 4px;
    border: 4px solid #ffc107;
    box-shadow: 8px 8px 10px rgba(60, 20, 0, 0.3);
}

h1 {
    font-family: 'Droid Serif', serif;
}

p, label {
    font-family: 'Crimson Text', serif;
    font-size: 18px;
}

a {
    color: #009789;
    padding: 2px;
    border-radius: 2px;
}

code {
    color: #007b6b;
    font-size: 16px;
}

pre, textarea {
    color: #b1ddd9;
    background-color: #212121;
    font-family: monospace;
    padding: 8px 12px;
    overflow-x: scroll;
}

textarea {
  white-space: pre;
  overflow-wrap: normal;
}

/* Flaired edges, by Tomas Theunissen
   Reference: https://www.css-tricks.com/examples/hrs/ 
*/
hr {
    height: 30px;
    border-style: solid;
    border-color: #ffc107;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: #ffc107;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

/* Less padding on mobile */
@media (max-width:1000px) {
    main {
        margin: auto auto;
    }
}