#samplebox {
  box-sizing: border-box;
  line-height: 1.2em;
  margin: 20px auto 20px auto;
  padding: 40px 20px 30px 20px;
  width: 60%;
  text-align: center;
  background-color: black;
  color: white;
}
  
code {
  color: magenta;
}

b {
  color: #00ff00;
}

#intro {
  width: 80%;
  margin: auto;
}

#steps {
  width: 50%;
  margin: 20px auto 20px auto;
  text-align: left;
}
  
#minequotebox {
  box-sizing: border-box;
  background-color: green;
  background-image: url("/img/minecraft_bg.png");
  background-position: top center;
  background-size: cover;
  color: #ffff00;
  letter-spacing: 0.1rem;
  font-family: "Minecraft", monospace;
  font-size: 1em;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px 5px 10px;
  overflow: hidden;
}

#minequotebox a {
  color: white;
}

.minequote {
  text-align: center;
  font-size: 1.6em;
  text-shadow: 2px 2px 0px #3e3e00;
}

.minerefresh {
  float: left;
  margin: 0 20px 10px 0;
  padding: 5px 10px 5px 10px;
  background-color: gray;
  border-width: 4px;
  border-color: black;
}

.minesource {
  float: right;
  margin: 0 0 10px 20px;
  padding: 5px 10px 5px 10px;
  background-color: gray;
  border-width: 4px;
  border-color: black;
}

#pinkquotebox {
  box-sizing: border-box;
  background-color: pink;
  color: white;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  border-style: dotted;
  border-color: hotpink;
  border-width: 5px;
  padding: 5px 10px 5px 10px;
  overflow: hidden;
}

#pinkquotebox a {
  color: hotpink;
  font-weight: bold;
}

.pinkquote {
  text-align: center;
}

.pinkrefresh {
  float: left;
}

.pinksource {
  float: right;
}

#gothquotebox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
  padding: 5px 10px 5px 10px;
  overflow: hidden;
}

#gothquotebox a {
  color: gray;
}

.gothquote {
  text-align: center;
  font-family: cursive;
  padding: 0px 20px 0px 20px;
}

.gothrefresh {
  float: left;
}

.gothsource {
  float: right;
}

#xkcdquotebox {
  box-sizing: border-box;
  background-color: white;
  color: black;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-color: #071419;
  border-radius: 12px;
  padding: 5px 20px 5px 20px;
  overflow: hidden;
  font-variant: small-caps;
  font-family: Lucida,Helvetica,sans-serif;
}

#xkcdquotebox a {
  color: white;
}

.xkcdquote {
  text-align: center;
  padding: 0 20px 0 20px;
}

.xkcdrefresh {
  float: left;
  background-color: #6e7b91;
  border-radius: 3px;
  font-weight: bold;
  padding: 5px 10px 5px 10px;
}

.xkcdsource {
  float: right;
  background-color: #6e7b91;
  border-radius: 3px;
  font-weight: bold;
  padding: 5px 10px 5px 10px;
}

@media (max-width: 800px) /* MOBILE ish VIEW */ {
  #samplebox {width:100%;}
  #intro {width:100%;}
  #steps {width:80%}
  #minequotebox {width:90%}
  #xkcdquotebox {width:90%;}
  #pinkquotebox {width:90%;}
  #gothquotebox {width:100%;}
}