/*
Theme Name: Rajni George
Author: PMZO
Version: 2021.07
*/

:root {
	--bground:		rgba(255,255,255,1);
	--bground-9:	rgba(255,255,255,.9);
	--mground:		rgba(127,127,127,1);
	--mground-9:	rgba(127,127,127,.9);
	--fground:		rgba(0,0,0,1);
	--fground-9:	rgba(0,0,0,.9);
	--brand:		rgba(192,57,43,1);
	--brand-9:		rgba(192,57,43,.9);
}

* { border:0; font-family:inherit; font-style:inherit; font-weight:inherit; margin:0; outline:0; padding:0; vertical-align: baseline; }

html { font-size:62.5%; overflow-y: scroll; scroll-behavior: smooth; }
body { background:var(--bground); color: var(--fground); font-family: Helvetica, 'Roboto', sans-serif; font-size: 1.6rem; line-height: 1.5;  }

b, strong { font-weight: bold; }
i, em { font-style: italic; }
img { height: auto; max-width: 100%; border: 0; }

h1,h2,h3,h4,h5,h6{ font-family: 'Libre Baskerville', serif; font-weight: normal; }

a { color: var(--brand); text-decoration: none; outline:0; }
a { opacity: 1; }
a:hover, a:active, a:focus{ opacity: 0.9; }

nav { position: fixed; top: 0; left: 0; width: 100%; font-family: 'Libre Baskerville', serif; text-transform:uppercase; z-index:100; background: var(--brand-9); }
nav ul { list-style: none; display: flex; flex-direction: row; justify-content: center; }
nav li { }
nav a { color: var(--bground); display: block; font-size: 1.4rem; padding: 1rem; }

section { max-width: 32rem; margin: auto; padding-top: 2rem; display: flex; flex-wrap: wrap; }
h2 { font-size: 3.5rem; text-align: center; text-transform: uppercase; margin-bottom: 2rem; width: 100%; }
h3 { font-size: 2.5rem; text-align: center; margin-bottom: 2rem; width: 100%; }

header { display: block; }
header h1 { height: 85vh; margin-bottom: 15vh; background: var(--brand); font-size: 6rem; color: var(--bground); display: grid; place-items: center; text-align: center; }
header section { height: calc(100vh - 5rem); display: flex; flex-direction: column; align-items: center; justify-content: center; }
header section p { padding: 2rem; font-size: 2rem; max-width: 64rem; }

main { padding-top: 15rem; display: block; }
main section { margin: 2rem auto; }
article { display: block; box-shadow: 0 .2rem .4rem var(--mground-9); margin: 1rem; width: 30rem; line-height: 1.25; border-radius: .5rem; padding-bottom: 1rem; }
article:hover, article:active, article:focus-within { box-shadow: 0 .1rem .2rem var(--mground-9); }
article img { width: 100%; height: auto; display: block; border-radius: .5rem .5rem 0 0 }
article h4 { font-size: 2rem; background-position: 1rem 1rem; background-size: 4rem 4rem; background-repeat: no-repeat; padding: 1rem; }
h4 a { display: block; padding-top: 21rem; margin-top: -21rem; }
article h4 a span { border-left: .1rem solid var(--mground-9); margin-left: 4.9rem; display: block; padding-left: 1rem; min-height: 5rem; }
article cite { position: relative; display: block; padding: 0 1rem; text-align: right; font-size: 1.2rem; color: var(--fground-9); }
article p { font-size: 1.4rem; padding: 1rem; }
.more h4 a span { min-height: 5rem; }

footer { display: block; }
footer section { height: calc(100vh - 6rem);  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 2rem; }

.twitter { padding: .5rem 3rem; background: url('https://res.cloudinary.com/pmzo/f_auto,q_auto/rajnigeorge.com/icons/twitter.png') no-repeat left center; background-size: 2.5rem; }

body#error h1 { height: 50vh; margin-bottom: 0; }
body#error h2 { height: 50vh; display: grid; place-items: center;  margin-bottom: 0; }

@media screen and (min-width:640px){
	nav a { font-size: 1.8rem; padding: 1.5rem; }
	h2 { font-size: 4rem; }
	h3 { font-size: 3rem; }
	section { max-width: 64rem; }
	article h4 a span { min-height: 10rem; }
}

@media screen and (min-width:960px){
	section { max-width: 96rem; }
}