@font-face {
	font-family: Quicksand;
	src: url("./assets/fonts/Quicksand.ttf") format("truetype");
}

:root {
	--bg-main-c: hsla(0, 0%, 0%, 1);
	--font-main-c: hsl(0, 0%, 10%, 1);

	--font-color-rev: hsla(0, 0%, 95%, 1);
	--font-color: hsla(0, 0%, 15%, 1);
	--entry-bg: hsla(0, 0%, 95%, 1);

	--border-top: clamp(1px, 1vw, 0.2rem) solid hsla(0, 0%, 10%, 1);
	--opened-entry-h: 50vh;
	--hugetext-size: clamp(1.5rem, 5vw, 2.5rem);

	/* Product App Color */
	--altweb-c: hsl(213, 4%, 40%);
	--muni-c: hsl(239, 40%, 30%);
	--yatya-c: hsl(33, 80%, 50%);
	--blanktab-c: darkslategray;
	--simpletimer-c: hsl(145, 55%, 40%);
	--readmelater-c: hsl(33, 48%, 66%);
	--batchactions-c: hsl(209, 55%, 45%);
	--search-c: hsl(210, 9%, 21%);
	--cpu-c: hsl(192, 18%, 33%);
	--todobot-c: hsl(155, 75%, 42%);
	--ecostore-c: hsl(189, 75%, 42%);
	--canimator-c: hsl(298, 50%, 37%);
	--muralcalc-c: hsl(133, 49%, 26%);
	--invsys-c: hsl(0, 0%, 55%);

	color-scheme: light;
	scrollbar-width: none;
}

body {
	background-color: var(--bg-main-c);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;

	font-family: Quicksand, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: clamp(1rem, 1.2vw, 2rem);
	line-height: 1.6;
	user-select: none;
}

.click-entry {
	height: var(--opened-entry-h) !important;
	color: var(--font-color-rev) !important;
	.app-info {
		display: flex;
		.info {
			entry-links {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

.huge-text,
entries-category,
vertical-divider,
text-entry {
	white-space: nowrap;
	font-weight: 400;
	line-height: 1;
	letter-spacing: clamp(-5px, 1vw, 0.5rem);
	word-spacing: clamp(-5px, 1vw, 0.5rem);
	font-size: var(--hugetext-size);
	text-decoration: inherit;
}

entries-category,
vertical-divider,
text-entry,
.topic-links {
	display: block;
	color: var(--font-color-rev);
	font-size: calc(var(--hugetext-size));
	background-color: var(--bg-main-c);
	border-top: var(--border-top);
}

text-entry,
.topic-links {
	padding: 1rem;
	font-size: calc(var(--hugetext-size) - 1vw);
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	white-space: wrap;
}

.topic-links {
	appearance: none; /* most modern browsers */
	-moz-appearance: none; /* Firefox */
	text-align: center;
	width: fit-content;
	padding: 0;
	cursor: pointer;
	border: none;
	display: inline;
	color: var(--font-color);
	background-color: var(--font-color-rev);
	outline: none;

	option {
		font-weight: bold;
		background-color: transparent;
	}
}

entries-category {
	padding-left: 1rem;
}

entries-category,
make-entry {
	cursor: pointer;
}

entries-category:hover + make-entry[class="hide-entry"] {
	border-top: var(--border-top);
	height: calc(var(--hugetext-size) * 0.5);
}

make-entry:hover,
.make-entry-hovered {
	height: calc(var(--hugetext-size) * 1.1);
	.huge-text {
		color: var(--font-color-rev);
	}
}

@container (max-width: 150px) {
	img {
		display: none !important;
	}
}

button {
	background: none;
	border: none;
}

make-entry {
	position: relative;
	overflow: hidden;
	height: calc(var(--hugetext-size) * 0.75);
	background-color: var(--entry-bg);
	transition: height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border 0.1s linear;
	display: block;
	padding: 0 0 0 clamp(0.5rem, 5vw, 5rem);
	border-top: var(--border-top);

	.app-info {
		display: none;
		cursor: default;
		position: relative;
		color: var(--font-color-rev);
		justify-content: space-between;
		gap: clamp(0.5rem, 5vw, 2rem);
		transition: height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

		margin-top: 1rem;
		letter-spacing: 2px;
		height: calc(var(--opened-entry-h) - var(--hugetext-size) - 18px);
		scrollbar-width: thin;

		.screenshots:hover {
			.ss-actions {
				display: flex;
			}
		}

		.screenshots {
			position: relative;
			border-radius: 1rem;
			margin: 1rem;
			width: 45vw;
			background-size: contain;
			background-repeat: no-repeat;
			background-position-y: center;
			background-position-x: center;
			background-color: var(--bg-main-c);

			iframe {
				border-radius: 1rem;
				width: 100%;
				height: 100%;
				border: none;
			}

			.ss-count {
				z-index: 999999;
				position: absolute;
				top: 0.3rem;
				left: 0.3rem;
				display: flex;
				gap: 0.3rem;
				align-items: center;
				padding: 0.2rem;
				border-radius: 0.5rem;
				width: fit-content;
				background-color: hsla(0, 0%, 50%, 0.5);

				span {
					font-weight: bold;
					font-size: 0.7rem;
				}
			}

			.ss-actions {
				z-index: 999999;
				position: absolute;
				top: 0.3rem;
				left: 50%;
				transform: translateX(-50%);
				display: none;
				width: 100%;
				gap: 0.5rem;
				justify-content: center;
				align-items: center;
				width: fit-content;

				padding: 0.2rem;
				border-radius: 0.5rem;
				background-color: hsla(0, 0%, 50%, 0.5);

				button {
					display: flex;
					align-items: center;

					cursor: pointer;

					svg {
						width: 1.5rem;
						aspect-ratio: 1/1;
						fill: white;
					}
				}
			}
		}

		.info {
			max-width: 45vw;
			margin-bottom: 1rem;
			display: flex;
			flex-direction: column;

			.name {
				line-height: 1;
				font-size: calc(var(--hugetext-size) * 0.8);
				margin-bottom: 1rem;
				font-style: italic;
			}

			.name::before {
				line-height: inherit;
				content: "-";
				font-size: inherit;
				margin-right: 1rem;
			}

			.description {
				overscroll-behavior: contain;
				height: 100%;
				overflow-y: auto;
				scrollbar-color: var(--entry-bg) transparent;
				scrollbar-width: thin;
				font-size: clamp(0.8rem, 2.3vw, 1rem);
				white-space: pre-line;
			}
		}
	}
}
@keyframes rolling {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
entry-links {
	position: absolute;
	bottom: -2px;
	right: 0px;
	z-index: 999;
	transition: opacity 0.6s ease;
	opacity: 0;
	visibility: hidden;

	backdrop-filter: blur(5px) brightness(90%);

	border-top: 3px solid hsla(0, 0%, 90%, 0.2);
	border-left: 3px solid hsla(0, 0%, 90%, 0.2);
	border-top-left-radius: 1rem;

	padding: 0.5rem;
	height: fit-content;
	width: fit-content;

	.links {
		gap: 1rem;
		display: flex;
		background-color: var(--entry-bg);
		border-radius: 0.5rem;
		padding: 0.3rem;
		margin-bottom: 0.3rem;

		a:hover {
			transform: scale(1.2, 1.2);
		}
		a {
			transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			display: flex;
			justify-content: center;
			align-items: center;

			svg {
				fill: hsla(0, 0%, 50%, 1);
			}
			img {
				object-fit: contain;
			}
			img,
			svg {
				border-radius: 1000px;
				animation-name: rolling;
				animation-duration: 10s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				aspect-ratio: 1/1;
				width: clamp(1rem, 5vw, 2rem);
			}
		}
	}
}

.hide-entry {
	pointer-events: none;
	height: 0;
	border: none;
}
.no-display {
	display: none !important;
}
.zoom-on {
	cursor: move;
}