:root {
	--color-primary: #0d52cc;
	--color-secondary: #00b3cc;
	--color-accent: #ff3400;
	--color-headings: whitesmoke; /*#1b0760*/
	--color-body: #918ca4;
	--color-body-darker: #5c5577;
	--color-background: rgb(58, 58, 58);
	--color-background-darker: rgb(37, 36, 36);
	--color-border: #ccc;
	--border-radius: 30px;
}

/* The Below corrects a problem where anchor elements are wider than the viewport */
*, *::after, *::before {
	box-sizing: border-box;
}

/* Typography */

::selection {
	background: var(--color-primary);
	color: #fff;
}

html {
	font-size: 62.5%;
}

body {
	background-color: var(--color-background); /*Temporary for my EYES */

	font-family: Inter, Arial, Arial, Helvetica, sans-serif;
	font-size: 2.4rem;
	line-height: 1.5;
	color: var(--color-body);
}

/* Link styles */
a:link {
	color: var(--color-primary);
}

a:visited {
	color: var(--color-secondary); /* Lighter blue for visited links */
}

a:hover {
	color: var(--color-accent);
}

a:active {
	color: var(--color-accent);
}

h1, h2, h3 {
	color: var(--color-headings);
	margin-bottom: 1.5rem;
	line-height: 1.1;
}

h1 {
	font-size: 7rem;
}

h2 {
	font-size: 4rem;
}

h3 {
	font-size: 3rem;
	font-weight: 500;
}

p {
	margin-top: 0;
}

@media screen and (min-width: 1024px) {
	body {
		font-size: 1.8rem;
	}

	h1 {
		font-size: 8rem;
	}

	h2 {
		font-size: 4rem;
	}

	h3 {
		font-size: 2.4rem;
	}

	
}

/*Links*/

	a {
		text-decoration: none;
	}

	.link-arrow {
		color: var(--color-accent);
		text-transform: uppercase;
		font-size: 2rem;
		font-weight: bold;
	}

	.link-arrow::after {
		content: "-->";
		margin-left: 5px;
		transition: margin 0.15s;
	}

	.link-arrow:hover::after{
		margin-left: 10px;
	}

	@media screen and (min-width: 1024px) {
		.link-arrow {
			font-size: 1.5rem;
		}
	}

	.nav .disabled-link{
		pointer-events: none;
		cursor: default;
		color: rgb(120, 120, 120);
	}

	.footer .disabled-link {
		pointer-events: none;
		cursor: default;
		color: rgb(70, 69, 69);
	}

	/*Badges*/
	
	/* Object oriented CSS separete structure from skin */

	/* STRUCTURE */
	.badge {
		border-radius: 20px;
		font-size: 2rem;
		font-weight: 600;
		padding: 0.5rem 2rem;
		white-space: nowrap;
		
	}

	/* SKIN */
	/* BEM (Block Element Modifier) naming convention;   */
	.badge--primary {
		background: var(--color-primary);
		color: #fff;
	}

	.badge--secondary {
		background: var(--color-secondary);
		color: #fff;
	}

	.badge--small {
		font-size: 1.6rem;
		padding: 0.5rem 1.5rem;
	}

	@media screen and (min-width: 1024px) {
		.badge {
			font-size: 1.5rem;
		}

		.badge--small {
			font-size: 1.2rem;
		}
	}

	/* Lists */
	.list {
		list-style: none;
		padding-left: 0;
		color: var(--color-body)
	}

	.list--inline .list__item {
		display: inline-block;
		margin-right: 2rem;
	}

	.list--tick {
		list-style-image: url(../images/tick.svg);
		padding-left: 3rem;
	}

	.list--tick .list__item {
		padding-left: 0.5rem;
		margin-bottom: 1rem;
	}

	@media screen and (min-width: 1024px){
		.list--tick .list__item {
			padding-left: 0;
		}
	}

	/* Icons */
	/* Structure */
	.icon {
		width: 40px;
		height: 40px;
	}

	.icon--small {
		width: 30px;
		height: 30px;
	}

	/* Skin */
	.icon--primary {
		fill: var(--color-primary);
	}

	.icon--white {
		fill: #fff;
	}

	.icon--word {
		width: 100px;
		height: 100px;
	}

	.icon--big-heart {
		width: 400px;
		height: 100px;
	}

	.icon--gg4 {
		width: 100px;
		height: 100px;
	}

	.icon--construction {
		
		width: 100px;
		height: 100px;
		margin-left: 6rem;;
		/*filter: invert(38%) sepia(86%) saturate(4800%) hue-rotate(38deg) brightness(0.93);*/
	}

	.icon-container {
		background: #f3f9fa;
		width: 64px;
		height: 64px;
		border-radius: 100%;
		/* icon-container is a span; width/height don't affect spans; so inline- */
		display: inline-flex; 
		justify-content: center; /* Horizontal */
		align-items: center; /* Vertical */
	}

	.icon-container--accent {
		background: var(--color-accent);
	}

	/* Buttons */
	/* Structure */
	.btn {
		border-radius: 40px;
		border: 0;
		cursor:	pointer;
		font-size: 1.8rem;
		font-weight: 600;
		margin: 1rem 0;
		outline: 0;
		padding: 2rem 4vw;
		text-align: center;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.btn .icon {
		width: 2rem;
		height: 2rem;
		margin-right: 1rem;
		vertical-align: middle;
	}

	/* Skin */
	.btn--primary {
		background: var(--color-primary);
		color: #fff; /* Text color */
	}

	.btn--primary:hover {
		background: #3a8ffd;
	}

	.btn--secondary {
		background: var(--color-secondary);
		color: #fff;
	}

	.btn--secondary:hover {
		background: #00c8eb;
	}

	.btn--secondary:visited {
		color: #2b5663;
	}

	.btn--accent {
		background: var(--color-accent);
		color: #fff;
	}

	.btn--accent:hover {
		background: #ba2d0a;
	}

	.btn--outline {
		background: var(--color-background);
		color: var(--color-headings);
		border: 2px solid var(--color-headings);
	}

	.btn--outline:hover {
		background: var(--color-secondary); /*color--headings*/
		color: #fff;
	}

	.btn--stretched {
		padding-left: 6rem;
		padding-right: 6rem;
	}

	.btn--block {
		width: 100%;
		display: inline-block; 
	}

	@media screen and (min-width: 1024px) {
		.btn {
			font-size: 1.5rem;
		}
	}

	/* Inputs */
	.input {
		background: var(--color-background);
		border-radius: var(--border-radius) ;
		border: 1px solid var(--color-border);
		color: var(--color-headings);
		font-size: 2rem;
		outline: 0;
		padding: 1.5rem 3.5rem;
	}

	::placeholder {
		color: #cdcbd7;
	}

	.input-group {
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius);
		display: flex;
	}

	.input-group .input {
		border: 0;
		flex-grow: 1;
		padding: 1.5rem 2rem;
		width: 0;
	} 

	.input-group .btn {
		margin: 4px
	}

	@media screen and (min-width: 1024px) {
		.input {
			font-size: 1.5rem;
		}
	} 

	/* Cards */
	.card {
		border-radius: 7px;
		box-shadow: 0 0 20px 10px #1a1a1a;
		overflow: hidden;
	}

	.card .list {
		color: var(--color-headings);  /* ********* */
	}

	.card__header, .card__body {
		padding: 2rem 3rem;
	}

	.card--primary .card__header {
		background: var(--color-primary);
		color: #fff;
	}


	.card--secondary .card__header {
		background: var(--color-secondary);
		color: #fff;
	}

	.card--secondary .card__header a {
		color: white;
	}

	.card--secondary .card__header a:visited {
		color: #2b5663;
	}

	.card--secondary .card__header a:hover {
		color: var(--color-accent);
	}

	.card--secondary .card__header a:active {
		color: var(--color-accent);
	}

	.card--primary .badge--primary {
		background: #126de4;
	}

	.card--secondary .badge--secondary {
		background: #02cdf1;
	}

	/* Plans */

	.plan {
		margin-top: 2.5rem;
		transition: transform .2s ease-out;
	}

	.plan__name {
		color: #fff;
		margin: 0;
		font-weight: 500;
		font-size: 2.4rem;
	}

	.plan__price {
		font-size: 6rem;
	}

	.plan__billing-cycle {
		font-size: 2.4rem;
		font-weight: 300;
		opacity: 0.8;
		margin-right: 1rem;
	}

	.plan__description {
		font-size: 2rem;
		font-weight: 300;
		letter-spacing: 1px;
		display: block;
	}

	.plan .list__item {
		margin-bottom: 2rem;
	}

	.plan--popular {
		transform: scale(1.1);
	}

	.plan--popular .card__header {
		position: relative;
	}

	.plan--popular .card__header::before {
		content: url(../images/popular.svg);
		width: 40px;
		display: inline-block;
		position: absolute;
		top: -6px;
		right: 5%;
	}

	.plan:hover {
		transform: scale(1.05);
	}

	.plan--popular:hover {
		transform: scale(1.15);
	}

	@media screen and (min-width: 1024px) {
		.plan__name {
			font-size: 1.4rem;
		}
		.plan__price {
			font-size: 5rem;
		}

		.plan__billing-cycle  {
			font-size: 1.6rem;
		}

		.plan__description {
			font-size: 1.7rem;
		}
	}

	/* Media */
	.media {
		display: flex;
		margin-bottom: 4rem;
	}

	.media__title {
		margin-top: 0;
	}

	.media__body {
		margin: 0 2rem;
	}

	.media__image {
		margin-top: 1rem;
	}

	/* Quotes */
	.quote {
		font-size: 3rem;
		font-style: italic;
		color: whitesmoke;
		line-height: 1.3;
	}

	
	.quote__text::before {
		content: open-quote;
		
	}

	.quote__text::after {
		content: close-quote;
	}

	.quote__author {
		font-size: 3rem;
		font-weight: 500;
		margin-bottom: 0;
	}

	.quote__organization {
		color: var(--color-headings);
		opacity: .4;
		font-size: 2rem;
		font-style: normal;
	}

	.quote__line {
		 position: relative;
		 bottom: 10px;
	}

	@media screen and (min-width: 1024px){
		.quote {
			font-size: 2rem;
		}
		
		.quote__author {
			font-size: 2.4rem;
		}

		.quote__organization {
			font-size: 1.6rem;
		}
	}

	/* Grids */
	
	.grid {
		display: grid;
	}

	@media screen and (min-width: 768px) {
		.grid--1x2 {
			grid-template-columns: repeat(2, 1fr);
			/* grid-template-columns: 1fr 1fr; */
		}
	}

	@media screen and (min-width: 1024px) {
		.grid--1x3 {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* Testimonials */

	.testimonial {
		padding: 3rem;
	}

	.testimonial__image{
		position: relative;
	}

	.testimonial__image > img {
		width: 100%;
	}

	.testimonial__image > .icon-container {
		position: absolute;
		top: 3rem;
		right: -32px;
	}

	@media screen and (min-width: 768px) {
		
		.testimonial .quote,
		.testimonial .quote__author {
			font-size: 2.4rem;
		}

		.testimonial .quote {
			margin-left: 6rem;
		}

	}

	/* Callouts */
	.callout {
		padding: 4rem;
		border-radius: 5px;
	}

	.callout--primary {
		background: var(--color-primary);
		color: #fff;
	}

	.callout__heading {
		color: #fff;
		margin-top: 0;
		font-size: 3rem;;
	}

	.callout .btn {
		justify-self: center;
		align-self: center;
	}

	.callout__content {
		 text-align: center;
	}

	@media screen and (min-width: 768px) {
		
		.callout .grid--1x2 {
			grid-template-columns: 1fr auto;
		}

		.callout__content {
			text-align: left;
		}

		.callout .btn {
			justify-self: start;
			margin: 0 2rem;
		}
	}

	.callout--footer {
		position: relative;
		z-index: 10;
		margin-bottom: -4rem;
	}
	
	/* Collapsibles */

	#chevron circle {fill: #222;}
	#chevron rect {fill: #fff;}

	.collapsible__header {
		display: flex;
		justify-content: space-between;
	}

	.collapsible__heading {
		margin-top: 0;
		font-size: 3rem;
	}

	.collapsible__chevron {
		transform: rotate(-90deg);
		transition: transform .3s;
	}

	.collapsible__content {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: all .3s;
	}

	.collapsible--expanded .collapsible__chevron{
		transform: rotate(0);
	}

	.collapsible--expanded .collapsible__content {
		max-height: 100vh;
		opacity: 1;
	}

	/* Blocks */
	.block {
		--padding-vertical: 6rem;
		padding: var(--padding-vertical) 2rem;
	}

	.block__header {
		text-align: center;
		margin-bottom: 4rem;
	}

	.block__heading {
		margin-top: 0;
	}

	.block--dark {
		background: var(--color-background-darker);
		color: #7b858b;
	}

	.block--dark h1,
	.block--dark h2,
	.block--dark h3 {
		color: #fff;
	}

	.block--skewed-right {
		padding-bottom: calc(var(--padding-vertical) + 4rem);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
	}

	.block--skewed-left {
		padding-bottom: calc(var(--padding-vertical) + 4rem);
		clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
	}

	

	.container {
		max-width: 1140px;
		margin: 0 auto;
	}

	/* Navigation Bar */
	.nav {
		background: var(--color-background-darker);
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 1rem;
		align-items: center;
	}

	.nav__list {
		width: 100%;
		margin: 0;
	}

	.nav__item {
		padding: .5rem 2rem;
		border-bottom: 1px solid #222;
	}

	.nav__item > a {
		color: #d2d0db;
		transition: color 0.3s;
	}

	.nav__item > a:hover {
		color: #fff;
	}

	.nav__toggler {
		opacity: 0.5;
		transition: box-shadow .15s;
		cursor: pointer;
	}

	.nav.collapsible--expanded .nav__toggler {
		opacity: 1;
		box-shadow: 0 0 0 3px #680;
		border-radius: 5px;
	}
	
	.nav__brand {
		transform: translateY(3px);
	}

	@media screen and (min-width: 768px) {
		.nav__toggler {
			display: none;
		}

		.nav__list {
			width: auto;
			display: flex;
			font-size: 1.6rem;
			max-height: 100%;
			opacity: 1;
		}

		.nav__item {
			border: 0;
		}
	}

	/* Hero */

	.hero {
		clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
	}


	.hero__tagline {
		font-size: 2rem;
		color: #b9c3cf;
		letter-spacing: 1px;
		margin: 2rem 0 5rem;
	}

	.hero__image {
		width: 100%;
		margin-top: 20px;
	}

	@media screen and (min-width: 768px) {
		.hero {
			padding-top: 0;
		}
		.hero__content {
			text-align: left;
			align-self: center;
		}
	}

	/* Block Gospel */

	.block-gospel

	.block-gospel .input-group{
		box-shadow: 0 0 30px 20px #1a1a1a;
		border: 0;
		margin: 4rem auto;
		max-width: 670px
	}

	.block-gospel__details {
		color: var(--color-headings);
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 6rem);
		font-size: 2rem;
		font-weight: 600;
		justify-items: center;
		max-width: 700px;
		margin: 3rem auto;
	}


	@media screen and (min-width: 768px) {
		.block-gospel__details {
			grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		}
	}

	/* Games (Plans) Block */

	.block-games .grid {
		gap: 8rem 4rem;
	}

	.block-games .card {
		max-width: 500px;
		margin: 0 auto;
	}

	/* Features */

	.feature {
		gap: 4rem 2rem;
		margin: 12rem 0;
	}

	.feature:first-of-type {
		margin-top: 6rem;
	}

	.feature__heading {
		margin: 1rem 0;
	}

	.feature__image {
		width: calc(100% - 8px);
		box-shadow: 0 0 20px 10px #1a1a1a;
	}

	.feature__image .feature--gg-desktop-img {
		width: 400px;
		height: auto;
	}

	@media screen and (min-width: 768px) {
		.feature:nth-last-of-type(even) .feature__content{
			order: 2; /* default order is 1, which is the order they occur */
		}
	}

	.block-showcase__image > img {
		width: 100%;
	}

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

		.block-showcase .grid {
			grid-template-columns: 50% 50%;
		}

		.block-showcase__image {
			width: auto;
			
		}

		.block-showcase__image > img {
			max-width: 700px;
			justify-self: right;
		}

		.block-showcase .icon {
			margin-left: 2rem;
		}
	}

	/* Footer */

	.footer {
		background: #232323;
	}

	.footer a {
		color: #777;
		transition: color .3s;
	}

	.footer a:hover {
		color: #fff;
	}

	.footer__section {
		padding: 2rem;
		border-bottom: 1px solid #393939;

	}

	.footer__section .list {
		margin: 0;
	} 

	.footer__heading {
		text-transform: uppercase;
		font-weight: 600;
	}

	.footer__brand {
		margin-top: 5rem;
		text-align: center;
	}

	.footer__brand img {
		width: 100%;
		max-width: 100px;
	}

	.footer__copyright {
		font-size: 1.6rem;
		color: #fff;
		opacity: .3;
	}

	@media screen and (min-width: 768px) {
		
		.footer__section {
			border-bottom: 0;
		}
		
		.footer__sections {
			grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		}

		.footer .collapsible__chevron {
			display: none;
		}

		.footer .collapsible__content {
			opacity: 1;
			max-height: 100%;
		}

		.footer__brand {
			order: -1;
			margin-top: 1rem;
		}

		.footer_copyright {
			font-size: 1.5rem;
		}

		.footer__heading {
			font-size: 1.6rem;
		}

		.footer__section .collapsible__content .list {
			font-size: 1.6rem;
		}
	}

	/* Misc */

	.faq--top {
		margin-top: 4rem;
	}

	.faq--bottom {
		margin-bottom: 8rem;
	}

	.chevron--faq {
		align-self: center;
	}

	.collapsible__content.faq--paragraph {
		font-size: 2.5rem;
	}
	
	.feedback-form {
		max-width: 1140px;
  		margin: 2rem auto;
  		padding: 1rem;
  		background: var(--color-background-darker);
  		border-radius:8px;
  		box-shadow:0 2px 6px rgba(0,0,0,.1);
	}

	.feedback-form textarea {
		width:100%;
  		min-height:120px;
  		padding:.5rem;
  		font-size:1.8rem;
  		border:1px solid #ccc;
  		border-radius:4px;
		background: var(--color-background);
		color: #fff;
		caret-color: #fff;
	}

	.feedback-form button {
		margin-top:.5rem;
  		padding:.5rem 1rem;
  		background: var(--color-primary);
  		color:#fff;
  		border:none;
  		border-radius:4px;
  		cursor:pointer;
	}