/*
made by [Secret Santa!] exclusively for the use of Kristina @ jacksonrippner.org
licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/
*/



/* PAGE LAYOUT */

 html,
 body {
     font-size: 16px;
     margin:0;
     padding:0;
     height:100%;
     background: #fffaf3;
}

 .container {
     display: grid;
     grid-template-columns: 20vw auto;
     grid-template-rows: max-content auto max-content;
     width: 70vw;
     margin: 0 auto;
     grid-template-areas: 
		"nav nav"
		"header main"
		"footer footer";
}


/* NAVIGATION BAR */

 nav {
     grid-area: nav;
     margin-top: 2rem;
     text-align: center;
     word-spacing: 2rem;
     font-family: 'Josefin Sans', sans-serif;
     font-size: 200%;
     font-weight: normal;
     padding: 0.5rem;
	 font-variant: small-caps;
}

 nav a:link, 
 nav a:visited, 
 nav a:active {
    text-decoration: none;
     color: #7d7c92;
     text-shadow: none;
	 border: 0;
	 transition: all 0.5s ease-in-out;
}
 
 nav a:hover {
    color: #c5c5bb;
	border: 0;
	transition: all 0.5s ease-in-out;
}


/* HEADER */

 header {
     grid-area: header;
     padding: 1rem;
}
 
 .resize {
     max-width: 100%;
     height: auto;
     margin: 0;
     padding: 0;
}

 .mobileresize {
	 display: none;
}


/* MAIN TEXT */

 main {
     grid-area: main;
     padding: 1rem;
     text-align: justify;
     color: #a9a4ad;
     font-family: 'Rethink Sans', sans-serif;
     line-height: 175%;
     font-size: 100%;
}

main p {margin: 0 0.12rem 1.5rem 0.12rem;}

 a:link, 
 a:visited, 
 a:active {
	text-decoration: none;
    color: #c7b391;
    border-bottom: 1px dotted #c5c5bb;
	border-top: 1px dotted #c5c5bb;
	transition: all 0.1s ease-in-out;
}

 a:hover {
    color: #a9a19b;
	border-bottom: 1px solid #d5cfc678;
	border-top:  1px solid #d5cfc678;
	transition: all 0.1s ease-in-out;
}

 main b, 
 main strong {
    color: #bebdb3;
     letter-spacing: 1px;
}

 main i, 
 main em {
    color: #bcc4b6;
}


 blockquote {
	display: block;
	width: 85%;
	font-style: italic;
	font-family: 'Playfair Display', serif;
	margin: 1rem 2rem;
	color: #b0aba9;
	line-height: 150%;
	font-size: 115%;
}

 h1 {
     font-family: 'WindSong', cursive;
     font-size: 300%;
     color: #c9cfc5;
     margin-bottom: 0;
     display: block;
     text-align: right;
     text-shadow: 0 0 2px #73695a;
}

 h1.byline {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 68%;
	margin-bottom: 0;
	display: block;
	text-align: right;
	letter-spacing: 10px;
	font-weight: normal;
	text-shadow: 0 0 0 transparent;
	text-transform: uppercase;
	color: #a9a19a;
}

 h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 170%;
    text-align: left;
    color: #aba697;
    margin: 2rem 0 0.5rem 0;
    font-variant: small-caps;
    border-bottom: 1px solid #e3e1de;
 }
 
 h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 140%;
    text-align: left;
    color: #c6cdc5;
    margin: 2rem 0 0.25rem 0;
    font-variant: small-caps;
    letter-spacing: 5px;
    text-indent: 2rem;
 }
 
ul {
    list-style-type: disclosure-closed;
    margin-left: 2rem;
}

ol {
	margin-left: 2rem;	
    list-style: decimal-leading-zero;
	}
	
li {padding-left: 0.5rem;}
 

 abbr {
     text-decoration: none;
     border-bottom: 1px dotted #939da6;
     cursor: help;
}
 
 .center {
     text-align: center;
}

 .right {
     text-align: right;
}

 .left {
     text-align: left;
}

section {
	text-align: center;
	margin: 1rem auto;
}

.leftimg {
	float: left;
	margin: 0.25rem 0.5rem 0.1rem 0;
	border: 3px solid #bca570;
	box-shadow: 1px 1px 2px #e6e6e6;
	}

.rightimg {
	float: right;
	margin: 0.25rem 0 0.1rem 0.5rem;
	border: 3px solid #bca570;
	box-shadow: -1px 1px 2px #e6e6e6;
	}
	
.linking {
	margin: 0.25rem 0.5rem;
	}


/* FOOTER */

footer {
    grid-area: footer;
    text-align: center;
    font-size: 75%;
    line-height: 130%;
    font-family: 'Rethink Sans', sans-serif;
    color: #8e8a9c;
    margin: 4rem 0;
}

 footer a:link, 
 footer a:visited, 
 footer a:active {
    text-decoration: none;
     color: #79899b;
     text-shadow: none;
}

 footer a:hover {
    color: #979b85;
}


/* FEATURE BOXES */

.view {
    width: 300px;
    height: 200px;
    margin: 1rem;
    border: 3px solid #bca570;
	box-shadow: 1px 1px 2px #e6e6e6;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background: #fff;
	display: inline-block;
}

 .view .mask, .view .content {
     width: 300px;
     height: 200px;
     position: absolute;
     overflow: hidden;
     top: 0;
     left: 0 
}

 .view img {
     display: block;
     position: relative 
}

 .view h2 {
     font-family: 'Playfair Display', serif;
     font-size: 140%;
     color: #c9cfc5;
     font-weight: normal;
     font-variant: small-caps;
     text-align: center;
     position: relative;
     padding: 0.5rem;
     background: rgba(0, 0, 0, 0.8);
	 border: 0;
}

 .view p {
     font-style: italic;
     font-size: 80%;
     position: relative;
	 font-family: 'Rethink Sans', sans-serif;
     color: #fff;
     padding: 0.25rem 1rem;
	 margin: 0 0 0.25rem 0;
     line-height: 100%;
     text-shadow: 0 0 2px #000 
}

 .view strong,
.view bold {
     border-bottom: 1px solid #e5daca;
	 font-weight: normal;
	 color: #fff;
}


 .view a.info {
     display: inline-block;
     text-decoration: none;
     padding: 0.5rem;
	 margin-top: 0.5rem;
     background: #000;
     color: #fff;
     text-transform: uppercase;
     box-shadow: 0 0 1px #000;
     font-family: 'Josefin Sans', sans-serif;
     letter-spacing: 3px;
	 border: 0;
}

 .view a.info:hover {
     box-shadow: 0 0 5px #000;
     color: #a9a19a;
	 border: 0;
}

 .view-first img {
     transition: all 0.5s linear;
}

 .view-first .mask {
     opacity: 0;
     background-color: #bda570b0;
     transition: all 0.7s ease-in-out;
}

 .view-first h2 {
     transform: translateY(-100px);
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

 .view-first p {
     transform: translateY(100px);
     opacity: 0;
     transition: all 0.5s linear;
}

 .view-first a.info{
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

 .view-first:hover img {
     transform: scale(1.1);
}

 .view-first:hover .mask {
     opacity: 1;
}

 .view-first:hover h2, 
 .view-first:hover p, 
 .view-first:hover a.info {
     opacity: 1;
     transform: translateY(0px);
}
 .view-first:hover p {
     transition-delay: 0.4s;
}
 .view-first:hover a.info {
     transition-delay: 0.5s;
}
 

/* MOBILE SIZING */


@media only screen and (max-width: 1366px) {
	.container {
	grid-template-columns: 20vw auto;
	width: 85vw;
	}
}

 @media only screen and (max-width: 800px) {
	.container {
	grid-template-columns: 35vw auto;
	width: 90vw;
	}
	
	footer {
    font-size: 70%;
    margin: 2rem 0;
	}
}

@media only screen and (max-width: 562px) {
	.container {
	grid-template-columns: auto;
	grid-template-rows: max-content max-content auto max-content;
	width: 95vw;
	grid-template-areas: 
	"header"
	"nav"
	"main"
	"footer";
	}

	footer {
	font-size: 70%;
	margin: 1rem 0;
	}

	.resize {
	display: none;
	}

	.mobileresize {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
	}
}