styles.css

/*
    blue-green: #4abdac;
    red-orange: #fc4a1a;
    gold: #f7b733;
    gray: #dfdce3;
*/

html, body {
    margin: 0;
    padding: 0;
}

/* TOP-SECTION */
#welcome {
    width: 100%;
    background-color: #4abdac;
    padding: 8px 20px;
    text-align: center;
    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
}
#welcome h3 {
    color: #fff;
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    font-weight: bold;
}
#welcome img {
    border-radius: 50%;
    height: 160px;
    width: 160px;
    margin: 10px 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* SOCIAL-ICONS */
.fa{
    padding: 12px;
    font-size: 20px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    box-sizing: content-box;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.fa:link {
    text-decoration: none;
}
.fa:hover {
    opacity: 0.6;
    color: #fff;
}
.fa-facebook {
    background: #3B5998;
    color: white;
}
.fa-twitter {
    background: #55ACEE;
    color: white;
}
.fa-google {
    background: #dd4b39;
    color: white;
}
.fa-linkedin {
    background: #007bb5;
    color: white;
}
.fa-youtube {
    background: #bb0000;
    color: white;
}
.fa-instagram {
    background: #125688;
    color: white;
}
.fa-github {
    background: #24292e;
    color: white;
}
.fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


/* CENTRAL-SECTION */
.description {
    width: 80%;
    border: 3px solid black;
    border-radius: 8px;
    padding: 6px;
    margin: auto;
    margin-top: 14px;

}
h3.title>a{
    font-size: 0.5em;
}
.pages {
    padding: 20px 0;
}
button.fa:focus {
    outline:0;
}
button.fa:hover {
    color: #24292e;
    cursor: pointer;
}
.code-container, .demo{
    background-color: #eaeaea;
    padding: 12px 6px;
}