_guides.scss

/* ==========================================================*/

/* Hero Section */

/* ==========================================================*/

.header-container--guides {
	position: relative;
	text-align: center;
    padding: 0;	
}

.hero-left--guides {
	position: absolute;
	inline-size: 407px;
	text-align: center;
	color: $color-white;
	font-weight: bold;
	left: 11%;
	top: 35%;
}


.hero-left--guides h1 {
    font-size: 2.8rem;
}

.page-hero--guides {
	background-size: cover !important;
	background-color: $color-white;
	display: flex;
	margin-top: 29px;
	width: 100vw;
}

.hero-heading--guides {
	text-decoration: underline;
	text-decoration-color: $color-red;
}

/* ==========================================================*/

/* In This Guide Section */

/* ==========================================================*/

.guide-links a {
	color: $color-red;
}

.guide-links ul {
	color: #000;
	list-style-type: disc;
}
 

/* ==========================================================*/

/* Content */

/* ==========================================================*/

.card-primary--guides {
	background-color: $color-white;
}

.page-content-container-grid--guides {
	display: grid;
	margin-left: 100px;

}

img {
	max-width: 100%;
}

img[src*='#content'] {
    margin-top: 24px;
}

img[src*='#examples'] {
    width: 588.2px;
}

/* Scroll to Top Button - Only Visible on Mobile*/
#return-to-top {
	visibility: hidden;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: $color-red;
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 35px;
	font-size: 18px;
}

/* Sticky Navigation */

.sticky-nav-container--guides {
	position: absolute;
	float: right;
    right: 100px;
	margin-top: 64px;
}

/* This adjustment is so that the page scrolls to the correct place when you hit the nav links */

.stick-it--guides {
	position: relative;
}

.sticky-nav--guides {
	background: $color-white;
	border: 0px solid rgba(51, 51, 51, 0.06);
	border-radius: 16px;
	box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
	width: 288px;
	padding: 35px 30px 35px 30px;
}

/* Style the sticky nav links */

.sticky-nav--guides > ul > li > a {
	font-weight: bold;
}

.sticky-nav--guides li {
	list-style-type: none;
	position: relative;
	margin-bottom: 15px;
	margin-top: 15px;
}

.sticky-nav--guides a {
	color: $color-red;
	text-decoration: none;
}

.sticky-nav--guides ul {
	padding: 0 0 0 20px;
}

/*  Make the active link different */
.is-active {
	font-weight: 700;
	color: $color-darkblue !important;
	text-decoration: none;
}
.is-active a {
	font-weight: 700;
}

.is-active a:link,
.is-active a:visited,
.is-active a:hover,
.is-active a:active,
.is-active a:focus {
	color: $color-darkblue;
}
.is-active::before {
	position: absolute;
	content: "\25C0";
	font-size: 10px;
	margin-left: -35px;
	margin-top: 5px;
	text-decoration: none;
}

.overview--guides {
	margin-top: 64px;
}

.page-card--guides {
	overflow: hidden;
	border: 0 solid rgba(51, 51, 51, 0.06);
	border-radius: 16px;
	padding: 48px;
	height: fit-content;
	max-width: 896px;
	box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
	margin-bottom: 48px;
}

/* ==========================================================*/

/* Guide Authors */

/* ==========================================================*/


.authors-container {
	display: grid;
	grid-template-columns: 0.3fr 1fr;
	grid-gap: 20px;
	margin-bottom: 32px;
	margin-top: 20px;
}

.authors-profile {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.authors-profile > a {
	margin-right: 28px;
}

.authors-profile img {
	border-radius: 50%;
}

.authors-contact {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.author-img-placeholder {
	background-color: #efefef;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

/*  Social Media Icons */
.fa-icons {
	display: flex;
	justify-content: center;
}

.fa {
	font-size: 30px;
	width: 50px;
	text-align: center;
	text-decoration: none;
	color: #000000;
}

.fa:hover {
	opacity: 0.7;
}

/* Populates an empty div for Users with no Github Link */
.no-github {
	padding: 10px;
	margin: 15px;
}

/* Populates an empty div for Users with no LinkedIn Link */
.no-linked-in {
	padding: 10px;
	margin: 15px;
}