@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');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&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;
}

.site_title a img {
width:180px;
margin-right: auto;
margin-left: auto;
display:block;
}

	
	/**************************** 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;
border-radius:10px;
}

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

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

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

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

@media screen and (max-width: 550px){
.sticker {
width:68%;
padding:5px 1%;
}
}


  /**************************** 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;
font-family: "Indie Flower";
text-align:center;
}

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:#000000;
margin-top:10px;
margin-bottom:-10px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

.poemseries {
color:#000000;
font-family: "Albert Sans", sans-serif;
font-size: 1.7em;
font-weight: 650;
text-decoration: none;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:30px;
border:solid;
border-width:1.5px;
border-color:#000000;
border-radius:10px;
width:85%;
padding-top:30px;
padding-bottom:30px;
box-shadow: 0 0 20px 1px #949090;
}

@media screen and (max-width: 500px){
.poemseries {
font-size: 1.4em;
padding:25px 8px;
}
}

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

.donation {
color:#000000;
font-family: "Indie Flower";
font-size: 1.7em;
font-weight: 650;
text-decoration: none;
text-align:center;
margin-left:auto;
margin-right:auto;
border:solid;
border-width:1.5px;
border-color:#000000;
border-radius:10px;
width:55%;
padding:30px 35px;
line-height:1.2em;
box-shadow: 0 0 20px 1px #949090;
}

.donation span {
font-family: "Albert Sans", sans-serif;
font-size: .5em;
color: #242424;
display:block;
font-weight:normal;
margin-top:6px;
margin-bottom:2px;
line-height:1.2em;
}

.donation a {
font-family: "Albert Sans", sans-serif;
font-size: .7em;
line-height:1.3em;
display:block;
font-weight:normal;
margin-top:7px;
}

@media screen and (max-width: 500px){
.donation {
width:80%;
padding:20px 10px;
}
}

.faqbox {
color:#000000;
margin-left:auto;
margin-right:auto;
margin-top:30px;
border:solid;
border-width:1.5px;
border-color:#000000;
border-radius:10px;
width:60%;
padding-top:30px;
padding-bottom:30px;
box-shadow: 0 0 20px 1px #949090;
}

.faq {
color:#000000;
font-family: "Albert Sans", sans-serif;
font-size: 1em;
font-weight: normal;
text-decoration: none;
text-align:left;
padding:10px 40px;
}

@media screen and (max-width: 500px){
.faqbox {
color:#000000;
margin-left:auto;
margin-right:auto;
margin-top:30px;
border:solid;
border-width:1.5px;
border-color:#000000;
border-radius:10px;
width:90%;
padding-top:8px;
padding-bottom:8px;
box-shadow: 0 0 20px 1px #949090;
}
}
@media screen and (max-width: 500px){
.faq {
color:#000000;
font-family: "Albert Sans", sans-serif;
font-size: 1em;
font-weight: normal;
text-decoration: none;
text-align:left;
padding:22px;
}
}



.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;
}

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

.pay2 {
color: #000000;
font-family: "Albert Sans", sans-serif;
font-size: 1.7em;
font-weight: 650;
text-decoration: none;
text-align:center;
margin-left:20%;
margin-right:20%;
}

@media screen and (max-width: 500px){
.pay2 {
font-size: 1.5em;
margin-left:7%;
margin-right:7%;
}
}

.pay2 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:20%;
margin-right:19%;
line-height:1.5em;
text-indent:-18px;
}

@media screen and (max-width: 500px){
.pay2 span {
margin-left:10%;
margin-right:3%;
}
}

.thanks {
color: #ad6f98;
font-family: "Indie Flower";
font-size: 1.2em;
font-weight: 650;
text-decoration: none;
text-align:center;
margin-left:auto;
margin-right:auto;
}

.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:12px;
}

@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;
padding:0 8px;
}

.menu a {
color: #242424;
font-family: "Albert Sans", sans-serif;
font-size: 2.3em;
font-weight: 600px;
letter-spacing: 1.2px;
text-decoration: none;
height:30px;
line-height:30px;
word-spacing:-5px;
}

.menu a.bottom{
color: #ad6f98;
height:30px;
line-height:30px;
word-spacing:normal;
}
.menu a span.indie{
color: #ad6f98;
font-family: "Indie Flower";
font-size:1em;
letter-spacing:0px;
}

.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;
}
}

/* --- Sticker Gallery Layout and Numbering --- */


.gallery-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;                 /* space between images */
  flex-wrap: wrap;           /* lets them wrap on mobile */
  counter-reset: stickercount;
  margin-top: 20px;
}

.sticker-item {
  counter-increment: stickercount;
  text-align: center;
  flex: 0 0 auto;            /* prevents stretching */
}

.sticker-item img {
  display: block;
  width: 350px;              
  height: auto;
  margin: 10px auto;
  border-radius: 4px;
}

.sticker-item::after {
  content: "#" counter(stickercount);
  display: block;
  margin-top: 10px;
  font-size: .7em;
  color: #000000; 
  font-family: "Albert Sans", sans-serif;
  letter-spacing: 1px;
}

@media screen and (max-width: 1300px) {
  .sticker-item img {
    width: 280px;           
  }
}

@media screen and (max-width: 1100px) {
  .sticker-item img {
    width: 250px;           
  }
}

@media screen and (max-width: 950px) {
  .sticker-item img {
    width: 300px;           
  }
}

@media screen and (max-width: 750px) {
  .sticker-item img {
    width: 340px;            
  }
}

@media screen and (max-width: 600px) {
  .sticker-item img {
    width: 300px;            
  }
.gallery-wrapper {
  gap: 20px;                 /* space between images */
}
}

@media screen and (max-width: 380px) {
  .sticker-item img {
    width: 270px;           
  }
}

@media screen and (max-width: 300px) {
  .sticker-item img {
    width: 200px;           
  }
}


.sticker-img {
        cursor: pointer;
        transition: transform 0.2s;
    }
.sticker-img:hover {
        transform: scale(1.05);
        outline: 3px solid #f8dfef; /* pink border on hover */
    }

/* --- Image Gallery Layout --- */

.gallery-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;                 /* space between images */
  flex-wrap: wrap;           /* lets them wrap on mobile */
  margin-top: 20px;
}

.gallery-item {
  text-align: center;
  flex: 0 0 auto;            /* prevents stretching */
}

.gallery-item img {
  display: block;
  width: 350px;              
  height: auto;
  margin: 10px auto;
  border-radius: 4px;
}

.gallery-item::after {
  display: block;
  margin-top: 10px;
  font-size: .7em;
  color: #000000; 
  font-family: "Albert Sans", sans-serif;
  letter-spacing: 1px;
}

@media screen and (max-width: 1300px) {
  .gallery-item img {
    width: 280px;           
  }
}

@media screen and (max-width: 1100px) {
  .gallery-item img {
    width: 250px;           
  }
}

@media screen and (max-width: 950px) {
  .gallery-item img {
    width: 300px;           
  }
}

@media screen and (max-width: 750px) {
  .gallery-item img {
    width: 340px;            
  }
}

@media screen and (max-width: 600px) {
  .gallery-item img {
    width: 300px;            
  }
.gallery-wrapper {
  gap: 20px;                 /* space between images */
}
}

@media screen and (max-width: 380px) {
  .gallery-item img {
    width: 270px;           
  }
}

/* --- Form --- */

form {
max-width: 500px;
margin: 2rem auto;
font-family: "Albert Sans", sans-serif;
}
label {
display: block;
margin-top: 1rem;
text-align:left;
font-size:.6em;
color:#000000;
}
input, textarea, button {
width: 95%;
padding: 0.5rem;
margin-top: 0.25rem;
}
button {
margin-top: 1.3rem;
font-size: 1.4rem;
font-weight:bold;
cursor: pointer;
background-color:#ad6f98;
font-family: "Albert Sans", sans-serif;
color:#fff;
border-radius:20px;
max-width:400px;
}