main.css

body {
  background-color: #A09070;
  background-image: linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px),
    linear-gradient(rgba(60,60,60,1) 1px, transparent 1px);

  background-size:
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px,
    10px 350px;
  background-position:
    0px 40px,
    0px 50px,
    0px 60px,
    0px 70px,
    0px 80px,
    0px 100px,
    0px 110px,
    0px 120px,
    0px 130px,
    0px 140px,
    0px 190px,
    0px 200px,
    0px 210px,
    0px 220px,
    0px 230px,
    0px 250px,
    0px 260px,
    0px 270px,
    0px 280px,
    0px 290px;
}

.container {
  max-width: 1000px;
  min-width: 300px;
  margin-left: auto;
  margin-right: auto;

  margin-top: 20px;
  margin-bottom: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  background-color: #F0E0C0;
}

#hero {
  margin-bottom: 12px;
}

#hero, .subhero {
  font-size: 3em;
  line-height: 48px;
  font-family: 'Roboto', sans-serif;
}
.hero-container {
  text-align: center;
  border-radius: 10px;
  padding: 20px;
}
#hero img {
  vertical-align: middle;
  padding-left: 20px;
}
.subhero {
  font-size: 2em;
  margin-bottom: 0px;
}
#header-segno {
  height: 48px;
}

footer {
  margin: 20px;
}

code {
  font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace
}
li {
  list-style-type: square
}

h1, h2, h3 {
  line-height 48px;
  font-family: 'Roboto', sans-serif;
  display: block;
  text-align: center;
}
h2 {
  padding-top: 24px;
  font-size: 1.5em;
  padding-bottom: 24px;
}

.spacing-segno {
  margin-top: 20px;
  margin-bottom: 100px;
}

.rows {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.rows p {
  font-size: 16px;
  text-align: justify;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 30px;
  flex-basis: 0;
  flex-grow: 1;
}

@media (min-width: 768px) {
  .rows {
    flex-direction: row;
  }
}


hr {
  margin-top: 40px;
}

.links-box {
  text-align: center;
  min-width: 200px;
}

p.emphasis {
  font-size: 24px;
  text-align: center;
  margin: 20px;
  line-height: 36px;
}
p.instructions {
  margin-top: 12px;
  margin-bottom: 12px;
}

aside {
  background-color:#FCFBE8;
  padding: 10px;
  margin: 10px;
  border-radius: 8px;
}

p, li, aside {
  font-family: 'Open Sans', sans-serif;
  line-height: 24px;
}
.container > p {
  padding-left: 24px;
  padding-right: 24px;
}


.edit-to-rewind-example {
  height: 400px;
  width: 900px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.edit-to-rewind-example .editor {
  font-size: 16px;
}
.stepping-example {
  height: 400px;
  width: 900px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.stepping-example .editor {
  opacity: 0.5;
}
.simple-example {
  height: 400px;
  width: 900px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.simple-example .editor {
  font-size: 16px;
}

.game-example {
  height: 400px;
  width: 900px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.game-example .editor {
}


.gh-button {
  margin: 10px;
  margin-left: 25px;
}
.twitter-follow-button {
  margin: 10px
}


/* get rid of page effect on smaller screens */
@media all and (max-width: 1000px) {
    .container {
        margin-top: 0;
        margin-bottom: 0;
    }
}
@media all and (max-width: 900px) {
    .dalsegno-embed {
      display: none !important;
    }
    .instructions {
      display: none !important;
    }
    .replace-embed {
      display: inline !important;
    }
    #space {
      display: none !important;
    }
}


.replace-embed {
  display: none;
  width: 100%;
  min-width: 200px;
}

@media not (max-width: 1000px) {
    .dalsegno-youtube-embed {
      display: none;
    }
}