/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* :::::::::::::::::::::::::::::::::::::::::: General */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');
body {
	margin: 0;
	padding: 0;
	font-family: "Poppins", sans-serif;
	background-color: white;
	color: #1f1f1f;
}

h1 h2 h3 h4 h5 h6 {
	font-family: "Poppins", sans-serif;
	margin-bottom: 15px;
}

.gray-bg {
	background-color: whitesmoke;
}

/* ::::::: Logo :::::::  */

.logo {
	color: #1f1f1f;
	font-weight: 800;
	font-family: Nunito, sans-serif;
	letter-spacing: -2px;
	font-size: 32px;
}

.logo>span {
	color: #885db1;
}

a {
	color: #885db1;
}

a:hover {
	color: #7a25b3;
	text-decoration: none;
}

/* :::::::::::::::::::::::::::::::::::::::::: Colors */

/* :::::::::::::::::::::::::::::::::::::::::: Navigation */

.active {
	font-weight: 500;
}

.nav-link {
	margin-left: 20px;
	margin-right: 20px;
}

.navbar-toggler {
	padding: .25rem .25rem;
	margin-top: 5px;
}

.navbar-toggler-icon {
	color: black;
}

.sign-up-modal-button {
	background-color: #885db1;
	border: none;
	border-radius: 18px;
}

.sign-up-modal-button:hover {
	background-color: #81549e;
}

/* :::::::::::::::::::::::::::::::::::::::::: Main */

.top-banner {
	margin-top: -120px;
	padding-top: 100px;
	background-image: url("../images/top-grad.png");
	background-size: contain;
	background-position: top right;
	background-attachment: scroll;
	background-repeat: no-repeat;
	overflow: hidden;
}

.download-badge {
	height: 40px;
	margin: 10px;
}

#top-banner-mockup {
	max-height: 600px;
}

#genre-tablet {
	max-width: 100%;
}

.genre-box {
	width: 55px;
	height: 55px;
	background-color: #c4a6e2;
	border-radius: 18px;
	margin: auto;
}

.genre-box>i {
	color: rgba(80, 38, 114, 0.5);
}

.genre-p {
	font-size: 12px;
	letter-spacing: -0.5px;
}

.hvr-glow:hover {
	-webkit-box-shadow: 0 0 10px rgba(210, 142, 255, 0.76);
	        box-shadow: 0 0 10px rgba(210, 142, 255, 0.76);
}

.feature-p {
	height: 96px;
}



.btn-link {
	color: #1f1f1f;
	font-weight: 500;
	width: 100%;
	text-align: left;
}

.btn-link:hover {
	color: #8b5db1;
	text-decoration: none;
}

/*- FAQ accordion -*/

.card-deck>.card>.card-header {
	padding-top: 20px;
	padding-bottom: 20px;
}

.card-deck>.card {
	border-radius: 20px !important;
	/* Box Shadow Created at - https://www.cssmatic.com/box-shadow */
	-webkit-box-shadow: 0px 5px 7px 5px rgba(247, 247, 247, 1);
	box-shadow: 0px 5px 7px 5px rgba(247, 247, 247, 1);
}
.card-header {
	padding: 0px;
}


/*- Pricing Cards -*/
.price-card {
	border-radius: 20px 20px 0 0 !important;
}
/*-Imported from bootstrap example's - https://getbootstrap.com/docs/4.0/examples/pricing/ -*/
.card-deck .card {
	min-width: 220px;
}
/*-end of import-*/

/* Cursor pointer - mentioned by mentor Ignatius, found how to do on https://stackoverflow.com/a/3088012 */
.pointer {
	cursor: pointer;
}

/* :::::::::::::::::::::::::::::::::::::::::: Footer */

footer {
	background-color: #dedede;
}

.newsletter {
	max-width: 70%;
}

.footer-item {
	padding-left: 30px;
	padding-right: 30px;
}

.footer-downloads {
	margin-bottom: 30px;
}

#footer-left {
	padding-left: 10vw;
}

.btn-newsletter {
	height: 29px;
	margin-top: 1px;
	border-radius: 0 10px 10px 0px;

}


#footer-nav {
	margin: 0 !important;
}

#copyright {
	background-color: #c2c2c2;
}

#mario {
	color:#666666;
}

#mario:hover {
	color: black;
}

/* :::::::::::::::::::::::::::::::::::::::::: Hover effects */

/* Imported from CSS Trics - https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition */

.grow {
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.grow:hover {
	-webkit-transform: scale(1.02);
	    -ms-transform: scale(1.02);
	        transform: scale(1.02);
}

/*------------------------------------------- Dividers -*/

/* ------------------------------------------ @ Media Queries */

@media only screen and (max-width: 992px) {
	body {
		text-align: center;
	}
		
	nav {
		background-color: white !important;
		margin-top: 0px;
		margin-bottom: 10%;
		width: 100vw;
	}
	.navbar-brand {
		margin-left: 5px !important;
	}
	.sign-up-modal-button {
		margin-right: 0 !important;
		margin-left: 0 !important;
		background-color: #885db1;
		border: none;
		border-radius: 18px;
	}
	.nav-link {
		color: #1f1f1f !important;
		border-bottom: 1px solid #cecece;
		margin-bottom: 5px;
	}
	.top-banner-left {
		padding-left: 5%;
		text-align: center;
	}
	.footer-downloads {
		margin-bottom: 20px;
	}
	#footer-p {
		text-align: center;
		width: 100%;
	}
	footer>div>div>a>.logo {
		margin-left: 23%;
	}
	#genres-text {
		text-align: center;
	}
}

@media only screen and (min-width: 993px) {
	.navbar-brand {
		margin-left: 15%;
	}
	.navbar-nav {
		margin-right: 15%;
	}
}