@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');


/**************************** Site Structure *****************************/


@font-face {
font-family: QuickSandBook;
src: url('fonts/quicksand_book.otf');
}


body {	font-family: Arial, Helvetica, sans-serif;
background: #fff;
color: #666;
margin: 0 auto;
}
 
#container {
font-size: 1em;
width:100%;
max-width:800px;
background: #FFF;
margin: auto;
position: relative;
clear: both
}

@media screen and (max-width: 500px){
#container {
width:100%;
max-width:450px;
}
}

#container2 {
width:100%;
position: relative;
clear: both;
text-align:center;
}

.header {
font-family: "Albert Sans", sans-serif;
font-size: 10px;
padding: 12px 20px 0px;
margin: 0 auto;
border-radius: 0;
background: #FFF;
position: relative;
text-transform: uppercase;
}

#site_title {
margin-right: auto;
margin-left: auto;
display:block;
width:180px;
}

#site_title a img {
width:180px;
}

@media screen and (max-width: 500px){
#site_title {
width:110px;
}
#site_title a img {
width:110px;
}
}
	
	/**************************** Poem responsive images *****************************/
	
img.responsive {
width: 100%;
max-width:600px;
height: auto;
margin-left:auto;
margin-right:auto;
display:block;
}

@media screen and (max-width: 750px){
img.responsive { 
width: 95%;
height: auto;
margin-left:auto;
margin-right:auto;
display:block;
}
}

@media screen and (max-width: 500px){
img.responsive { 
width: 95%;
height: auto;
margin-left:auto;
margin-right:auto;
display:block;
}
}
  
#footer { 
font-size: 1em;
width: 90%;
margin: auto;
padding-top:12px;
padding-bottom:10px;
clear: both; 
background: #1e1e1e;
}

@media screen and (max-width: 725px){
#footer { 
width: 100%;
}
}

@media screen and (min-width: 1000px){
#footer { 
width: 80%;
}
}

#footer p {
margin-left: 40px;
margin-right: 40px;
line-height:1.7em;
}

.sticker {
padding:20px 1%;
width:20%;
}

@media screen and (max-width: 725px){
.sticker {
width:30%;
}
}


  /**************************** Typography *****************************/

.no_display {display: none;}

h1, h2, h3, h4 {
font-family: "Albert Sans", sans-serif;
font-weight: 300;
font-optical-sizing: auto;
font-style: normal;
} 

h2 {margin: 20px 8%; color: #000;}

h3 {margin-left:0;margin-right:0;margin-top:30px;margin-bottom:-9px; color: #fff; font-size:1.8em;}

h2 {font-size: 2.2em}

@media screen and (max-width: 768px){
h2 {font-size: 2em}
}

h4 {font-size: 1.2em; font-weight: 700}

.heading_bg {background: url(https://www.stickypoems.com/images/logo_etc/heading_bg_grey.png) repeat-x 0 40px  }

.heading_bg h1, 
.heading_bg h2, 
.heading_bg h3, 
.heading_bg h4, 
.heading_bg h5 {background: #FFF; padding-right: 15px; padding-left:15px; display: inline-block}

p {
padding: 8px 0;
font-size: 1em;
color:#fff;
letter-spacing:1px;
}

p span {
color:#f8dfef;
font-weight:bold;
}

a {
text-decoration:none;
color:#ad6f98;
}

strong {font-weight: bold}

em {font-style: italic;}

#container ul li {list-style:none}
#container ol li {list-style: none}

.splat {
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
margin-bottom:25px;
margin-top:8px
}

.copyright {
font-size:.7em;
color:#fff;
margin-top:30px;
margin-bottom:-10px;
}

#poemseries {
color: #5c8cd6;
font-family: "Albert Sans", sans-serif;
font-size: 2em;
font-weight: 650;
text-decoration: none;
text-align:center;
margin-left:35px;
margin-right:35px;
}

#poemseries span {
font-size: .5em;
color: #242424;
display:block;
font-style:italic;
font-weight:normal;
margin-top:4px;
margin-bottom:8px;
}

#pay {
color: #ad6f98;
font-family: "Albert Sans", sans-serif;
font-size: 2em;
font-weight: 650;
text-decoration: none;
text-align:center;
margin-left:auto;
margin-right:auto;
border:solid;
border-size:1px;
border-color:#5c8cd6;
border-radius:60px;
width:60%;
padding-top:30px;
padding-bottom:30px;
border-width:2px;
}

#pay span {
font-size: .5em;
color: #242424;
display:block;
font-style:normal;
font-weight:normal;
margin-top:4px;
margin-bottom:8px;
text-align:left;
margin-left:4%;
margin-right:4%;
line-height:1.5em;
}

.hrtop {
width:45%;
margin-top:10px;
margin-bottom:30px;
}

/**************************************************************************************/
/*--------------------------------------- Columns -----------------------------------*/


.one {
width:auto;
height:auto;
text-align:center;
margin-left:auto;
margin-right:auto;
display: block;
}

hr {
width:80%;
margin-top:40px;
}

#mainmenu img {
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
width:25px;
margin-top:23px;
}

@media screen and (max-width: 500px){
#mainmenu img {
width:20px;
}
}

#menu a span {
vertical-align:top;
display:inline-block;
margin-top:4px;
font-size:.5em;
letter-spacing:2px;
}


#menu {
margin-top:20px;
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#menu a {
color: #242424;
font-family: "Albert Sans", sans-serif;
font-size: 2.3em;
font-weight: 600px;
letter-spacing: 2px;
text-decoration: none;
}

#menu a.bottom{
color: #ad6f98;
}

#menu a:hover {
color: #ad6f98;
font-size:2.4em;
}

@media screen and (max-width: 750px){
#menu a {
font-size:2em;
}
#menu a:hover {
font-size:2.1em;
}

@media screen and (max-width: 500px){
#menu a {
font-size:1.7em;
}
#menu a:hover {
font-size:1.8em;
}
}