/* 
Made by Jerry A. Sierra for The lotr Portfolio  
Last updated on: 6/6/2022
------------------------------------------------------------- */

/* Bodies and html5 
------------------------------------------------------------- */
nav, header, footer, figure, figcaption {
	display: block;
} 

* {
	margin: 0;
	border: 0;
	padding: 0;
}

body {
	box-sizing: border-box;
}

html, 
body {
	min-width: 100vw;
	min-height: 100vh;
    background-color: #f2f2f2;
}

.FirstBody {
		background-color: darkgray;
    	}	

 /* ----- Fonts -------------------------------- */

h1, 
h2, 
h3 {
font-family: 'Poppins', Tahoma, Geneva, Sans-serif;
     color: #000;          /* -- black txt -- */
}

p, 
header {
	font-family: 'Nanum Gothic', Geneva, Verdana, Arial, Tahoma, Sans-serif;
}

a, 
li, 
footer, 
.footer {
	font-family: 'Nanum Gothic', "Lucida Grande", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-size: medium;
	color: black;          
}


 /* Links ---------------------------------------- */

a {
	text-decoration: none;	
	border:thin #000000;
	padding: 0;
	font-size: small;
}

a:hover {
    color: #580002;    /* -- Dark -- */
    text-decoration: underline;
	background-color: ghostwhite;
}

.logo > a  {
    text-decoration: none;
}  


/* Headings
------------------------------------------------------------- */

h1 {
	font-weight: 600;
}

h1 > a {
	color: #000055;   /* -- very Drk Blue -- */ 
}	
	
h2 {
    margin-bottom: 1px; 
	font-weight: 500;
} 


/* Paragraphs 
------------------------------------------------------------- */

p {
	font-size: medium;
	color: #000;          /* -- black text -- */
	width: 80%;
	font-style: normal;
	text-align: left;
	padding-bottom: 10px;
}


  /* Misc Text ----------------------------------- */

.ctr {
    text-align: center;
}

.Sml {
    font-size: small;
}

ul {
	list-style-type: none;
}

li {
	text-align: left;
	padding-top: 8px;
}

.attn {
	font-size: 125%;
	font-variant: small-caps;
	color: #B9000C;             /* -- Dark Red txt -- */
}

/* ------------------------------------  Multi-Columns ------ */
.div-in9 {
	width: 80%;
    -ms-column-count: 2;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
	column-count: 2;
	-ms-column-width: auto;
	-webkit-column-width: auto; /* Chrome, Safari, Opera */
    -moz-column-width: auto; /* Firefox */
    column-width: auto;	
	-ms-column-gap: 15px;
	-webkit-column-gap: 15px; /* Chrome, Safari, Opera */
    -moz-column-gap: 15px; /* Firefox */
    column-gap: 15px;	
	text-align: left;
    -ms-column-rule: 1px;
	-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
    padding: 10px 10px 0 0;
	padding-left: 15px;
	border: 0;
	text-indent: 0;
	margin: auto;
}


/*     Images
--------------------------------------------------------- */
img {
	max-width: 90%;
    height: auto;
	opacity: 1.0;
	padding-bottom: 10px;
}
.img2 {
	border: 2px;
    border-radius: 12px;
	color: #000;    /* Black */
}
.imgRotate {
    padding: 5px;
	-webkit-transform:rotate( 3deg);
	-moz-transform:rotate( 3deg);
	-o-transform:rotate( 3deg);
	-ms-transform:rotate( 3deg);
	transform:rotate( 3deg);
}
.imgRotate2 {
    padding: 5px;
	-webkit-transform:rotate( -3deg);
	-moz-transform:rotate( -3deg);
	-o-transform:rotate( -3deg);
	-ms-transform:rotate( -3deg);
	transform:rotate( -3deg);
}
.imgLeft {
	display: none;
}

/* ----------- Grid Elements  ----------------- */
.gridOne {
    min-width: 100%;
	min-height: 100%;
	display: grid;
	grid-template-columns: 1fr;
    grid-template-rows: 140px minmax(90px, 1fr) minmax(30px, auto) 60px;
	grid-template-areas:
      'header'
      'content-1'
	  'content-1'
      'footer';
	grid-auto-flow: column;
	align-content: stretch;
	justify-content: stretch;
}

.header {
    grid-area: header;
    justify-self: center;
    align-self: center;
}
.header > h1 {
	color: #38127C;
	text-shadow: #C2C2C2 1px 0 10px; 
	font-variant: small-caps;
	text-align: left;
	padding-left: 5%;
}

.sidebar {
        display: none;
}


.content-1 {
		grid-area: content-1;
		background-color: #fff;
		align-items: center;
		place-items: center;
		padding: 5%;
background: rgb(254,254,254);
background: linear-gradient(90deg, rgba(254,254,254,1) 76%, rgba(221,221,221,1) 92%);rgba(221,221,221,1) 88%);
}

.content-1 > div {
	width: 90%;
    align-content: center;
    justify-content: center;
}
.content-1 > p {
	width: 70%
}
.content-1 > .gallery {
	padding: 0;
	margin: 0;
	border: 0;
}
.content-2 {
		display: none;
		grid-area: content-2;
		background-color: #ddd;
		align-items: center;
	    justify-items: center;
}

.footer {
	display: grid;
	grid-area: footer;
	align-self: end;
	background-color: lightgray;
	word-spacing: normal;
} 

.footer > p {
    text-align: center;
}

.bttm {
    text-align: center;
	align-items: center;
}

                /* ------- Gallery - The Shire ---------- */

.gallery {
	display: grid;
	grid-area: content-1;
	grid-template-columns: repeat(auto-fit, minmax(180px, auto));
	grid-gap: 15px;
	padding: 0;
    grid-auto-flow: dense;
}
.gallery > img {
	display: grid;
	padding: 0;
	width: auto;
    height: 100px;
}

.gallery > img {
	-webkit-transition: 
		-webkit-transform 0.3s ease-in-out;
	-moz-transition:
		-moz-transform 0.3s ease-in-out;
}
 
.gallery > a {
	-webkit-transition: 
		-webkit-transform 0.3s ease-in-out;
	-moz-transition:
		-moz-transform 0.3s ease-in-out;
}
.gallery > img:hover {
	border-radius: 25px;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
.gallery > a:hover {
	border-radius: 25px;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
a > img:hover {
	border-radius: 25px;
}
    
/* ----------------------- END Gallery  ---------------- */
    

/*    for Screens min 600px
------------------------------------------------------------- */
@media screen and (min-width: 600px) {

.gridOne {
    grid-template-columns: 1fr 5fr;
    grid-template-rows: minmax(110px, 120px) 1fr 50px;
	grid-template-areas:
      'header header'
      'sidebar content-1'
      'footer footer';
	grid-auto-flow: column;
	background-color: #f2f2f2;
}
 
.sidebar {
        display: grid;
        grid-area: sidebar;
		padding: 2%;
		padding-top: 30px;
	    align-self: stretch;
}
    
.sidebar > p {
	padding: 10px;
	color:#8B00A4;                   /* --- Dark Purple ---*/ 
}

.sidebar > h2 {
        text-align: right;
        padding-right: 10px;
 } 
    
.sidebar > h1 {
	color:#8B00A4;                   /* --- Dark Purple ---*/ 
	font-style: italic;
	text-shadow: #C2C2C2 1px 0 10px; 
	font-variant: small-caps;
}
    
img {
	max-width: 100%;
    height: auto;
}	

div > img {
		padding-bottom: 10px;
		padding-top: 10px;
	}
	
	/* --------------------------------  Multi-Column 640px ------ */
.div-in9 {
	width: 80%;
}

}

 /* For Screens min 768px
------------------------------------------------------------- */
@media screen and (min-width: 768px) {
 
.gridOne {
 	grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: minmax(110px, auto) 1fr 60px;
	grid-template-areas:
      'header header header'
      'sidebar content-1 content-2'
      'footer footer footer';
      background-color: #f2f2f2;
}
.content-2 {
		display: grid;
	grid-template-columns: 1fr;
    grid-template-rows: minmax(190px, 210px) 200px 2fr;
	background-color: #ddd;
	grid-template-areas: 
		'r-top' 
		'r-middle' 
		'r-bttm';
	align-items: center;
}
	
.sword {
	grid-area: r-middle;
	align-self: center;
	justify-self: center;
	}

.nav {
	font-size: medium;
}
	

/* Misc for 768px ----------------------------------- */

a {
	font-size: medium;
}
h1 {
    font-size: large;
    font-weight: 600;
} 
	
.imgLeft {
	display: block;
}
	
	/* ---------------  Multi-Column for 768px - Change to 2-col --- */
.div-in9 {
	width: 75%;
    -ms-column-count: 2;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
	column-count: 2;
}
}

/* For Screens Min 900px 
------------------------------------------------------------- */

@media screen and (min-width: 900px) {

.FirstBody {
		background-color: gray;
    background-image: url(http://jerrysierra.com/images/lotr/lotrCoverMed.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}	
	
.gridOne {
	grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: minmax(130px, 150px) 1fr 50px;
}


/* ------ MISC for Med Screens ------------- */

a {
	font-size: large;
}
    
h1 {
     font-size: x-large;
     font-weight: 700;
} 

h2 {
     font-size: large;
     font-weight: 600;
} 

	/* ------------------  Multi-Column for 900px - Change to 3-col  ------ */
.div-in9 {
	width: 75%;
    -ms-column-count: 3;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
	column-count: 3;
}


}


/* For Large Screens  min 1200px
------------------------------------------------------------- */

@media screen and (min-width: 1200px) {

.FirstBody {
	background-color: #eee;
    background-image: url(http://jerrysierra.com/images/lotr/lotrCover.jpg);
 }	

h1 {
	font-size: 300%;
}

	/* ----------------  Multi-Column for Lg Scrns - Change to 4-col ----- */
.div-in9 {
	-ms-column-count: 4;
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
	column-count: 4;
}
}