/*
	Name: Smashing HTML5
	Date: July 2009
	Description: Sample layout for HTML5 and CSS3 goodness.
	Version: 1.0
	License: MIT <https://opensource.org/licenses/MIT>
	Licensed by: Smashing Media GmbH <https://www.smashingmagazine.com/>
	Original author: Enrique Ramírez <http://enrique-ramirez.com/>
*/

/* Imports */
@import url("reset.css");

/***** Global *****/


@font-face {
    font-family: 'Unageo';
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Unageo-Light.ttf");
}


@font-face {
    font-family: 'BebasNeue';
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/BebasNeue-Regular.woff");
}


@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/UbuntuSans-Regular.otf");
}

@font-face {
    font-family: 'Italic';
    font-style: italic;
    font-weight: normal;
    src: url("../fonts/UbuntuSans-Italic.otf");
}

@font-face {
    font-family: 'Semibold';
    font-style: normal;
    font-weight: bold;
    src: url("../fonts/UbuntuSans-SemiBold.otf");
}

@font-face {
    font-family: 'Semibold-Italic';
    font-style: italic;
    font-weight: bold;
    src: url("../fonts/UbuntuSans-SemiBoldItalic.otf");
}


/* Body */
body {
    color: #000;
    font-family: 'Unageo';
    line-height: 1.4;
    margin: 0;
    padding: 0;
    text-align: justify;
    font-size: large;
}


h1 {
    font-size: 300%;
    color: #000;
    padding-top: 20px;
    margin: 0px;
    font-family: 'BebasNeue';
}
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited {
    color: #000;

}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: #777;
    text-decoration: underline;
}

h2 {
    font-size: 220%;
    color: #000;
    padding: 0px;
    margin: 0px;
    font-family: 'BebasNeue';
    text-align: center;

}

h3 {
    font-size: 160%;
    color: #000;
    font-family: 'BebasNeue';

}

h4 {
    font-size: 120%;
    color: #000;
    font-family: 'BebasNeue';

}

hr { border: 2px solid #EEEEEE; }

/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
    color: #000;
    padding: 0 1px;
    text-decoration: none;
}
a:hover, a:active {
    color: #000;
    text-decoration: underline;
}

h1 a:hover {
    background-color: inherit
}

.center {text-align: center;}

/* Paragraphs */
div.line-block,
p { margin-top: 1em;
    margin-bottom: 1em;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

/* Lists */
ul {
    list-style: outside disc;
    margin: 0em 0 0 1.5em;
}

ol {
    list-style: outside decimal;
    margin: 0em 0 0 1.5em;
}

li { margin-top: 0.5em;
    margin-bottom: 1em; }

.post-info {
    text-align: center;
    margin:10px;
    padding:5px;
}

.post-info p{
    margin-top: 1px;
    margin-bottom: 1px;
}

.readmore { float: right }

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {
    margin: 20px;
    font-style: italic;
}

div.note {
    float: right;
    margin: 5px;
    font-size: 85%;
    max-width: 300px;
}

/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}

/* HTML5 tags */
header {text-align: center;}

section, footer,
aside, nav, article, figure {
    display: block;
}

/***** Layout *****/
.body {margin: 0 auto; max-width: 100%;}
img { max-width: 100%; }
img.right, figure.right, div.figure.align-right {
    float: right;
    margin: 0 0 2em 2em;
}
img.left, figure.left, div.figure.align-left {
    float: left;
    margin: 0 2em 2em 0;
}

/*
	Header
*****************/
#banner {
    margin: 0 auto;
    padding: 0 0 0 0;
}

	/* Banner */
#banner h1 {
    font-size: 3.571em;
    line-height: 1.0;
    margin-bottom: .3em;
    text-align: center;
}

#banner h1 a:link, #banner h1 a:visited {
    color: #000;
    display: block;
    font-weight: bold;
    margin: 0 0 0 .2em;
    text-decoration: none;
}
#banner h1 a:hover, #banner h1 a:active {
    background: none;
    color: #000;
    text-shadow: none;
}

#banner h1 strong {font-size: 0.36em; font-weight: normal;}

	/* Main Nav */
nav {
    background: rgb(244,53,37);
    background: linear-gradient(60deg, rgba(244,53,37,1) 8%, rgba(255,137,1,1) 22%, rgba(250,215,23,1) 36%, rgba(0,186,113,1) 50%, rgba(0,194,222,1) 64%, rgba(0,65,141,1) 78%, rgba(95,40,121,1) 92%);
    font-size: 1.2em;
    overflow: auto;
    line-height: 30px;
    padding: 0;
    text-align: center;
    text-shadow: 0px 0px 5px #fff;
}

nav ul {list-style: none; margin: 0 auto;}
nav li {
    float: left; 
    display: inline; 
    margin: 0;
}

nav .float_right {float: right;}

nav a:link, #banner nav a:visited {
    color: #000;
    display: inline-block;
    height: 30px;
    padding: 5px 1.5em;
    text-decoration: none;
}

nav a:hover {
    background-color: rgb(0 0 0 / 0.5);
    color: #000;
}

/*
	Body
*****************/
#content {
    background: #fff;
    margin-bottom: 2em;
    overflow: hidden;
    padding: 20px 20px;
    max-width: 760px;
}

/*
	Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}

#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
    color: #C74350;
    font-size: 1.429em;
    margin-bottom: .25em;
    padding: 0 3px;
}

#extras a:link, #extras a:visited {
    color: #000;
    display: block;
    border-bottom: 1px solid #F4E3E3;
    text-decoration: none;
    padding: .3em .25em;
}

#extras a:hover, #extras a:active {color: #fff;}

	/* Blogroll */
#extras .blogroll {
    float: left;
    max-width: 615px;
}

#extras .blogroll li {float: left; margin: 0 20px 0 0; max-width: 185px;}

/*
	About
*****************/
#about {
    background: #fff;
    font-style: normal;
    margin-bottom: 2em;
    overflow: hidden;
    padding: 20px;
    text-align: left;
    max-width: 760px;
}

#about .primary {float: left; max-width: 165px;}
#about .primary strong {color: #5f5f5f; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}

#about .url:link, #about .url:visited {text-decoration: none;}

#about .bio {float: right; max-width: 500px;}

/*
	Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}

/***** Sections *****/
.entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none; color: #000;}
.entry-title a:visited {background-color: #fff;}

.hentry .post-info * {
    font-style: normal;
}

	/* Content */
.hentry footer {margin-bottom: 2em;}
.hentry footer address {display: inline;}
#posts-list footer address {display: block;}

	/* Blog Index */
#posts-list {list-style: none; margin: 0;}
#posts-list .hentry {padding-left: 10px; position: relative;}

#posts-list footer {
    left: 10px;
    position: relative;
    float: left;
    top: 0.5em;
    max-width: 190px;
}

	/* About the Author */
#about-author {
    background: #5f5f5f;
    clear: both;
    font-style: normal;
    margin: 2em 0;
    padding: 10px 20px 15px 20px;
}

#about-author strong {
    color: #5f5f5f;
    clear: both;
    display: block;
    font-size: 1.429em;
}

#about-author .photo {border: 1px solid #ddd; float: left; margin: 5px 1em 0 0;}