Basic CSS

basic-style.css

/************************************************************

NORMALIZE CSS
Do not touch the CSS between these line breaks

**********************************************************/
/*! normalize.css v7.0.0 | MIT License */
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
.cf:before,.cf:after,.clearfix:before,.clearfix:after{content:"";display:table}.cf:after,.clear,.clearfix:after{clear:both}.cf,.clearfix{*zoom:1}html,body,#outerwrapper{width:100%;height:100%}body{color:#000;font-size:100%}ul{list-style-type:none;padding-left:0;margin:0}a,a:link,a:visited{text-decoration:none;outline:0}input:focus{outline:0}img{display:block}.hidden{display:none !important}.entry-content li{margin-bottom:1em}.notouch{display:none}.touch-only{display:none}.hide{display:none}
.videoplayer_container,.video_wrapper{position:relative;padding-bottom:56.25%}.videoplayer_container iframe,.video_wrapper iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important;overflow:hidden}
img {max-width: 100%; height: auto;} .wrapper {max-width: 1100px; margin: 0 auto;}
/*** Mobile**/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.wrapper {max-width: 800px; padding:0 20px;}
}
@media only screen and (min-device-width: 420px) and (max-device-width: 767px) {
	.wrapper {max-width: 600px; padding:0 15px;}
}
@media only screen and (min-device-width: 350px) and (max-device-width: 419px) {
	.wrapper {max-width: 380px; padding:0 12px;}
}
@media only screen and (max-device-width: 349px) {
	.wrapper {max-width: 300px; padding:0 10px;}
}
/************************************************************

END THE NORMALIZE CSS
Do not touch the CSS between these line breaks

**********************************************************/

/** EDIT THE CSS below **/
body {
	font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
	font-family: Garamond, Georgia, serif;
}

h1 {
	font-size: 2.5em;
}
h2 {font-size: 2em;}

a {
	color:#48BEFF;
}

a:hover {
	color:#F2A541;
}

button {
	color:#fff;
	background-color: #666;
	border: none;
}

nav {
	width: 100%;
}

section {
	display: inline-flex;
	justify-content: space-between;
	flex-flow: wrap;
	flex: 4; 
}

article {
	flex: 3;
}

aside {
	flex: 1;
}

footer {
	text-align: center;
	padding: 15px 0;
	font-size: 0.8em;
}

/** Colors **/
.pink {color:#FF3366;}
.red {color:#BF211E;}
.orange {color:#FF5714;}
.yellow {color: #E9CE2C;}
.green {color: #43C59E;}
.blue {color:#48BEFF;}
.purple {color:#46237A;}
.black {color:#000000;}
.white {color:#ffffff;}
.grey {color:#666666;}