html {
	scroll-behavior: smooth;
}

body {
	background: #FFF;
	font-family: 'Shadows Into Light Two', cursive;
	font-size: 25px;
	text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
	font-size: 300%;
	font-weight: normal;
	margin: 0;
    font-family: 'Amatic SC', cursive;
    color: #000;
	line-height: 1;
}

h2 {
	font-size: 250%;
	font-weight: normal;
	margin: 0;
	color: #FFB000;
    font-family: 'Amatic SC', cursive;
}

h3 {
	font-size: 180%;
	font-weight: normal;
	margin: 0;
	text-transform: lowercase;
	font-family: 'Amatic SC', cursive;
}

p {
	width: 960px;
	margin: 15px auto;
    line-height: 160%;
}

a, a:visited {
	color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
	list-style: disc inside none;
}

.download {
	padding: 10px;
}

pre {
	font-size: 18px;
}

blockquote {
	text-align: left;
	width: 720px;
	margin: 10px auto;
	background: #C5C3DE;
	border: solid 2px #69697A;
	padding: 0 40px;
}

code {
    background-color: #000;
	font-style: normal;
    border-radius: 10px;
    color: white;
    padding: 5px 15px;
    font-family: menlo, monospace;
}

/*--- MODAL ---*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.product-order { margin: 20px auto; display: flex; flex-direction: row; flex-wrap: wrap; }
.product-order .image { width: 240px; }
.product-order .image img { padding: 3px; background-color: #AAA; }
.product-order .form { width: calc(100% - 240px); min-width: 230px; }
.product-order .product-description, .product-notes {margin-bottom: 10px;}
.product-order form { color: #232; margin-top: 5px; }
.product-order form label { display: inline-block; width: 120px; }
.product-order form input, .product-order textarea { margin: 5px; padding: 1px; display: inline-block; width: calc(100% - 29px - 120px); min-width: 220px; } /* what is that 29px? */
.product-order form textarea { height: 150px; }

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    .product-order .image { width: 100%; }
    .product-order .form { width: 100%; }
}

.clearing { clear: both; }

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*----------------------------------------  BLOCKS */

.scrollblock {
	position: relative;
	margin: 0;
	width: 100%;
    /*color: white;*/
    padding-top: 20px;
    padding-bottom: 80px;
}

.scrollblock h2 {

}

.block-title { background-color: #FFF; padding-bottom: 50px; }
.block-title h2 { color: #000; }
.block-title .meta { font-size: 16px; color: #999; }
.block-title .meta a { font-size: 16px; color: #333; }
.block-setup { background-color: rgb(247, 236, 228); }
.block-setup h2 { color: #7B5955; }
.block-create { background-color: #ffe958; }
.block-create h2 { color: #220; }
.block-create p { color: #000; }
.block-create code { background-color: #FFF; color: #000; }
.block-checkout { background-color: #FFF; }
.block-checkout h2 { color: #000; }
.block-checkout a { color: #FFF; font-weight: normal;font-style: normal; background-color: #7B5955; padding: 5px 5px; border-radius: 5px; text-decoration: none; }
.block-checkout a:hover { text-decoration: underline; }
.block-checkout ul li { padding: 7px; }
.block-trees { background-color: #4c0d09; }
.block-trees h2 { color: #d3b2af; }
.block-trees p { color: #d3b2af; }
.block-trees code { color: #000; background-color: white; }
.block-add { background-color: #cc4037; padding-bottom: 20px; }
.block-add h2, .block-add p { color: #4c0d09; }
.block-remote { background-color: #ffc19f; }
.block-remote h2 { color: #cc4037; }
.block-branching { background-color: #000; }
.block-branching h2 { color: #FFF; }
.block-branching p { color: #DDD; }
.block-branching code { color: #000; background-color: white; }
.block-merging { background-color: #F2F2F2; }
.block-merging h2 { color: #666; }
.block-tagging { background-color: #F2F2F2; }
.block-tagging h2 { color: #FFF; }
.block-hints { background-color: #F2F2F2; }
.block-hints h2 { color: #FFF; }
.block-resources { background-color: #ffc19f; }
.block-resources h2 { color: #cc4037; }
.block-resources h3 { color: #7d1f19; }
.block-resources ul { list-style: disc; margin: 0; padding: 0; }
.block-resources ul li a { font-size: 24px; color: #cc4037; }
.block-tagging { background-color: #348fd4; }
.block-tagging h2 { color: #06406c; }
.block-tagging form { color: #FFF; }
.block-tagging form label { text-align: right; display: inline-block; width: 180px; }
.block-tagging form input, .block-tagging textarea { margin: 5px; padding: 1px; display: inline-block; width: 700px; }
.block-tagging form textarea { height: 250px; }
.block-hints { background-color: #06406c; }
.block-hints h2 { color: #FFF; }
.block-hints form { color: #FFF; }
.block-hints form label { text-align: right; display: inline-block; width: 120px; }
.block-hints form input, .block-hints textarea { margin: 5px; padding: 1px; display: inline-block; width: 600px; }
.block-hints p { color: #FFF; }
.block-hints code { background-color: #000; color: #FFF; }
.block-checkout-replace { background-color: #fff8c9; color: #615400; }
.block-checkout-replace h2 { color: #2d2700; }
.block-comments { background-color: #FFF; padding-bottom: 50px; font-size: 14px; color: #000; }
.block-comments h2 { color: #000; }
.block-comments h3 { font-size: 16px; }
.block-comments #disqus_thread { width: 600px; text-align: left; margin-left: auto; margin-right: auto; }

.tower {
    display: block;
    width: 180px;
    height: 260px;
    position: absolute;
    top: 330px;
    right: 0;
    background: #FFF url(../img/git-tower.png) no-repeat;
}

.cheatsheet {
    display: block;
    width: 180px;
    height: 250px;
    position: absolute;
    top: 346px;
    left: 0;
    background: #FFF url(../img/cheatsheet.png) no-repeat;
}

.announcement {
    margin-bottom: 40px;
}

.announcement img {
    border-radius: 4px;
}

#carbonads {
  display: block;
  overflow: hidden;
  padding: 10px;
  background-color: #dfdfdf;
	border-radius: 3px;
  max-width: 300px;
  margin: 0 auto;
  font-family: Verdana, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.5;
}

#carbonads a {
  color: #606060;
}

#carbonads a:hover {
  color: hsl(0, 0%, 20%);
  text-decoration: none;
}

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

.carbon-img {
  float: left;
  margin-right: 1em;
}

.carbon-img img { display: block; }

.carbon-text {
  display: block;
  float: left;
  max-width: calc(100% - 130px - 1em);
  text-align: left;
}

.carbon-poweredby {
  position: absolute;
  left: 144px;
  bottom: 0;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 9px;
}

@media only screen and (max-width: 1000px), only screen and (max-device-width: 1000px) {

    p {
        width: 100%;
    }

    blockquote {
        width: 70%;
    }

    .block-tagging form label { width: 20%; }
    .block-tagging form input, .block-tagging textarea { width: 70%; }
    .block-hints form label { width: 20%; }
    .block-hints form input, .block-hints textarea { width: 70%; }
}