html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.clear{clear: both;}
#main-content
{
font-family: 'Fira Sans', 'Sans';
width: 100%;
margin: 0 auto;
}
#fixedContainer
{
width: 25%;
position: fixed;
display: block;
background-color: #3e4149;
color: #fff;
box-sizing: border-box;
height: 100%;
text-align: center;
}
header
{
text-align:center;
margin: auto;
width:100%;
}
#fixedContainer .logo
{
display: flex;
align-items: center;
justify-content: center;
margin:50px 0;
border: 1px solid #fec8c9;
width: 100px;
height: 100px;
border-radius: 100px;
padding: 20px 0 0 5px;
margin: 50px auto 20px auto;
display:block;
box-sizing: border-box;
}
#fixedContainer .logo .svg
{
width: 80px;
height: 68px;
margin: 0;
}
#fixedContainer h1
{
font-family: 'Fira Sans', 'Helvetica';
font-size: 1.5em;
font-weight: 300;
margin-bottom: 50px;
}
#fixedContainer nav ul li
{
margin-top: 20px;
}
#fixedContainer nav ul li a
{
font-family: 'Yeseva One', cursive;
text-decoration: none;
font-size: 2em;
font-weight: 300;
color: #c9d6de;
}
#fixedContainer nav ul li a:hover
{
color: #FFF;
}
.social
{
position:absolute;
bottom:5%;
width:100%;
font-size: 0.8em;
color:#999;
}
.social ul{margin-top: 20px;}
.social li
{
display:inline;
list-style-type:none;
padding-left:6px;
padding-right:6px;
}
a.svg
{
position: relative;
display: inline-block;
width: 32px;
opacity: 0.3;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
a.svg:hover {
opacity: 0.8;
}
.social object
{
width: 100%;
}
#container
{
width: 75%;
left:25%;
position: relative;
display: block;
box-sizing: border-box;
color: #333;
padding: 60px;
box-sizing: border-box;
}
#container h1
{
font-size: 2.2em;
font-weight: 300;
text-transform: uppercase;
margin: 5px 0 20px 0;
}
article {margin-top:50px;}
#container h2
{
font-size: 1.5em;
font-weight: 300;
margin: 5px 0 20px 0;
}
#container ol, #container ul
{
margin: 20px;
}
#container li
{
margin: 10px;
}
.gradient
{
border-radius: 5px;
color: #ffffff;
width: 100%;
text-align: center;
font-size: 4em;
font-family: 'Yeseva One', cursive;
padding-top: 50px;
box-sizing: border-box;
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #BA5370 , #F4E2D8); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #BA5370, #F4E2D8); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #BA5370, #F4E2D8); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #BA5370 , #F4E2D8); /* Standard syntax */
}
.button
{
border: 1px solid #fd999a;
border-radius: 3px;
text-align: center;
cursor: pointer;
color: #fd999a;
padding: 15px 40px;
text-decoration: none;
text-transform: uppercase;
font-weight: 300;
display: inline-block;
width: auto;
margin-top: 30px;
}
.button:hover
{
background-color: #fd999a;
color: #fff;
}
section pre
{
color:#8EC0E4;
background-color: #f6f6f6;
padding:20px 0px 20px 20px;
margin-top:20px;
font-family: 'Courier'
}