/* Reset & Initials Styling */
:root {
  --primary-color: #c72727;
  --secondary-color: #f99500;
  --light-color: #f3f3f3;
  --dark-color: #353535;
  --sports-color: #f99500;
  --ent-color: #a66bbe;
  --tech-color: #009cff;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  line-height: 1.5;
  background: var(--light-color);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Staatliches', cursive;
	color: var(--dark-color);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

ul {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: var(--dark-color);
}

p {
	margin-bottom: 1rem;
}

img {
	max-width: 100%;
}

/* Utilities Styling */
.container {
	padding-left: calc((100vw - 1100px) / 2) !important;
	padding-right: calc((100vw - 1100px) / 2) !important;
}

.p-1 { padding: 1rem !important }
.p-2 { padding: 2rem !important }
.py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important }
.py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important }
.py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important }
.py-4 { padding-top: 4rem !important; padding-bottom: 4rem !important }

.l-heading { font-size: 3rem !important }

.small-label {
	display: inline-block;
	font-size: 0.6rem;
	margin-bottom: 0.7rem;
  padding: 0.4rem;
	text-transform: uppercase;
	border-radius: 1.4rem;
	color: white;
	background-color: var(--primary-color);
}

.label-sport { background-color: #f99500 !important }
.label-ent { background-color: #a66bbe !important }
.label-tech { background-color: #009cff !important }

.btn {
	display: inline-block;
	padding: 0.6rem 1.6rem;
	color: white;
	background-color: var(--primary-color);
	border: 0;
	cursor: pointer;
}

.btn-secondary { background-color: var(--secondary-color) !important }
.btn-light { background-color: var(--light-color) !important }
.btn-dark { background-color: var(--dark-color) !important }

.bg-primary {
	color: white !important;
	background-color: var(--primary-color) !important;
}

.bg-secondary {
	color: white !important;
	background-color: var(--secondary-color) !important;
}

.bg-dark {
	color: white !important;
	background-color: var(--dark-color) !important;
}

.btn:hover {
	opacity: 0.9;
}

/* Home Page */
header #navbar {
	/*position: sticky;*/
	top: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	background-color: white;
	z-index: 2;
}

header #navbar .logo {
	width: 180px;
	padding-left: 10px;
}

header #navbar .social {
	justify-self: end;
}

header #navbar .social i {
  color: #777;
  margin-right: 0.6rem;
}

header #navbar ul {
	justify-self: end;
	display: flex;
	justify-content: center;
	align-items: center;
}

header #navbar ul li a {
	padding: 0.8rem;
	font-weight: bold;
}

header #navbar ul li a.current {
	color: white;
	background-color: var(--primary-color);
}

header #navbar ul li a:hover {
	color: var(--dark-color);
	background-color: var(--light-color);
}

header #showcase {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/*background: url('../img/featured.jpg') center center/cover no-repeat;*/
	background: white;
	position: relative;
}

header #showcase::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

header #showcase > div {
	z-index: 1;
	padding: 1rem;
}

header #showcase > div > h1 {
	font-size: 2rem;
	color: white;
}

header #showcase > div > p {
	color: white;
}

main > h2 {
	padding-left: 10px;
}

main #articles-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
}

main #articles-container article {
	background-color: white;
	padding: 1rem;
}

main #articles-container article[class="bg-dark"] > h3 > a,
main #articles-container article[class="bg-primary"] > h3 > a {
	color: white;
}

main #articles-container > *:first-child,
main #articles-container > *:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  align-items: center;
  grid-column: 1 / span 2;
}

main #articles-container > *:last-child {
	grid-column: 2 / span 2;
}

footer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
}

footer > div > img {
	width: 76%;
	margin-bottom: 0.4rem;
}

footer > div > form > input {
	width: 100%;
	margin-bottom: 0.45rem;
}

footer > div#copy {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.9rem; 
	grid-column: 1 / span 4;
	background-color: #424242;
}

footer > div#copy > p{
	font-size: 0.8rem;
	margin-bottom: 0;
}

footer > div > ul > li {
	padding: 0.8rem 0 0.5rem 0;
	border-bottom: 1px dotted #707070;
}

footer > div > h2,
footer > div > h3,
footer > div > p,
footer > div > ul > li > a {
	color: white;
}

/* About Page */
main#about > #page-container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 1rem;
}

main#about > #page-container > article {
	grid-column: 1 / span 6;
	grid-row: 1 / span 2;
	background-color: white;
}

main#about > #page-container > aside {
	grid-column: 7 / span 8;
}

main#about > #page-container > aside > h2 {
	color: white;
}

main#about > #page-container > aside > a {
	width: 100%;
	display: flex;
	justify-content: center;
	align-self: center;
}

/* Article Page */
main#article > #page-container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 1rem;
}

main#article > #page-container > article {
	grid-column: 1 / span 6;
	grid-row: 1 / span 4;
	background-color: white;
}

main#article > #page-container > article > div.meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--light-color);
	margin-bottom: 0.8rem;
	padding: 0.9rem;
}

main#article > #page-container > article > div.meta > small > i {
	margin-right: 6px;
}

main#article > #page-container > article > div.meta > .small-label {
	margin-bottom: 0;
}

main#article > #page-container > aside {
	grid-column: 7 / span 8;
}

main#article > #page-container > aside#categories {
	background-color: white;
	padding: 1rem;
}
main#article > #page-container > aside#categories > ul li {
	padding: 0.8rem 0 0.5rem 0;
	border-bottom: 1px dotted #707070;
	margin-right: 1rem;
}

main#article > #page-container > aside:last-child > h2 {
	color: white;
}

main#article > #page-container > aside > a {
	width: 100%;
	display: flex;
	justify-content: center;
	align-self: center;
}