.double-shadow::before,
.double-shadow::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 75%;
	box-shadow: 0 0 50rem 0rem var(--color-white) smoke;
	z-index: -1;
	border-radius: 2rem;
}

.double-shadow::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 25%;
	width: 50%;
	height: 75%;
	box-shadow: 0 0 50rem 0rem var(--color-white) smoke;
	z-index: -1;
	border-radius: 2rem;
}

.circle-shadow::before {
	content: "";
	position: absolute;
	top: 25%;
	right: 25%;
	width: 50%;
	height: 50%;
	box-shadow: 0 0 20rem 5rem var(--color-secondary);
	border-radius: 100%;
	z-index: -1;
}

.bg-secondary {
	background-color: var(--color-secondary);
}

.is-rounded {
	border-radius: 2rem;
}

.has-shadow-inset {
	box-shadow: inset 0 0 1rem 0.5rem rgba(0, 0, 0, 0.01);
}

.pointer {
	cursor: pointer;
}

.is-fullheight {
	height: 100%;
}

.is-fullwidth {
	width: 100%;
}

.has-border-secondary {
	border: 1px solid var(--color-secondary);
}

.has-outline-secondary {
	outline: 0.25rem solid var(--color-secondary);
}

.has-border-white {
	border: 1px solid var(--color-white);
}

.outline-on-hover:hover {
	outline: 0.25rem solid var(--color-secondary);
}

.box-shadow-on-hover:hover {
	box-shadow: 0 0 2rem -0.25rem var(--color-secondary);
}

.curly-braced {
	border: 1px solid var(--color-secondary);
	border-top: none;
	border-bottom: none;
}

.apears-on-container-hover {
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.apears-on-container-hover-container:hover .apears-on-container-hover {
	transition-delay: 0.25s;
	opacity: 1;
}

.greyscale-saturate-on-hover {
	filter: grayscale(1);
}

.greyscale-saturate-on-hover:hover {
	filter: grayscale(0);
}

.cursor-pointer {
	cursor: pointer;
}

.header-color {
	color: var(--color-primary);
	font-family: var(--font-family-secondary) !important;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.link {
	color: var(--color-primary);
	font-weight: bold;
}

.link:hover {
	text-decoration: underline;
}

.title {
	color: black;
}

.font-primary {
	font-family: var(--font-family-primary) !important;
}

.font-secondary {
	font-family: var(--font-family-secondary) !important;
}

.font-triary {
	font-family: var(--font-family-triary) !important;
}

.gradient-text {
	background-image: linear-gradient(45deg, blue, var(--color-primary), rgb(55, 0, 185));
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
}

.border-primary {
	border: 1px solid var(--color-primary) !important;
}

hr.border-primary {
	border-color: var(--color-primary) !important;
}

.is-size-0 {
	font-size: 4rem;
}

.gradient-bg {
	background-image: linear-gradient(45deg, blue, var(--color-primary), rgb(55, 0, 185));
	background-size: 100%;
}

.gradient {
	background: linear-gradient(-2deg, #ebebef, transparent, #ebebef);
}

.bg-black {
	background-color: var(--color-black);
	color: var(--color-white);
}

.bg-white {
	background-color: var(--color-white);
	color: var(--color-black);
}

.title {
	color: inherit;
}

.cursor-hand {
	cursor: grab;
}

.unselectable {
	user-select: none;
}

.hover-underline:hover {
	text-decoration: underline;
}

.is-square {
	aspect-ratio: 1/1;
}

.is-panoramic {
	aspect-ratio: 16/9;
}

.bg-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.is-circle {
	border-radius: 100%;
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
}

.is-square {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
}

.overflow-hidden {
	overflow: hidden;
}

.overflow-scroll {
	overflow: scroll;
}

.has-shadow {
	box-shadow: 0 0 2rem -1.5rem black;
}

.brighter-on-hover:hover {
	filter: brightness(1.2);
}

.little-brighter-on-hover:hover {
	filter: brightness(1.05);
}

.is-absolute {
	position: absolute;
}

.has-color-secondary {
	color: var(--color-secondary);
}

.is-fullscreen {
	width: 100dvw;
	height: 100vh;
}

@media (max-width: 768px) {
	.is-fullscreen {
		height: calc(100lvh - 2rem);
	}
}

.color-white {
	color: var(--color-white);
}

.opaque {
	opacity: 0.5;
}

.is-text-light {
	font-weight: 300;
}

.color-black {
	color: var(--color-black);
}

.text-300 {
	font-weight: 300;
}

.debug {
	border: 1px solid red;
}
