/*
CSS stylesheet for Heron's Nest
Created December 2020
Questions? Problems? Contact stewart.c.baker@gmail.com

https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
*/

/* -----------------------
	FONTS & STYLE
----------------------- */

/* Raleway font: headers & menu */
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

/* Castoro font: body & haiku */
@import url('https://fonts.googleapis.com/css2?family=Castoro&display=swap');

h1, h2, h3, h4, li {
	font-family: 'Raleway', sans-serif;
}

h1 {
	color:#2148CA;
}

h2.small {
	font-size:1.25em;
}

h3, h4 {
	font-size:1.5em;
}

p, ul.list li {
	font-family: 'Castoro', serif;
	font-size:1em;
}

p.haiku {
	font-size:1.33em;
	line-height:1.5em;
	white-space:nowrap;
}

p.haiku-oneline {
	font-size:1.33em;
	line-height:4em;
	white-space:nowrap;
}

/* Use this to "sign" something, whether it's a haiku, an editorial, or etc.*/
p.signature {
text-align: right;
    margin-bottom: 15%;
    white-space: nowrap;
    font-style: italic;	
}

p.subtitle {
	font-size:1.25em;
	margin-top:.25em;
}

a {
	color:#2148CA;
}

/* -----------------------
	LAYOUT & FORMAT
----------------------- */

h3 {
	margin-top:2em;
}

.half-width {
	width:49%;
	position:relative;
	float:left;
}

.full-width {
	width:100%;
}

.signature {
	/* required to fix alignment issues with long signature lines on mobile*/
	width: 300px; 
    left: -50px;
    position: relative;
}

.essay {
	width:66%;
	left:16.5%;
	position:relative;
}
.centered-half {
	position:relative;
	left:25%;
	width:50%;
	margin-right:25%;
}

.left {
	position:relative;
	float:left;
}

.center {
	text-align:center;
}

img.center {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

img.logo {
	height:150px;
	float:left;
	position:relative;
}

.ital {
	font-style:italic;
}

footer {
	clear:both;
	position:static;
	bottom:0;
	left:0;
	border-top:black solid 1px;
	margin-top:1em;
	width:100%;
	padding-left:1em;
}

.content {
	width:100%;
}

.main {
	width:100%;
	padding-bottom:2em;
}

.clear {
	clear:both;
}

ul.issue {	
	list-style:none;
	width:100%;
	font-size:2em;
}

ul.issue li {
	width:33%;
	float:left;
	text-align:center;
}

h2.padded {
	padding-top:1em;
}

nav.issue-menu {
	width:50%;
	position:relative;
	left:25%;
}

nav.pagification {
	width:33%;
	position:relative;
	left:33%;
	}

nav.pagification ul {
	list-style:none;
	width:100%;
	font-size:1.5em;
}

nav.pagification ul li {
	width:50%;
	float:left;
	text-align:center;
	padding-bottom:1em;
}

/* -----------------------
	Mobile (portrait)
----------------------- */


/* Front page styles */

#index {
	background-image:url('../img/backdrop.png');
	background-repeat:no-repeat;
	background-size:100% 300px;
	background-position:center;
}

.award {
	width:100%;
	background-image:url('../img/frame.png');
	background-repeat:no-repeat;
	background-size:700px 700px;	
	background-position:center;
	height:700px;
}

.award-long {
    width:100%;
	background-image:url('../img/frame-long.png');
	background-repeat:no-repeat;
	background-size:788px 700px;	
	background-position:center;
	height:700px;
}

.award section.haiku, .award-long section.haiku {
	width:15%;
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding-top:325px;
	font-size:1.25em;
}

.issueButton a {
	margin-top:1em;
	border:1px solid black;
	border-radius:8px;
	padding:1em;
}

.issueButton {
	clear:both;
	width:100%;
	text-align:center;
}

.mainTitle {	
	font-size:5em;
	padding:0;
	margin:0;
}

.mainLogo img {
	width:50%;
	margin-bottom:5em;
}

/* Subpage styles */

div.haiku {
	position:relative;
	float:left;
	left:40%;
	width:15%;
	margin-right:42.5%;
}

/* -----------------------
	Mobile (landscape)
----------------------- */
@media (min-width: 640px) {

	/* haiku size */

	p, p.haiku, p.haiku-oneline, ul.list li {
		font-size:1.33em;
	}
	
	p.signature, footer p {
		font-size:1em;
	}
    
    .award-long p.haiku-oneline {
        font-size:1em;
    }        
}

/* -----------------------
	Tablet (portrait)
----------------------- */
@media (min-width: 768px) {

}

/* -----------------------
	Tablet (landscape)
----------------------- */
@media (min-width: 1024px) {


/* issue menu */

ul.issue {
	font-size:1.25em;
}
}

/* -----------------------
	Laptops & Desktops
----------------------- */
@media (min-width: 1280px) {


/* haiku div width */

div.haiku {
	left:40%;
	width:20%;
	margin-right:40%;
	margin-top:4em;
}

/* Front page styles */

#index {
	background-size:100% 400px;
	background-position:center;
}

.award {
	position:relative;
	width:700px;
	left:30%;
	margin-top:2em;
	background-size:650px 700px;	
	background-position:center;
	height:700px;
}

.award-long {
	position:relative;
	width:800px;
	left:20%;
	margin-top:2em;
	background-size:788px 700px;	
	background-position:center;
	height:700px;
}

    .award-long p.haiku-oneline {
        font-size:1.33em;
    }    

.award section.haiku, .award-long section.haiku {
	padding-top:350px;
	padding-bottom:2em;
	font-size:1em;	
}

.issueButton {
	clear:both;
	margin-top:1em;
	margin-bottom:2em;
}

.mainTitle {	
	font-size:5em;
	padding-bottom:0;
	margin-bottom:0;
	margin-top:.25em;
}

.logobox {
	width:50%;
	position:relative;
	left:25%;
}

/* handle images and captions displayed on illustration contest pages */
figure.print-issue {
	text-align:center;
	padding-bottom:2%;
}

figure.print-issue img {
	width:400px;
	border:1px solid grey;
}

.order-item {
	float: left;
    position: relative;
    width: 45%;
    height: 510px;
    margin-left: 2.5%;
    text-align: center;
    margin-bottom: 2%;
}
/*
 poet index
*/

.index {
	width:33%;
	position:relative;
	float:left;
	left:16.5%;
}