html, body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eee;
background: #eee;
font-size: 19px;
color: #333;
}
#main-page {
position: absolute;
top: 5%;
left: 15%;
height: auto;
width: 70%;
text-align: center;
overflow-x: none;
}
#main-label {
font-size: 34px;
font-weight: bold;
margin-bottom: 5%;
padding-bottom: 5%;
border-bottom: thick solid grey;
}
#main-info {
font-size: 22px;
padding: 2%;
height: auto;
line-height: 50px;
vertical-align: 30%;
background-color: #333;
color: #eee;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#example-div {
margin-bottom: 5%;
padding-bottom: 5%;
border-bottom: thick solid grey;
}
#examples-label {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 2%;
padding-bottom: 2%;
}
#show-albums-button {
 display: inline-block  width: auto;
height: auto;
padding: 2% 5%;
margin-bottom: 2%;
font-size: 30px;
font-weight: bold;
text-decoration: none;
text-align: center;
background-color: #333;
color: #eee;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: medium solid #333;
cursor: pointer;
transition: background-color 0.5s;
}
#show-albums-button:hover {
background-color: #555;
border: medium solid #333;
}
#albums-holder {
}
#setup-div {
margin-bottom: 5%;
padding-bottom: 5%;
border-bottom: thick solid grey;
text-align: center;
}
#setup-label {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 2%;
padding-bottom: 2%;
}
#activate-div {
margin-bottom: 5%;
padding-bottom: 5%;
border-bottom: thick solid grey;
}
#activate-label {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 2%;
padding-bottom: 2%;
}
#markup-label {
text-align: center;
font-size: 16px;
margin-bottom: 5%;
}
#programatic-label {
text-align: center;
font-size: 16px;
margin-bottom: 5%;
}
#download-div {
margin-bottom: 5%;
padding-bottom: 5% 0;
border-bottom: thick solid grey;
text-align: center;
}
#download-label {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 2%;
padding-bottom: 2%;
}
#download-button {
display: inline-block;
width: auto;
height: auto;
padding: 2% 5%;
margin-bottom: 2%;
font-size: 30px;
font-weight: bold;
text-decoration: none;
text-align: center;
background-color: #333;
color: #eee;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: medium solid #333;
cursor: pointer;
transition: background-color 0.5s;
}
#download-button:hover {
background-color: #555;
border: medium solid #333;
}
#version {
font-size: 20px;
font-weight: bold;
text-decoration: none;
margin: 2% 0;
}
.steps-c {
font-weight: normal;
font-size: 19px;
line-height: 39px;
vertical-align: baseline;
padding: 1%;
margin: 1%;
text-align: center;
}
.steps {
font-weight: normal;
font-size: 19px;
line-height: 39px;
vertical-align: baseline;
padding: 1%;
margin: 2%;
text-align: left;
}
.code {
background-color: #333;
color: #eee;
margin: 1% 0;
padding: 0;
overflow-x: auto;
font-weight: normal;
font-size: 16px;
text-align: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.comment {
font-weight: normal;
font-size: 13px;
color: #b8b8b8;
font-style: italic;
}
.bold {
font-weight: bold;
}
.hi {
background-color: #333;
color: #eee;
font-weight: bold;
font-size: 16px;
padding: 0.5% 1%;
margin: 0 0.4%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.albumize {
margin: 5% 0;
padding-bottom: 5%;
overflow-x: auto;
}
.albumize a img {
width: 200px;
height: 150px;
border: medium solid #333;
}
.albumize a img:hover {
border: medium solid grey;
}
#forkongithub a {
background: #333;
color: #eee;
text-decoration: none;
font-family: arial, sans-serif;
text-align: center;
font-weight: bold;
padding: 5px 40px;
font-size: 1rem;
line-height: 2rem;
position: relative;
transition: 0.5s;
}
#forkongithub a:hover {
background: #555;
color: #eee;
}
#forkongithub a::before, #forkongithub a::after {
content: "";
width: 100%;
display: block;
position: absolute;
top: 1px;
left: 0;
height: 1px;
background: #333;
}
#forkongithub a::after {
bottom: 1px;
top: auto;
}
 @media screen and (min-width:800px) {
#forkongithub {
position: absolute;
display: block;
top: 0;
left: 0;
width: 200px;
overflow: hidden;
height: 200px;
}
#forkongithub a {
width: 200px;
position: absolute;
top: 60px;
left: -60px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
}
}
#footer-div {
margin-bottom: 5%;
padding-bottom: 5% 0;
border-bottom: thick solid grey;
text-align: center;
}
#github-button {
display: inline-block;
width: auto;
height: auto;
padding: 2%;
margin: 5% 0;
font-size: 20px;
font-weight: bold;
text-decoration: none;
text-align: center;
background-color: #333;
color: #eee;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: medium solid #333;
cursor: pointer;
transition: background-color 0.5s;
}
#github-button:hover {
background-color: #555;
border: medium solid #333;
}
#issue-link {
color: inherit;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
#issue-link:hover {
color: #555;
text-decoration: underline;
}