:root {
	--task-list-width: 100%;
	--task-list-height: 100vh;

	--task-list-background-color: rgba(0, 0, 0, 0.8);

	--task-list-border-width: 2px;
	--task-list-border-color: white;
	--task-list-border-radius: 5px;

	--task-list-horizontal-padding: 0px;
	--task-list-vertical-padding: 0px;

	--header-horizontal-padding: 10px;
	--header-vertical-padding: 10px;

	--header-background-color: rgba(0, 0, 0, 0.8);

	--header-border-width: 2px;
	--header-border-color: white;
	--header-border-radius: 5px;

	--header-font-size: 20px;
	--header-font-family: sans-serif;
	--header-font-color: white;
	--header-font-weight: bold;

	--task-count-margin-right: 0px;

	--body-background-color: rgba(0, 0, 0, 0.7);

	--body-border-width: 5px;
	--body-border-color: white;
	--body-border-radius: 5px;

	--body-margin-top: 0px;

	--number-of-lines: 1;
	--line-height: 1.5;
	--username-font-weight: bold;

	--task-background-color: rgba(0, 0, 0, 0.7);

	--task-font-family: sans-serif;
	--task-font-size: 25px;
	--task-font-color: white;

	--task-border-color: black;
	--task-border-width: 0px;
	--task-border-radius: 5px;

	--task-horizontal-padding: 0px;
	--task-vertical-padding: 0px;

	--task-margin-bottom: 5px;
	--task-horizontal-padding: 5px;
	--task-vertical-padding: 5px;

	--gap-between-scrolls: 0;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

.primary, .secondary {
    animation: scroll linear infinite;
}


#main-container {
	width: 100%;
	height: 100vh;

	display: flex;
	flex-direction: column;

	padding: var(--task-list-vertical-padding)
		var(--task-list-horizontal-padding);

	background-color: var(--task-list-background-color);

	border: solid var(--task-list-border-width) var(--task-list-border-color);
	border-radius: var(--task-list-border-radius);

	transition: opacity 0.5s ease-in-out; 

	.header {
		display: flex;
		justify-content: space-between;

		padding: var(--header-vertical-padding) var(--header-horizontal-padding);

		border: solid var(--header-border-width) var(--header-border-color);
		border-radius: var(--header-border-radius);

		color: var(--header-font-color);
		background: var(--header-background-color);

		font-family: var(--header-font-family);
		font-size: var(--header-font-size);
		font-weight: var(--header-font-weight);

		.title {
			transition: opacity 0.5s ease;
		}
		.fade {
			opacity: 0;
		}

		.task-count {
			margin-right: var(--task-count-margin-right);
		}
	}

	.task-wrapper, .task-container {
		transition: height 0.5s ease-out;
	}

	.task-wrapper {
		width: 100%;
		height: 100%;

		overflow: hidden;

		position: relative;

		background: var(--body-background-color);

		color: var(--task-font-color);
		font-family: var(--task-font-family);
		font-size: var(--task-font-size);

		line-height: var(--line-height);

		border: var(--body-border-width) solid var(--body-border-color);
		border-radius: var(--body-border-radius);

		z-index: 1;

		.task-container.secondary {
			margin-top: var(--gap-between-scrolls);
		}

		.task-container {
			// position: absolute;
			width: inherit;

			left: 0;

			display: flex;
			flex-direction: column;

			align-items: center;

			margin-left: auto;
			margin-right: auto;

			margin-top: var(--body-margin-top);

			transition: transform 0.4s ease-in-out;


			.task {
				padding: var(--task-vertical-padding)
					var(--task-horizontal-padding);
				background: var(--task-background-color);

				margin-bottom: var(--task-margin-bottom);

				width: var(--task-width);

				border: solid var(--task-border-width) var(--task-border-color);
				border-radius: var(--task-border-radius);

				.username {
					font-weight: var(--username-font-weight);
					font-size: var(--username-font-size);
				}

				.user-tasks {
					counter-reset: item;

					.todo {
						display: flex;

						&:before {
							counter-increment: item;
							content: counters(item, ".") ". ";
							margin-right: 5px;
						}

						.content {
							display: -webkit-box;
							line-clamp: var(--number-of-lines);
							-webkit-line-clamp: var(--number-of-lines); // change this to the number of lines you want
							-webkit-box-orient: vertical;
							overflow: hidden;
						}
					}

					.done {
						color: var(--done-task-font-color);

						.content {
							text-decoration: line-through;
							color: var(--done-task-font-color);
						}
						
					}

					.focus {
						background: var(--focus-task-background-color);
						color: var(--focus-task-font-color);

						padding: var(--focus-task-vertical-padding)
								var(--focus-task-horizontal-padding);

						border-radius: var(--focus-task-border-radius);

						width:fit-content;

						margin-left: calc(var(--focus-task-horizontal-padding) * -1);
					}
				}
			}
		}
	}
}