* {
	box-sizing: border-box;
}

html, body {
	margin: 0px;
	padding: 0px;
	font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0px;
}

.navbar-toggler {
	outline: none!important;
	box-shadow: none!important;
	border: 0px!important;
}

#main-header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	border-bottom: 1px solid #fff;
	z-index: 10;
	backdrop-filter: blur(20px);
	background-color: rgba(255, 255, 255, 0.2);
}

#h-nav {
	display: flex;
}

#h-nav > div {
	flex: 1 1 auto;
}

#h-menu {
	text-align: right;
}

#h-menu > ul {
	padding: 0px;
	margin: 0rem;
}

#h-menu > ul > li {
	display: inline-block;
}

@media screen and (min-width: 577px) {
	#h-menu > ul > li:not(:first-child) {
		padding-left: 10px;
		display: inline-block;
	}
}

@media screen and (max-width: 576px) {
	#h-menu > ul > li:not(:last-child) {
		padding-bottom: 10px;
	}
}

#h-menu > ul > li > a {
	color: #333;
	text-decoration: none;
}

.theme-btn {
	position: relative;
	top: -1px;
}

[data-bs-theme=dark] #h-menu > ul > li > a {
	color: #dee2e6;
	text-decoration: none;
}

#h-menu > ul > li > a:hover {
	text-decoration: underline;
}

pre {
	margin-bottom: 0px;
}

.text-orange {
	color: var(--d-orange);
}

.text-pink {
	color: var(--d-pink);
}

.text-yellow {
	color: var(--d-yellow);
}

.text-green {
	color: var(--d-green);
}

.border-orange {
	border-color: var(--d-orange)!important;
}

.border-pink {
	border-color: var(--d-pink)!important;
}

.border-yellow {
	border-color: var(--d-yellow)!important;
}

.border-green {
	border-color: var(--d-green)!important;
}

.btn-green {
	background-color: var(--d-green);
	border-color: var(--d-green);
	color: #f8f9fa;
}

.btn-green:hover,
.btn-green:active {
	background-color: var(--d-green);
	color: #f8f9fa;
}

.btn-green-light {
	background-color: var(--d-green-light);
	border-color: var(--d-green);
	color: var(--d-green);
}

.btn-green-light:hover,
.btn-green-light:active {
	background-color: var(--d-green) !important;
	color: #f8f9fa !important;
}

.custom-separator > div {
	border-width: 2px!important;
	border-style: solid!important;
}

.bg-orange,
.section-title[data-square=orange]::before {
	background-color: var(--d-orange);
}

.bg-pink,
.section-title[data-square=pink]::before {
	background-color: var(--d-pink);
}

.bg-yellow,
.section-title[data-square=yellow]::before {
	background-color: var(--d-yellow);
}

.bg-green,
.section-title[data-square=green]::before {
	background-color: var(--d-green);
}

.section-button[data-color=green] {
	background-color: var(--d-green-light)!important;
	color: var(--d-green)!important;
	text-decoration: none;
}

.section-button[data-color=orange] {
	background-color: var(--d-orange-light)!important;
	color: var(--d-orange)!important;
	text-decoration: none;
}

.section-button[data-color=pink] {
	background-color: var(--d-pink-light)!important;
	color: var(--d-pink)!important;
	text-decoration: none;
}

.section-button[data-color=yellow] {
	background-color: var(--d-yellow-light)!important;
	color: var(--d-yellow)!important;
	text-decoration: none;
}

.section-button[data-color=green].active {
	border-color: var(--d-green);
}

.section-button[data-color=orange].active {
	border-color: var(--d-orange);
}

.section-button[data-color=pink].active {
	border-color: var(--d-pink);
}

.section-button[data-color=yellow].active {
	border-color: var(--d-yellow);
}

.section-button[data-color=green].active {
	border-color: var(--d-green);
}

.section-title {
	font-size: 3rem;
}

.section-title::before {
	content: '';
	display: inline-block;
	height: 20px;
	width: 20px;
	/* Default color  */
	background-color: var(--d-orange);
	border-radius: 5px;
	position: relative;
	top: -8px;
	margin-right: 10px;
	transition-property: background-color;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.code-container > pre > code {
	padding: 15px;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
}

.sublevel::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #666;
	border-left: 2px solid #666;
	margin-right: 5px;
	position: relative;
	top: -4px;
}

/* #section-values {
	background-image: url(/src/img/dots-bg.png);
	background-position: center;
	background-repeat: no-repeat;
} */

#cookie-bar,
.rainbow-bg {
	background: rgb(255, 255, 255);
	background: linear-gradient(135deg, var(--d-orange) 0%, var(--d-pink) 25%, var(--d-green) 50%, var(--d-yellow) 100%);
}

.swiper-slide {
	height: auto;
}

#cookie-bar {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	color: #fff;
	z-index: 1000;
}

#cookie-bar .cookie-bar-dismiss {
	cursor: pointer;
}

footer a {
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}