html.colors {
	--text-color-bright: black;
	--text-color: black;
	--primary-hsl: hsl(0, 0%, 94%);
	--secondary-hsl: hsl(0, 0%, 100%);
	--tertiary-hsl: hsl(0, 0%, 100%);
	--orange-hs: 43, 100%;
	--light-clr: hsl(0, 0%, 90%);
}

html.entities {
	--header-button-hover-color: hsla(var(--orange-hs), 80%, 60%);
	--header-background-color: var(--secondary-hsl);
	--header-text-color: var(--text-color);
	--header-box-shadow: 0rem 0.1rem 0.6rem 0rem rgb(0 0 0 / 0.3);
	--footer-box-shadow: 0rem -0.1rem 0.3rem 0rem rgb(0 0 0 / 0.4);
	--sidebar-box-shadow: 0.2rem 0rem 1rem 0rem rgb(0 0 0 / 0.2);
	--sidebar-clip-path: inset(0px -1rem 0px 0px);

	--card-box-shadow: 0em 0.3em 0.5em 0.05em hsla(0, 0%, 0%, 20%);

	--card-image-box-shadow-distance: 0.1em;
	--card-image-box-shadow: inset var(--card-image-box-shadow-distance) var(--card-image-box-shadow-distance) calc(var(--card-image-box-shadow-distance) * 2) hsl(0, 0%, 0%, 18%),
            				inset calc(-1 * var(--card-image-box-shadow-distance)) calc(-1 * var(--card-image-box-shadow-distance)) calc(var(--card-image-box-shadow-distance) * 2) hsl(0, 0%, 90%, 3%);
	--card-box-shadow: 0em 0.3em 0.5em 0.1em hsla(0, 0%, 0%, 20%);
	--card-shadow-gradient: linear-gradient(145deg, hsl(0, 0%, 0%, 10%), transparent);
	--transparent-background-color: hsl(0, 0%, 90%);

	--wave-color-primary: #e99f59;
	--wave-color-secondary: #8e74ae;
}

html {
	--header-height: clamp(3rem, 14vw, 4rem);
	/* --header-height: 4rem; */
	font-family: Arial, Helvetica, sans-serif;
	scroll-padding: var(--header-height);
	scroll-behavior: smooth;
	line-height: 1.6em;
	margin: 0;
}

@media (prefers-color-scheme: dark) {
	html.colors {
		--primary-hsl: hsl(230.5, 29%, 10%);
		/* --secondary-hsl: hsl(230.5, 22.4%, 17%); */
		--secondary-hsl: hsl(232, 26.3%, 12.2%);
		--tertiary-hsl: hsl(230.5, 22.4%, 22%);

		--border-color: hsl(0, 0%, 12%);
		--text-color-bright: hsl(0, 0%, 100%);
		--text-color: hsl(0, 0%, 98%);
		--light-clr: hsl(230.5, 22.4%, 18%);
	}
	html.entities {
		--header-button-hover-color: var(--tertiary-hsl);
		--transparent-background-color: hsl(230.5, 22.4%, 14%, 100%);
		--card-image-border-color: var(--light-clr);

		--card-shadow-gradient: linear-gradient(145deg, hsl(0, 0%, 0%, 90%), transparent);
		--card-image-box-shadow-distance: 0.0em;
		--card-image-box-shadow: inset var(--card-image-box-shadow-distance) var(--card-image-box-shadow-distance) calc(var(--card-image-box-shadow-distance) * 2) hsl(0, 0%, 0%, 35%),
								inset calc(-1 * var(--card-image-box-shadow-distance)) calc(-1 * var(--card-image-box-shadow-distance)) calc(var(--card-image-box-shadow-distance) * 2) hsl(0, 0%, 90%, 1%);
		--wave-color-primary: #cf643c;
		--wave-color-secondary: #695a87;
	}
}

@media (prefers-color-scheme: light) {
	.wave-shape-container {
		filter: brightness(130%);
	}
}



body {
	background-color: var(--primary-hsl);
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

h1 {
	color: var(--text-color-bright)
}

h2,
h3,
a,
span {
	color: var(--text-color);
	padding: 0;
	margin: 0;
}

h1 {
	margin-bottom: 1em;
}


/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Header */

header {
	background-color: var(--header-background-color);
	box-shadow: var(--header-box-shadow);
	position: fixed;
	width: 100%;
	height: var(--header-height);
	display: flex;
	z-index: 10;
}

#topbar-navigation {
	position: absolute;
	align-items: center;
	align-self: center;
	display: inherit;
	margin: auto;
	width: 100%;
	padding: 0;
}

#topbar-navigation > li {
	display: flex;
}

#topbar-navigation > .navigation-button {
	--button-margin: calc(var(--header-height) / 8);
	margin: 0 var(--button-margin) 0 var(--button-margin);
	font-size: calc(var(--header-height) / (10/3));
	border-radius: 6px;
	transition: background-color 100ms ease;
}

#topbar-navigation > .navigation-button:hover {
	/* background-color: rgb(0 0 0 / 10%); */
	background-color: var(--header-button-hover-color);
}

#topbar-navigation > .navigation-button > a {
	color: var(--header-text-color);
	padding: calc(var(--header-height) / 8);
}

#topbar-navigation .sidebar-button {
	margin-left: calc(var(--header-height) / 3);
	height: calc(var(--header-height) / 1.7);
	width: calc(var(--header-height) / 1.7);
	fill: var(--header-text-color);
	display: none;
}

#topbar-navigation .sidebar-button > a {
	width: inherit;
	height: inherit;
}

.profile-icon {
	height: calc(var(--header-height) / 1.7);
	width: calc(var(--header-height) / 1.7);
	padding-right: calc(var(--header-height) / 2);
	padding-left: calc(var(--header-height) / 2);
	position: relative;
	pointer-events: none;
}


/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

#sidebar-navigation {
	background: var(--header-background-color);
	height: calc(100% - var(--header-height));
	box-shadow: var(--sidebar-box-shadow);
	clip-path: var(--sidebar-clip-path);
	margin: var(--header-height) 0 0 0;
	padding: 1rem 1rem 0 1rem;
	list-style-type: none;
	pointer-events: none;
	position: fixed;
	display: none;
	opacity: 0;
	z-index: 11;

	transform: translateX(-50%);
	transition: transform 200ms ease, opacity 200ms ease;
}

#sidebar-navigation.isOpened {
	transform: translateX(0);
	pointer-events: all;
	opacity: 1;
}

#sidebar-navigation > li {
	background: var(--header-background-color);
	margin-bottom: 0.5rem;
	border-radius: 6px;
	font-size: 1.1rem;
	display: flex;

	transition: background-color 100ms ease;
}

#sidebar-navigation > li:hover {
	background-color: var(--header-button-hover-color);
}

#sidebar-navigation > li > a {
	padding: 0.5rem 4rem 0.5rem 0.5rem;
	color: var(--header-text-color);
	
	transition: padding 200ms ease;
}

#sidebar-navigation > li:hover > a {
	padding: 0.5rem 3.5rem 0.5rem 1rem;
}


/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

#page {
	padding-top: calc(var(--header-height));
	overflow: hidden;
	width: 100%;
}

.wave-shape-container {
	width: max(100vw, 50vh);
	position: relative;
	line-height: 0;
	left: 50%;
	transform: translateX(-50%);
	/* display: grid; */
}

#creations-container {
	width: calc(100% - 4em);
	max-width: 1080px;
	margin: auto;

	/* background-color: hsl(0, 0%, 100%, 1%); */
	border-radius: 1em;
	padding: 2em;

	flex-direction: column;
	display: flex;
}


/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Cards */

.card-container {
	--gap-size: 1.5em;
	--grid-size: calc(40em / 2.4 - var(--gap-size));
	--image-aspect-ratio: 1 / 1;

	grid-template-columns: repeat(auto-fit, minmax(var(--grid-size), auto));
	justify-content: start;
	gap: var(--gap-size);
	display: grid;
}

.card-button .open-new-tab {
	transition: opacity 100ms ease;
}

.card-button {
	--card-border-radius: 0.5em;
	border: 1px solid var(--card-image-border-color);
	background: --card-shadow-gradient;
	background-color: var(--secondary-hsl);
	border-radius: var(--card-border-radius);
	position: relative;
	padding: 1em;
	display: block;
	max-width: var(--grid-size);

	transition: transform 200ms ease;
}

.card-button span,
.card-button li {
	color: var(--text-color);
	font-size: 1em;
	opacity: 0.7;
}

a.card-button:before {
	box-shadow: var(--card-image-box-shadow);
	opacity: 1;
}

a.card-button:after {
	box-shadow: var(--card-box-shadow);
}

a.card-button:hover,
a.card-button:focus-visible {
	transform: scale(105%);
}

a.card-button:hover:after,
a.card-button:focus-visible:after {
	opacity: 1;
}

a.card-button:hover:before,
a.card-button:focus-visible:before {
	opacity: 0
}

.card-container:not(.wide) .card-icon-frame {
	border-radius: calc(var(--card-border-radius) / 3);
	background: hsl(0, 0%, 0%, 10%);
	aspect-ratio: 1 / 1;
}

.card-icon-frame.drop-shadow:after {
	box-shadow: var(--card-image-box-shadow);
	height: 100%;
	width: 100%;
	opacity: 1;
}

.card-icon-frame > img {
	border-radius: inherit;
	object-fit: cover;
	display: flex;
	height: 100%;
	width: 100%;
}

.card-title-container {
	margin: 0.6em 0 0.3em 0;
}


/* wide cards */
.card-container.wide {
	--grid-size: 1fr;
	--image-aspect-ratio: 2 / 1;
	grid-template-columns: repeat(2, 1fr);
}

/* @media (min-width: 637px) {
	.card-container.wide {
		grid-template-columns: repeat(2, 1fr);
	}
} */

@media (max-width: 650px) {
	.card-container.wide {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) and (max-aspect-ratio: 2 / 3) {
	#topbar-navigation > .navigation-button {
		display: none;
	}

	/* Hiding our profile icon */
	#topbar-navigation > li:nth-child(2) {
		display: none;
	}
	
	#topbar-navigation > .sidebar-button {
		display: flex;
	}

	#sidebar-navigation {
		display: block;
	};

	#fullscreen-cover[ownerid="sidebar-navigation"] {
		display: block;
	}
}


.card-container.wide .card-button {
	padding: 0em;
	max-width: none;
}

.card-container.wide .card-button ul {
	margin-top: 0em;
}

.card-container.wide .card-icon-frame {
	border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
	background: hsl(0, 0%, 0%, 10%);
	aspect-ratio: 2 / 1;
}

.card-container.wide .card-title-container {
	margin-left: 1rem;
}

.card-container.wide .card-title-container,
.card-container.wide .card-button li {
	margin-right: 1rem;
}



/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */


.drop-shadow:after,
.inset-shadow:before {
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	position: absolute;
	pointer-events: none;
	border-radius: inherit;
	transition: opacity 200ms ease;
}


/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

a:link,
a:visited {
	color: rgb(29, 155, 240);
	text-decoration: none;
}

a:link:hover,
a:visited:hover {
	color: rgb(70, 181, 255);
}


footer {
	overflow: hidden;
	width: 100%;
}

#social-media-container {
	--column-size: 2rem;
	grid-template-columns: repeat(3, var(--column-size));
	gap: calc(var(--column-size) * 1.5);
	justify-content: center;
	align-items: center;
	display: grid;

	background-color: var(--secondary-hsl);
	box-shadow: var(--footer-box-shadow);
	position: relative;
	margin: auto;
	height: 8rem;
}

.social-icon {
	height: var(--column-size);
	width: var(--column-size);
}

.social-icon path {
	fill: var(--text-color);
	transition: fill 150ms ease;
}

.social-icon:hover path,
.social-icon:focus-visible path {
	stroke: rgb(0 0 0 / 0.1);
	stroke-width: 1px;
	fill: var(--clr);
}


#fullscreen-cover {
	/* --blur-px: calc(max(100vw, 100vh) / 1000);
	-webkit-backdrop-filter:blur(var(--blur-px));
	backdrop-filter: blur(var(--blur-px)); */
	background: rgb(0 0 0 / 0.6);
	position: fixed;
	display: none;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 9;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

#fullscreen-cover.active {
	pointer-events: all;
	opacity: 1;
}
/* 

#fullscreen-cover:focus-visible {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 4px solid red;
} */


.material-symbols-text {
	transform: translateY(11.5%);
}