@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Neonderthaw&family=Open+Sans:ital,wght@1,300&family=Roboto+Mono:ital,wght@0,100;1,100&display=swap');




:root{
	--primary: #e6e6fa;
	--pri-dark:  #cec8ef;
	--dark: #333;
	--light: #ffffe0;
	--shadow:  0 1px 5px rgba(104, 104, 104, 0.8);
	/*font: 20px/1.2 "Roboto" , sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	background: var(--light);
	outline: 0.25rem;
}


body {
	box-sizing: border-box;
	box-shadow: var(--shadow);
	background: var(--primary);
	margin: 5px 25px;
	line-height: 2rem;
	
}

body * {
	/*color:  hsla(210, 100%, 100%, 0.88) !important;*/
	background: var(--primary)!important;
	/*outline: 0.25rem solid hsla(210, 100%, 100%, 0.50) !important;*/
}


.main-nav ul{
	display: grid;
	background: var(--pri-dark) !important;
	grid-gap: 20px;
	padding: 20px;
	list-style: none;
	grid-template-columns: repeat(4,1fr);
	

}

.main-nav a{
	
	color: var(--dark);
	display:  flex;
	padding:  0.1 rem;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: var(--shadow);
}
		
article{
	display: grid;
	grid-template-columns: 1fr  0.1in [start] 0in 8.3in 0in [end] 0.1in 1fr;
	height: fit-content;
	padding: 2px 50px;
}

article * {
	grid-column: start/end;
}

@media(max-width: 8.5in){

	article { grid-template-columns: 1fr  5% [start] 5% 80% 5%[end] 5% 1fr ;}
	main-nav{grid-template-columns: 1fr  5% [start] 5% 80% 5%[end] 5% 1fr ;}
}

@media(max-width: 8.5in){ :root {font-size: 18px;}}
@media(max-width: 5.5in){ :root {font-size: 16px;}}

h1{
	display: flex;
	background: var(--pri-dark);
	line-height: 100px;
	color: var(--dark);
	box-shadow: var(--shadow);
	justify-content: center;
	align-items: center;
	font-size: 60px;
	
}

h2{
	font-weight: 700 1.5rem/1.5 "Open Sans"; color: hsl(000, 0%, 33%);
	margin: 1px;
}


h3{
	font-weight: 500 1rem/1.2 "Open Sans"; color :hsl(250, 0%, 33%);
}

time{
	font-weight: 400 1rem/1.2 "Open Sans"; color:  hsl(000, 0%, 33%);
}



header{
	background: var(--light);
	box-shadow: var(--shadow);
	color: hsl(250, 0%, 33%);
	display: inline-grid;
	justify-content: center;
	align-items: center;
	line-height: 45px;
	font-size: 40px;
	margin: 15px;
	margin-top: 60px;
}

header a{
	text-decoration-line: none;
	color: hsl(000, 0%, 33%);
}


.size{
	grid-column: 3/5;
	box-shadow: var(--shadow);
	border-color: var(--dark);
	justify-content: center;
	align-items: center;
}

img.size {
	width: 100%;
	justify-content: center;
	align-items: center;
}

figcaption p{
	display: flex;
	font-weight: 400 1.rem/1.5 "Open Sans"; color: hsl(000, 000%, 33%);
	justify-content: center;
	align-items: center;
}

.author {
	display: flex;
	font-weight: 400 1.rem/1.5 "Open Sans"; color: hsl(000, 000%, 33%);
	justify-content: right;
	align-items: center;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
}

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #55ACEE;
  color: white;
}


footer {
	box-sizing: border-box;
	box-shadow: var(--shadow);
	font-family: "sans-serif" , sans-serif;
	color:  var(--dark);
	display: flex;
	align-items: center;
	justify-content: center;
}