@import "./global.css";

body {
	background-color: var(--clr-accent-300);
}

a {
	text-decoration: none;
}

.section {
	padding-top: 10vh;
	padding-bottom: 10vh;
}

.section-primary {
	background-color: var(--clr-accent-300);
}

.section-secondary {
	background-color: var(--clr-accent-100);
}

.section-heading {
	color: var(--clr-heading);
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	font-size: var(--fs-450);
	position: relative;
	padding-bottom: 5px;
	text-shadow: rgba(78, 186, 191, 0.1) 0 0 2px,
		rgba(78, 186, 191, 0.3) 4px 5px 0,
		rgba(78, 186, 191, 0.2) 7px 11px 0,
		rgba(78, 186, 191, 0.1) 12px 17px 0,
		rgba(78, 186, 191, 0.05) 17px 23px 0
}

/* .section-heading:before {
	width: 28px;
	height: 5px;
	display: block;
	content: "";
	position: absolute;
	bottom: 3px;
	left: 50%;
	margin-left: -14px;
	background-color: var(--clr-accent-700);
}

.section-heading:after {
	width: 100px;
	height: 1px;
	display: block;
	content: "";
	position: relative;
	margin-top: 10px;
	left: 50%;
	margin-left: -50px;
	background-color: var(--clr-accent-700);
} */

.section-sub-heading {
	color: var(--clr-sub-heading);
	font-size: var(--fs-350);
}

.content {
	max-width: 1250px;
}

.content-primary {
	background-color: var(--clr-accent-300);
}

.content-secondary {
	background-color: var(--clr-accent-100);
}

/* RollUp */
#rollUp {
	display: none;
	position: fixed;
	z-index: 10;
	bottom: 0;
	right: 0;
	margin: 15px;
	text-decoration: none;
	box-shadow: 0 0 5px 1px rgb(0 0 0 / 50%) !important;
}

#rollUp.scroll {
	display: flex;
}

#rollUp.btn {
	background-color: var(--clr-accent-700);
	height: 6vh;
	width: 6vh;
	justify-content: center;
	align-items: center;
}

/* Toggle Theme */
#toggle-theme {
	position: fixed;
	border: 0;
	z-index: 10;
	bottom: 0;
	left: 0;
	margin: 15px;
	text-decoration: none;
	box-shadow: 0 0 5px 1px rgb(0 0 0 / 50%) !important;
}

#toggle-theme.scroll {
	display: flex;
}

#toggle-theme {
	background-color: var(--clr-accent-700);
	height: 6vh;
	width: 6vh;
	justify-content: center;
	align-items: center;
}

/* scrollbar */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(78, 186, 191, 0.3);
	background-color: var(--clr-accent-300);
}

::-webkit-scrollbar {
	width: 6px;
	background-color: var(--clr-accent-700);
}

::-webkit-scrollbar-thumb {
	background-color: var(--clr-accent-700);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--clr-accent-800);
}

/* media query */
@media (max-width: 1200px) {}

@media (max-width: 945px) {}

@media (max-width: 780px) {
	.section-heading {
		font-size: var(--fs-400);
	}
}

@media (max-width: 550px) {
	.section-sub-heading {
		font-size: var(--fs-300);
	}

	.section {
		padding-top: 7.3vh;
		padding-bottom: 7vh;
	}
}

@media (max-height: 750px) {
	.section {
		padding-top: 9.2vh;
	}

	#rollUp.btn,
	#toggle-theme {
		height: 7vh;
		width: 7vh;
	}
}