html {
background-color:#aaa;
}
body {
margin:0 auto;
font-family:Helvetica, Arial, sans-serif;
width:74em;
border-left: 2em solid #ccc;
border-right: 2em solid #ccc;
padding:2em 1.5em 4em;
position:relative;
}
h1,
h2,
h3,
cite {
font-family:Georgia, "Times New Roman", Times, serif;
}
h1 {
font-size:4em;
text-align:center;
font-weight:bold;
}
cite {
display:block;
font-size:2.5em;
padding-top:0.3em;
font-style:italic;
text-align:center;
}
h2 {
font-size:2.8em;
padidng-bottom:1.5em;
}
h3 {
font-size:2.2em;
padding:1em 0 0.2em;
border-bottom:0.1em solid #ccc;
}
h4 {
font-size:2em;
padding:1em 0;
font-weight:bold;
}
h5 {
font-size:2em;
padding:0.7em 0.45em;
}
ul, ol {
padding-left:3em;
}
ul {
list-style-type:disc;
}
ol {
list-style-type:decimal;
}
li {
margin-bottom:0.5em;
line-height:120%;
}
li li {
font-size:1em;
margin-bottom:0;
margin-top:0.5em;
}
p, li {
font-size:1.8em;
}
p {
margin-bottom:0.75em;
}
a {
text-decoration:none;
color:#09f;
}
a:hover {
text-decoration:underline;
}
form#demo {
height:100%;
overflow:auto;
padding-bottom:0.75em;
}
#demo h2 {
font-family:Helvetica,Arial,sans-serif;
padding:1.5em 0 0;
text-align:left;
}
#demo a {
color:#333;
}
label {
color:#aaa;
cursor:pointer;
float:left;
font-size:1.75em;
margin:0.5em 0;
}
label input,
label select {
display:block;
font-size:1.45em;
margin-top:0.2em;
}
#preview {
text-align:center;
padding:3em 0 1em;
min-height:15em;
display:block;
}
#preview img {
max-width:100%;
height:auto;
}
.seperator {
float:left;
font-size:8em;
margin-top:0.1125em;
}
.slash {
padding:0 0.3em;
}
.period {
padding: 0 0.1em;
}
.ampersand {
clear:left;
padding-right:0.2em;
}
.example {
font-family:"Courier New", Courier, monospace;
color:#333;
}

dl {
overflow:auto;
height:100%;
}
dt,
dd {
font-size:1.8em;
}
dd {
line-height:120%;
}
dd.author {
font-style:italic;
margin-bottom:1em;
font-family:Georgia, "Times New Roman", Times, serif;
}

table {
margin-bottom:2.5em;
width:100%;
}
th,
td {
font-size:1.5em;
padding:0.3em 0.6em;
}
th {
font-weight:bold;
}
td {
border-bottom:0.1em solid #aaa;
}
td a {
color:#000;
}
#supported-by {
background-color: #FFFFFF;
left: -16em;
position: absolute;
top: 8em;
width: 17em;
border-left:0.6em solid #ccc;
}
#about {
margin-bottom:1em;
}

#carbonads {
  --width: 180px;
  --font-size: 14px;
}

#carbonads {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  max-width: var(--width);
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1);
  background-color: hsl(0, 0%, 98%);
  font-size: var(--font-size);
  line-height: 1.5;
}

#carbonads a {
  color: inherit;
  text-decoration: none;
}

#carbonads a:hover {
  color: inherit;
}

#carbonads span {
  position: relative;
  display: block;
  overflow: hidden;
}

.carbon-img {
  display: block;
  margin-bottom: 8px;
  max-width: var(--width);
  line-height: 1;
}

.carbon-img img {
  display: block;
  margin: 0 auto;
  max-width: var(--width) !important;
  width: var(--width);
  height: auto;
}

.carbon-text {
  display: block;
  padding: 0 1em 8px;
}

.carbon-poweredby {
  display: block;
  padding: 10px var(--font-size);
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  font-size: 9px;
  line-height: 0;
}

@media only screen and (min-width: 320px) and (max-width: 759px) {
  #carbonads {
    float: none;
    margin: 0 auto;
    max-width: 330px;
  }
  #carbonads span {
    position: relative;
  }
  #carbonads > span {
    max-width: none;
  }
  .carbon-img {
    float: left;
    margin: 0;
  }

  .carbon-img img {
    max-width: 130px !important;
  }
  .carbon-text {
    float: left;
    margin-bottom: 0;
    padding: 8px 20px;
    text-align: left;
    max-width: calc(100% - 130px - 3em);
  }
  .carbon-poweredby {
    left: 130px;
    bottom: 0;
    display: block;
    width: 100%;
  }
}