/*********************************************
Juanisa's Portfolio - Custom Styles

File Name: styles.css

Created: 8/31/17

Updated: 6/14/2025

Version 5.0
*********************************************/

/* GENERAL */

:root {
	--nj-blue: #65bfe4;
	--nj-purple: #d587f1;
	--nj-retro-blue: #6ec6df;
	--nj-blue-link: #0e7d9c;
	--nj-grey: #656565;
	--nj-classic-grey: #767676;
	--nj-shell-grey: #969696;
	--nj-md-grey: #929191;
	--nj-grey-dark: #565656;
	--nj-charcoal: #252525;
	--nj-bg-gradient: #e390f3 -68%, #4acde2 100%;
	--nj-bg-gradient-blue: #80c3f3 20%, #4acde2 100%;
	--nj-bg-gradient-toggler: #80e6f5 9%, #80c3f4 85%, #4ac8e2 100%;
	--nj-box-shadow-dark: 0px 2px 4px rgba(0, 0, 0, 0.5);
	--nj-box-shadow-blue: 0px 2px 9px rgba(75, 205, 226, 0.55);
	--white: #ffffff;
	--black: #000000;
}

html,
body {
	height: 100%;
}

body {
	margin-top: 92px;
	overflow-x: hidden;
}

/* Text */
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
body {
	font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h6 {
	color: var(--nj-grey);
}

h4 {
	color: var(--nj-purple);
}

h5 {
	color: var(--nj-blue);
}

p {
	color: var(--nj-shell-grey);
}

a {
	color: var(--nj-blue-link);
}

ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

/*********************************************/

/* IE OVERRIDES */
/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*='.svg'] {
	width: 100%;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	img[src*='.svg'] {
		width: 100%;
	}
}

svg {
	max-height: 100%;
	max-width: 100%;
}

/*********************************************

MAIN BOOTSTRAP OVERRIDES

*********************************************/

/* Navbar */
.navbar.fixed-top.navbar-expand-md {
	box-shadow: 0px 2px 9px rgba(75, 205, 226, 0.55);
}
.bg-glass {
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	background-color: rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.subbrand {
	padding: 0 0 0 5px;
	color: var(--nj-grey-dark);
	font-size: 24px;
}
.navbar-toggler.btn {
	margin-top: 13px;
	background-color: var(--nj-retro-blue);
	color: var(--white);
	height: 50px;
	width: 50px;
}
.btl.bt-bars {
	font-size: 24px;
}

/* Buttons */
.btn.btn-primary {
	background-color: var(--nj-retro-blue);
	color: var(--white);
}

.btn.btn-secondary {
	background-color: var(--nj-purple);
	color: var(--white);
}

/* Override Bootstrap XXL max-width */
@media (min-width: 1400px) {
	.container {
		max-width: 1140px;
	}
}

/*********************************************/

/* Page: Home */

/* Cover */
#cover h1,
#cover h2,
#cover h3,
#cover p,
#cover a {
	color: var(--white);
}

#cover-caption {
	background-image: linear-gradient(var(--nj-bg-gradient));
	max-height: 615px;
	position: relative;
	top: 9px;
}

/* Hero */
.exp,
.amt,
.cat {
	color: var(--white);
}
.exp,
.cat {
	font-size: 2rem;
	font-weight: 300;
}
.amt {
	font-size: 3.5rem;
	font-weight: 400;
}
.float-top {
	position: relative;
	top: 60px;
	left: 14px;
}
.float-show {
	position: relative;
	top: -105px;
	left: 138px;
}
.float-bottom {
	position: relative;
	top: -104px;
	left: 409px;
}
.float-show img {
	width: 90%;
}

/*********************************************/

/* Header Animations */
.whole {
	animation-duration: 1s;
	animation-delay: 1s;
	-vendor-animation-duration: 1s;
	-vendor-animation-delay: 1s;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 1s;
}
.exp {
	animation-duration: 3s;
	animation-delay: 3s;
	-vendor-animation-duration: 3s;
	-vendor-animation-delay: 3s;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay: 3s;
}
.amt {
	animation-duration: 3s;
	animation-delay: 2s;
	-vendor-animation-duration: 3s;
	-vendor-animation-delay: 2s;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay: 2s;
}
.cat {
	animation-duration: 3s;
	animation-delay: 1s;
	-vendor-animation-duration: 3s;
	-vendor-animation-delay: 1s;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay: 2s;
}
.float-show {
	animation-duration: 5s;
	animation-delay: 3s;
	-vendor-animation-duration: 5s;
	-vendor-animation-delay: 3s;
	-webkit-animation-duration: 5s;
	-webkit-animation-delay: 3s;
}
.float-bottom {
	animation-duration: 4s;
	animation-delay: 3s;
	-vendor-animation-duration: 4s;
	-vendor-animation-delay: 3s;
	-webkit-animation-duration: 4s;
	-webkit-animation-delay: 3s;
}

/* Header Media Queries */
@media screen and (max-width: 580px) {
	.exp,
	.cat {
		font-size: 0.75rem;
		font-weight: 300;
	}
}
@media screen and (max-width: 580px) {
	.amt {
		font-size: 1rem;
		font-weight: 400;
	}
}
@media screen and (max-width: 580px) {
	.float-top {
		position: relative;
		top: 60px;
		left: 3px;
	}
}
@media screen and (max-width: 580px) {
	.float-show {
		position: relative;
		top: -9px;
		left: 47px;
	}
}
@media screen and (max-width: 580px) {
	.float-bottom {
		position: relative;
		top: -13px;
		left: 141px;
	}
}

@media screen and (max-width: 579px) and (min-width: 1199px) {
	.exp,
	.cat {
		font-size: 1.5rem;
		font-weight: 300;
	}
}
@media screen and (max-width: 579px) and (min-width: 1199px) {
	.amt {
		font-size: 2.5rem;
		font-weight: 400;
	}
}
@media screen and (max-width: 579px) and (min-width: 1199px) {
	.float-top {
		position: relative;
		top: 60px;
		left: 14px;
	}
}
@media screen and (max-width: 579px) and (min-width: 1199px) {
	.float-show {
		position: relative;
		top: -57px;
		left: 72px;
	}
}
@media screen and (max-width: 579px) and (min-width: 1199px) {
	.float-bottom {
		position: relative;
		top: -67px;
		left: 321px;
	}
}
/*********************************************/

/*********************************************

Body Content

*********************************************/

/* Page: Home */
#welcome {
	margin: 55px 0 10px 0;
}

.welcome-message p {
	font-size: 1.25rem;
}

.skill-design,
.skill-dev,
.skill-mgmt {
	display: flex;
	align-items: center;
	flex-direction: column;
}

#skills .items .terms {
	color: var(--white);
	font-weight: 400;
	font-size: 1.15rem;
	text-align: center;
}

.skill-set .items {
	border-radius: 50%;
	width: 245px;
	height: 245px;
	background-color: var(--nj-retro-blue);
	margin: 5px 0px 21px 0px;
}

.skill-set {
	margin: 0 auto;
}

#skills h2 {
	font-weight: 400;
}

#skills h5 {
	margin-top: 20px;
	font-size: 1.5rem;
}

#projects {
	margin: 51px 0 51px 0;
}

#projects .card-body h1 {
	font-size: 38px;
	font-weight: 300;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #868585;
}
#projects h2 {
	font-size: 25px;
	color: var(--nj-grey);
}
#projects img {
	margin-bottom: 25px;
}

.case-studies {
	font-weight: 300;
	color: var(--nj-purple);
	margin-bottom: 30px;
}

.navbar-toggler {
	background-image: linear-gradient(var(--nj-bg-gradient-toggler));
	color: var(--white);
	border: 2px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0px 2px 9px rgba(75, 205, 226, 0.55);

	&:hover {
		background-image: linear-gradient(to left, var(--nj-bg-gradient-toggler));
		border: 2px solid rgba(255, 255, 255, 0.35);
	}
}

.card {
	max-width: 20rem;
	height: 21.875rem;
	border: 2px solid rgba(75, 205, 226, 0.25);
	box-shadow: 0px 2px 9px rgba(75, 205, 226, 0.25);
	align-items: center;
	transition: all 0.5s;

	&:hover {
		border: 2px solid rgba(255, 255, 255, 0.765);
		box-shadow: 0px 2px 9px rgba(213, 135, 241, 0.55);
		cursor: pointer;
	}
}

.card-img-top {
	padding-top: 1rem;
}

#projects .btn {
	opacity: 0;
}

/* .card.vsat:hover {
	background: url("/img/block_viasat2.png") no-repeat;
}

.card.nike:hover {
	background: url("/img/block_nike2.png") no-repeat;
}

.card.nasa:hover {
	background: url("/img/nasa/img_NASA_PACE_plankton.png") no-repeat;
} */

/* .card.nike:hover .card-body h2,
.card.nike:hover .card-body p {
	color: white !important;
}

.card.vsat:hover .card-body h2,
.card.vsat:hover .card-body p {
	color: white !important;
}

.card.nike:hover .card-body .badge {
	background-color: rgba(255, 255, 255, 0.51);
	border: 1px solid white;
}

.card.nike .card-img-top::before {
	content: url(img/nike/logo/logo_nike_black.svg);
}

.card.nike:hover .card-img-top::before {
	content: url(img/nike/logo/logo_nike.svg);
}

.card-body {
	padding: 1rem;
	border-radius: 20px 20px 0 0;
	margin: 10px 10px 0 10px;
}

.card:hover .card-body {
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	background-color: rgba(255, 255, 255, 0.25);
} */

/* Page: Case Studies */
#role,
#ia,
#dev,
#design {
	background-color: #f7fcff;
	/* background-color: #f2fbff; */
}
.case-title {
	color: var(--nj-grey-dark);
	font-size: 2rem;
	padding-bottom: 20px;
}
.problem,
.solution,
.sol-type,
.prod-type {
	color: var(--nj-grey);
}
.goal {
	font-size: 2rem;
	font-weight: 300;
	color: var(--white);
	padding-top: 10px;
}
.statement {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--white);
	padding-top: 15px;
}
#probs,
#role,
#rd,
#ia,
#wires,
#proto,
#dev,
#design,
#analysis,
#summary {
	padding-top: 40px;
	padding-bottom: 40px;
}

#probs p,
#role p,
#rd p,
#ia p,
#wires p,
#proto p,
#dev p,
#design p,
#analysis p,
#summary p {
	color: var(--nj-md-grey);
	font-weight: 300;
	font-size: 1.25rem;
}

.questions li {
	list-style-type: circle;
	color: var(--nj-md-grey);
	font-weight: 300;
	font-size: 1.25rem;
}

figcaption {
	color: var(--nj-md-grey);
	font-weight: 300;
}

/* Section: Case Studies */
.row.intro {
	padding-bottom: 20px;
}
.row.persona,
.row.journey,
.row.flows {
	padding-top: 27px;
}
.labels {
	font-weight: 300;
	padding-top: 20px;
	color: #848484;
}

/* Section: Cover - Other Pages */
#cover .case-goal {
	animation-duration: 1s;
	animation-delay: 1s;
	-vendor-animation-duration: 1s;
	-vendor-animation-delay: 1s;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 1s;
}
.case-goal {
	padding-bottom: 25px;
	padding-top: 20px;
}
.case-goal p,
.case-goal .disclaimer,
.case-goal .overview {
	color: var(--white);
}
.case-goal .disclaimer {
	padding-top: 25px;
	font-size: 1.125rem;
	font-weight: 400;
}

.case-goal .overview {
	padding-top: 25px;
	font-size: 1.44rem;
	font-weight: 400;
}

.case-goal p {
	font-weight: 300;
}

.case-logo {
	width: 24%;
}

.case-logo.nasa {
	width: 20%;
	height: 20%;
	padding: 1rem 0;
}

figure img {
	width: 100%;
}
figure {
	margin-bottom: 45px;
}
figcaption {
	margin-top: 5px;
}

.post {
	width: 25%;
}
.post-point {
	color: #5bc0de !important;
	font-size: 1.55rem !important;
	padding: 20px 0 20px 0;
	text-align: center;
}
.quote {
	padding: 20px 0 40px 0;
}

/* Section: Role */
.apps ul {
	padding-top: 20px;
	padding-bottom: 20px;
}
.apps ul li {
	display: inline;
}
.apps li img {
	width: 22%; /*width:10%;*/
	padding: 0 34px 0 71px;
}

/* .row.apps.nasa img {
	width: 50%;
} */

.icon-genai {
	border: 4px solid black;
	border-radius: 20px;
	padding: 37px 25px;
	font-size: 2em;
	font-weight: 700;
	max-width: 22%;
	/* margin-left: 95px; */
}

.role-tasks {
	color: var(--nj-md-grey);
	font-weight: 300;
	font-size: 1.25rem;
}

.role-tasks li {
	list-style-type: circle;
}

.meet-personas {
	background-color: var(--white);
	border-radius: 8px;
	padding: 25px 25px;
	margin: 10px 0px 15px 0px;
	box-shadow: var(--nj-box-shadow-blue);
}

.row.persona-roles ul li {
	line-height: 2em;
}

.data-stages {
	margin-left: 30px;
}

/* Section: Research */
#wrap-comp {
	background-color: var(--nj-charcoal);
	margin-top: 15px;
	margin-bottom: 39px;
	padding: 25px 0 25px 0;
}
.comp-icons {
	display: table;
	margin: 0 auto;
}
.comp-icons h4 {
	/*color:#FFFFFF;*/
	font-weight: 300;
	padding-top: 20px;
}
.comp-icons ul {
	padding-top: 20px;
	padding-bottom: 20px;
}
.comp-icons ul li {
	display: inline;
}
.comp-icons li img {
	width: 22%;
	padding: 0 22px 0 30px;
}
.comp-icons.nasa li img {
	width: 15%;
}
.comp-icons.nasa li:nth-child(3) img {
	width: 22%;
}
.points {
	margin-top: 30px;
	margin-bottom: 25px;
}
.points li {
	color: var(--white);
	font-weight: 300;
}
.points ul li {
	list-style-type: circle;
	font-size: 1.25rem;
}
.row.passengers,
.row.airline {
	padding-top: 23px;
}

.cool-stats {
	margin: 0 auto;
}
.stats-level {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.stats-level p {
	text-align: center;
}
.digits {
	border-radius: 50%;
	width: 200px;
	height: 200px;
	background-color: var(--nj-retro-blue);
	margin: 5px 25px 35px 25px;
}

/* Section: IA */

#ia .digits .stats {
	color: #ffffff;
	font-weight: 300;
	font-size: 3.5rem;
	text-align: center;
	padding-top: 59px;
}

#ia ul li {
	color: var(--nj-md-grey);
	font-weight: 300;
	font-size: 1.25rem;
	list-style-type: circle;
	margin-left: 1.5rem;
}

#ia .personas img {
	border-radius: 50%;
	width: 200px;
	height: 200px;
	margin: 25px 25px 0px 25px;
}

/* Section: Research & Discovery (RD) */

#rd-nasa {
	padding-top: 40px;
}

#rd-nasa p {
	color: var(--nj-md-grey);
	font-weight: 300;
	font-size: 1.25rem;
}

#rd-nasa #wrap-comp {
	margin-bottom: 0px;
}

#rd-nasa .digits .stats {
	color: #ffffff;
	font-weight: 300;
	font-size: 3.5rem;
	text-align: center;
	padding-top: 59px;
}

@property --num {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false;
}

.digits {
	counter-reset: num var(--tonum);
}

.digits .stats.ani:after {
	content: counter(num);
}

.zero {
	counter-reset: num var(--num);
}

.animate {
	animation: counter 5s forwards ease-out 0.5s;
}

@keyframes counter {
	from {
		--num: 0;
	}
	to {
		--num: var(--tonum);
	}
}

@media (prefers-reduced-motion: reduce) {
	.digits {
		animation: none !important;
	}
}

.stats.coffee {
	color: #ffffff;
}

/* Section: Analysis */

#analysis {
	background-color: var(--white);
}

#analysis .digits .stats {
	color: #ffffff;
	font-weight: 300;
	font-size: 3.5rem;
	text-align: center;
	padding-top: 43px;
}

#analysis .row.usage,
#analysis .row.scoring,
#analysis .row.next {
	margin: 20px 0 20px 0;
}

/* Section: Honorable Mentions */

#mentions {
	padding-bottom: 40px;
}

/* Section: Summary */

#summary .reflect {
	/* background-color: rgba(255, 255, 255, 0.55); */
	margin: 15px 0 45px 0;
	padding: 0px 20px 0px 20px;
}

#summary #wrap-closing {
	background-color: rgba(255, 255, 255, 0.75);
	margin-top: 15px;
	margin-bottom: 0;
	padding: 25px 0 0 0;
}

#summary .reflect p,
#summary .reflect li {
	color: var(--nj-charcoal);
	font-size: 1.25rem;
	font-weight: 300;
}

#summary .reflect ul li {
	list-style-type: circle;
	margin-left: 1.5rem;
}

/* Section: Results */
#wrap-prod {
	background-color: var(--nj-charcoal);
	margin-top: 15px;
	margin-bottom: 45px;
	padding: 25px 0 25px 0;
}
.our-apps ul {
	padding-top: 20px;
}
.our-apps ul li {
	display: inline;
}
.our-apps li img {
	width: 15%;
}

/*********************************************/

/* Body Animations */

.row.welcome-message,
.row.skill-set,
.row.work {
	animation-duration: 4s;
	animation-delay: 3s;
	-vendor-animation-duration: 4s;
	-vendor-animation-delay: 3s;
	-webkit-animation-duration: 4s;
	-webkit-animation-delay: 3s;
}

/* Body Media Queries */

@media screen and (max-width: 580px) {
	.apps li img {
		width: 38%;
		padding: 21px 18px 0 71px;
	}
}
@media screen and (max-width: 580px) {
	.apps li:nth-child(4) img {
		width: 42%;
	}
}
@media screen and (max-width: 580px) {
	.comp-icons li img {
		width: 38%;
		padding: 26px 22px 0 30px;
	}
}

/*********************************************/

/* Page: About Me & Resume */

#cover-caption\ about {
	background-image: linear-gradient(var(--nj-bg-gradient));
	position: relative;
	top: 9px;
}

#cover .resume-header,
#cover .about-header {
	animation-duration: 1s;
	animation-delay: 1s;
	-vendor-animation-duration: 1s;
	-vendor-animation-delay: 1s;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 1s;
}

#cover .resume-header hr {
	color: rgba(255, 255, 255, 1);
	height: 2px;
}

.resume-header,
.about-header {
	padding: 52px 0 40px 0;
}

.resume-header h2,
.about-header h2 {
	font-weight: 300;
}

/* .profile-intro {
	display: flex;
	margin: 0 auto;
	flex-direction: row;
}

.profile-intro img {
	width: 250px;
	padding-right: 1rem;
	filter: drop-shadow(0 0.2rem 0.3rem rgba(30, 160, 252, 0.55));
} */

.about-header .wrapper {
	width: 100%;
	padding: 0 2rem;
	text-align: center;
}
.polaroid {
	background: #ffffff;
	padding: 1rem;
	box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}

.polaroid > img {
	max-width: 100%;
	height: auto;
}

.greeting {
	font-size: 1.8rem;
	color: var(--nj-purple);
	text-align: center;
	line-height: 2em;
	padding-top: 0.5rem;
}

.profile-intro {
	/*width: 30%;*/
	display: inline-block;
	transform: scale(0.8, 0.8) rotate(5deg);
	transition: all 0.35s;
	animation: reveal 7s;
}

.profile-intro .polaroid:before {
	content: '';
	position: absolute;
	z-index: -1;
	transition: all 0.35s;
	transform: rotate(6deg);
	height: 20%;
	width: 47%;
	bottom: 30px;
	right: 12px;
	box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}

/* .profile-intro:hover {
	filter: none;
	transform: scale(1, 1) rotate(0deg) !important;
	transition: all 0.35s;
} */

/* .profile-intro:hover .polaroid:before {
	content: "";
	position: absolute;
	z-index: -1;
	transform: rotate(0deg);
	height: 90%;
	width: 90%;
	bottom: 0%;
	right: 5%;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
	transition: all 0.35s;
} */

.resume-header .about {
	padding: 25px 0 17px 0;
	font-size: 1.25rem;
	font-weight: 400;
}

.resume-header .overview {
	padding-top: 25px;
	font-size: 1.44rem;
	font-weight: 400;
}

.resume-header .links,
.resume-header .links a {
	color: var(--white);
	font-size: 1.25rem;
	font-weight: 300;
}

.resume-header .statement {
	font-size: 1.55rem;
}

.career li,
.degree li,
.extra li,
.hello li {
	list-style-type: circle;
	font-size: 1.15rem;
	margin-left: 1.5rem;
}

#education,
#activities {
	padding: 25px 0 25px 0;
}

#experience {
	padding-top: 25px;
}

#core p,
#experience p,
#education p,
#activities p,
#introduction p,
#introduction li,
#contact p {
	font-size: 1.15rem;
}

#core p,
#introduction p {
	color: var(--black);
}

#experience ul {
	padding-bottom: 35px;
}

#core,
#introduction {
	margin-top: 35px;
	padding-bottom: 15px;
}

#core .comp,
#introduction .hello {
	padding: 15px 0;
}

.resume-title {
	color: var(--nj-grey-dark);
	font-size: 2rem;
	padding-bottom: 0.75rem;
}

#contact {
	background-image: linear-gradient(var(--nj-bg-gradient));
	height: 145px;
	margin: 20px 0px 25px 0px;
}

#contact h4,
#contact p,
#contact a {
	color: var(--white);
}

.row.call-me {
	padding-top: 39px;
}

/* Page: Gallery */

#cover .gallery {
	animation-duration: 1s;
	animation-delay: 1s;
	-vendor-animation-duration: 1s;
	-vendor-animation-delay: 1s;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 1s;
}
.gallery {
	padding-top: 63px;
	padding-bottom: 47px;
}
.gallery p,
.gallery .disclaimer,
.gallery .overview {
	color: var(--white);
}
.gallery .disclaimer {
	padding-top: 25px;
	font-size: 1.125rem;
	font-weight: 400;
}

.gallery .overview {
	padding-top: 25px;
	font-size: 1.44rem;
	font-weight: 400;
}

.gallery p {
	font-weight: 300;
}

.modal-body figure {
	display: flex;
	justify-content: center;
}

.modal-body figcaption {
	color: var(--nj-grey-dark);
	margin-left: 35px;
}

/* .modal-body figure img {
	max-width: 100% !important;
} */

.modal-body p {
	text-align: center;
}

.modal-body ul li {
	display: inline;
	margin: 0px 5px 0px 0px;
}

.brief {
	margin: 20px 0px 25px 0px;
}

.ai-agent-sub {
	max-width: 45%;
	margin-left: 70px;
}
.brief-show.rwo ul li:nth-child(1) img {
	margin-left: 70px;
}
.brief-show.rwo ul li img {
	max-width: 45%;
}

/* Section: Bento */

#bento-box {
	padding-top: 1px;
	padding-bottom: 40px;
	background-color: #f1f5f7;
}

#bento-box h1 {
	color: var(--nj-purple);
}

.bento-inner {
	padding-top: 1rem;
}

.bento-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	color: var(--black);
	height: 350px;
	border-radius: 1rem;
	transition: transform 0.3s ease;

	&:hover {
		transform: scale(1.05);
		filter: drop-shadow(0 0.5rem 0.1rem rgba(75, 205, 226, 0.55));
	}

	img {
		max-width: 75%;
		border-radius: 1rem;
		padding: 0.5 rem;
	}
}

.bento-link {
	text-decoration: none;
}

.bento-large {
	height: 500px;
}

article {
	background-color: var(--white);
	color: var(--black);
	padding: 1rem;
	margin-bottom: 1rem;
}

article figure {
	margin: 0;
}

article img {
	display: block;
	width: 100%;
}

main {
	background-color: #f2fbff;
	padding-top: 40px;
	padding-bottom: 40px;
	width: 90%;
	max-width: 1200px;
	margin-inline: auto;
	padding-block-start: 2rem;
	border-radius: 1rem;
}

#bento {
	--bento-cols: 4;
	--bento-rows: 3;
	--bento-border-radius: 1rem;
	--bento-gap: 1rem;
	display: grid;
	grid-template-columns: repeat(var(--bento-cols), 1fr);
	grid-template-rows: repeat(var(--bento-rows), 1fr);
	width: 100%;
	aspect-ratio: var(--bento-cols) / var(--bento-rows);
}

#bento a {
	text-decoration: none;
}

.halo {
	z-index: 3;
	width: 135px;
	height: 200px;
	margin-top: 54px;
	position: absolute;
	border: solid 1px rgba(255, 255, 255, 0.66);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	background-color: rgba(255, 255, 255, 0.15);
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.35),
		inset 0 0 14px rgba(255, 255, 255, 0.45),
		inset 0 0 6px rgba(255, 255, 255, 0.25),
		0 4px 30px rgba(0, 0, 0, 0.1);
}

.halo-blur {
	z-index: 2;
	position: relative;
	top: 10px;
	max-height: 222px;
}

.halo-text {
	z-index: 4;
	position: relative;
	top: 30px;
}

.logo-rwo {
	z-index: 4;
	position: relative;
	top: -10px;
	border-radius: 0rem !important;
}

.halo.nasa {
	z-index: 3;
	position: absolute;
	width: 350px;
	margin-top: 0px;
	border: solid 1px rgba(255, 255, 255, 0.66);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	background-color: rgba(255, 255, 255, 0.15);
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.35),
		inset 0 0 14px rgba(255, 255, 255, 0.45),
		inset 0 0 6px rgba(255, 255, 255, 0.25),
		0 4px 30px rgba(0, 0, 0, 0.1);
}

.halo-blur.nasa {
	z-index: 2;
	position: relative;
	max-height: 100%;
	top: -88px;
}

.logo-nasa-port {
	z-index: 4;
	position: relative;
	top: 198px;
	width: 200px;
}

.feature-area .bento-item {
	background-image: linear-gradient(var(--nj-bg-gradient));
	transition: none;

	&:hover {
		transform: none;
		filter: none;
	}
}

.feature-area .bento-item h5 {
	color: var(--white);
}

.bento-float-1 {
	position: relative;
	left: 94px;
	opacity: 75%;
	font-size: 5rem;
}

.bento-float-2 {
	position: relative;
	left: 177px;
	opacity: 75%;
	font-size: 4rem;
}

.bento-float-3 {
	position: relative;
	left: 134px;
	opacity: 75%;
	font-size: 5rem;
}

.bento-float-4 {
	position: relative;
	left: 232px;
	opacity: 75%;
	font-size: 4.3rem;
}

.bento-float-5 {
	position: absolute;
	left: 221px;
	opacity: 23%;
	font-size: 8rem;
}

/* .overlay-click-video {
	z-index: 3;
	position: relative;
	width: 558px;
	height: 55px;
	top: 663px;
	left: 73px;
	text-align: center;
	color: var(--black);
	background-color: var(--white);
	opacity: 0.25;
} */

/* #bento > * {
	overflow: hidden;
	position: relative;
	margin: calc(var(--bento-gap) / 2);
	border-radius: var(--bento-border-radius);
}

#bento > :nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
	/*background-color: var(--important-color);
	color: var(--light-color);
}

#bento > :nth-child(2) {
	grid-row: span 2;
	/*background-color: var(--secondary-color);
	color: var(--light-color);
}

#bento > :nth-child(n + 9) {
	display: none;
}
*/

/*********************************************/

/* Bento Animations */

#bento > * {
	transition:
		transform 0.3s ease-out,
		filter 0.3s ease-out;
}

#bento > *:hover {
	transform: translateY(-0.5rem);
	filter: drop-shadow(0 0.5rem 0.1rem rgba(75, 205, 226, 0.55));
}

/* Bento Media Queries */

@media screen and (aspect-ratio < 1) {
	#bento {
		--bento-cols: 2;
		--bento-rows: 5;
	}
}

/* Rive Animations */

.feature-ani {
	position: relative;
	top: 175px;
	left: -175px;
}

/*********************************************

Footer

*********************************************/

#footer {
	height: 30px;
}
#footer ul {
	margin: 0 auto;
}
#footer li {
	color: var(--nj-retro-blue);
	display: inline;
}

/* Footer Animations */

.heart .material-icons {
	color: var(--nj-purple);
	position: relative;
	z-index: 2;
	-webkit-animation: h 1.33s ease-in-out infinite;
	padding: 0 5px 0 5px;
	animation: h 1.33s ease-in-out infinite;
	padding: 0 5px 0 5px;
	overflow: hidden;
	top: 5px;
}
@-webkit-keyframes h {
	0% {
		-webkit-transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.8);
	}
	100% {
		-webkit-transform: scale(1);
	}
}
@keyframes h {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}
/* Footer Media Queries */

@media screen and (max-width: 1000px) {
	#footer li:first-child,
	#footer li:nth-child(2) {
		padding-right: 50px;
	}
}
@media screen and (max-width: 480px) {
	#footer li:first-child,
	#footer li:nth-child(2) {
		padding-right: 20px;
	}
}
@media screen and (max-width: 480px) {
	#footer li {
		font-size: 12px;
	}
}
@media screen and (max-width: 480px) {
	.motto {
		display: block;
	}
}
@media screen and (max-width: 480px) {
	#footer li:nth-child(3) {
		text-align: center;
	}
}

/*********************************************/