.details-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;

	width: 100%;
	height: 100%;
	min-height: 100vh;
	overflow-y: scroll;
	background: transparent;
	backdrop-filter: blur(10px);
	padding: 4rem 0;
	cursor: pointer;

	&::-webkit-scrollbar {
		display: none;
	}

	button {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;

		background: transparent;
		outline: none;
		border: 0;
		color: var(--white__clr);
		cursor: pointer;

		&:hover {
			color: var(--special__1);
		}
	}

	.main {
		width: 95%;
		max-width: 900px;
		margin: 0 auto;
		padding: 0 0 2rem 0;
		border-radius: 12px;
		background: var(--gray__clr);
		overflow: hidden;
		box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.1);
		cursor: default;

		.project-picture {
			width: 100%;
			aspect-ratio: 1.8;
			background: var(--gray__clr);
			border-radius: 12px;
			padding: 10px;
			overflow: hidden;

			display: flex;
			justify-content: center;
			align-items: center;

			img {
				background: var(--gray__clr__trs);
				width: 100%;
				height: 100%;
				border-radius: 6px;
			}
		}

		.project-data {
			padding: 0 2rem;
			display: flex;
			flex-direction: column;
			gap: 0.75rem;

			.project-title-category {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--verywhite__clr);

				.project-title {
					font-size: calc(var(--medium__size));
				}

				.project-category {
					color: var(--special__1);
					background: var(--special__1__trs);
					font-size: calc(var(--normal__size));
					padding: 0.25rem 0.75rem;
					border-radius: 6px;
					font-weight: 600;
				}
			}

			.langs {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;

				label {
					color: var(--special__1);
					font-size: var(--normal__size);
					font-weight: 500;

					display: flex;
					align-items: center;
					gap: 0.5rem;

					.langs-separator {
						color: var(--verywhite__clr);
					}
				}
			}

			&__description {
				color: var(--verywhite__clr);
				font-size: calc(var(--normal__size) - 2px);
				line-height: calc(var(--normal__size) + 7px);
				letter-spacing: -0.1px;

				&:not(:last-child) {
					margin-bottom: 0.35rem;
				}

				&::first-letter {
					font-size: calc(var(--normal__size) + 1px);
				}
			}

			h2 {
				color: var(--verywhite__clr);
				font-size: 26px;

				label {
					color: var(--special__1);
				}
			}

			.the-links {
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
				align-items: center;
				font-size: var(--normal__size);

				.private-project {
					color: var(--red__clr);
					font-weight: bold;
					text-decoration: underline;
					cursor: not-allowed;

					&::selection {
						background: var(--red__clr);
					}
				}

				a {
					text-decoration: none;
					color: var(--special__1);
					font-weight: bold;

					display: flex;
					align-items: end;
					gap: 0.25rem;

					&:hover {
						text-decoration: underline currentColor;
					}
				}
			}

			@media screen and (width <= 700px) {
				padding: 0 0.75rem;
			}
		}
	}
}
