:root {
	/* Base colors */
	--stone: #121210;
	--green: #133d1b;
	--orange: #802b09;
	--violet: #3a2578;
	--choco: #3d210d;
	--sand: #121210;
    --red: #7d1a1a;
    --green: #133d1b;
	--nord-black: #2e3440;
	--nord-purple: #b48ead;
	--gray: #030507;

	--theme-color: var(--nord-black);
	--theme-color-10: oklch(from var(--theme-color) 10% c h);
	--theme-color-20: oklch(from var(--theme-color) 20% c h);
	--theme-color-30: oklch(from var(--theme-color) 30% c h);
	--theme-color-40: oklch(from var(--theme-color) 40% c h);
	--theme-color-50: oklch(from var(--theme-color) 50% c h);
	--theme-color-60: oklch(from var(--theme-color) 60% c h);
	--theme-color-70: oklch(from var(--theme-color) 70% c h);
	--theme-color-80: oklch(from var(--theme-color) 80% c h);
	--theme-color-90: oklch(from var(--theme-color) 90% c h);
	--theme-color-100: oklch(from var(--theme-color) 100% c h);

	--surface-1: light-dark(var(--theme-color-100), var(--theme-color-20));
	--surface-2: light-dark(var(--theme-color-90), var(--theme-color-30));
	--border-color: light-dark(var(--theme-color-80), var(--theme-color-30));
	--text-1: light-dark(var(--theme-color-20), var(--theme-color-90));
	--text-2: light-dark(var(--theme-color-50), var(--theme-color-70));
	--text-3: light-dark(var(--theme-color-60), var(--theme-color-60));
	--shadow-color: rgb(from var(--surface-1) r g b / 0.25);

	--head-word-color: light-dark(
		oklch(from var(--green) 50% c h),
		oklch(from var(--green) 90% c h)
	);
	--violation-color: light-dark(
		oklch(from var(--orange) 50% c h),
		oklch(from var(--orange) 90% c h)
	);
	--violation-background-color: light-dark(
		oklch(from var(--orange) 95% c h),
		oklch(from var(--orange) 30% c h)
	);
	--summary-color: light-dark(
		oklch(from var(--violet) 50% c h),
		oklch(from var(--violet) 90% c h)
	);
	--insertion-color: light-dark(
		oklch(from var(--green) 50% c h),
		oklch(from var(--green) 90% c h)
	);
	--insertion-background-color: light-dark(
		oklch(from var(--green) 95% c h),
		oklch(from var(--green) 30% c h)
	);
    --deletion-color: light-dark(
		oklch(from var(--red) 50% c h),
		oklch(from var(--red) 90% c h)
	);
	--deletion-background-color: light-dark(
		oklch(from var(--red) 95% c h),
		oklch(from var(--red) 30% c h)
	);
	--example-color: light-dark(
		oklch(from var(--sand) 50% c h),
		oklch(from var(--sand) 90% c h)
	);
	--font-family: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans,
		"Manjari", Arial, sans-serif;
}

* {
	box-sizing: border-box;
}
a {
	text-decoration: none;
}

input {
	font-family: var(--font-family);
}

body {
	font-family: var(--font-family);
	margin: 0;
	padding: 0;
	color: var(--text-1);
	background-color: var(--surface-1);
	display: block;
	scrollbar-color: var(--surface-2) var(--surface-2);
	scrollbar-width: thin;
}
main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
}

header {
	background-color: var(--surface-2);
	border-bottom: 1px solid var(--border-color);
	text-align: center;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	justify-items: space-between;
	padding: 1em;
	position: sticky;
	top: 0;

	form {
		justify-self: start;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		justify-content: center;
		align-items: center;
		input {
			border: 1px solid var(--border-color);
			border-radius: 4px;
			background: var(--surface-1);
			font-size: 1em;
			padding: 0.5em;
		}
	}
	h1 {
		font-size: 1.5em;
		font-family: "IBM Plex Sans", sans-serif;
		justify-self: start;
		margin: 0;
	}
	a {
		text-decoration: none;
		color: currentColor;
	}
}

main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding: 1em;
	h1 {
		margin: 0;
	}
}

.card {
	padding: 1em;
	background-color: var(--surface-1);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0 5px 10px 0 var(--shadow-color), 0 15px 30px 0
		var(--shadow-color);
}

.metadata {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			line-height: 1.5;
		}
	}
}
.edit-assessment {
	h2 {
		font-size: 1.5em;
		margin: 0;
	}
	.summary {
		color: var(--summary-color);
	}
	.violation {
		font-size: 1em;
		color: var(--violation-color);
		background-color: var(--violation-background-color);
		font-family: monospace;
		border-radius: 10%;
		padding: 0.5em;
		margin: 0 0.25em;
	}

	.violations {
		margin: 0;
		gap: 0.5em;
		ul {
			list-style: none;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: start;
			padding: 0;
		}
	}
}

#diff{
    del {
        background-color: var(--deletion-background-color);
        color: var(--deletion-color);
        text-decoration: none;
    }
    ins {
        background-color: var(--insertion-background-color);
        color: var(--inserion-color);
        text-decoration: none;
    }

    .diff-deletedline.diff-side-deleted{
        div{
            border-left: 4px solid var(--deletion-color);
            padding: 0.25em;
            width: 60ch;word-wrap: break-word;
        }
    }
    .diff-addedline.diff-side-added{
        div{
            border-left: 4px solid var(--insertion-color);
            padding: 0.25em;
            width: 60ch;word-wrap: break-word;
        }
    }

    .diff-context{
        div{
            border-left: 4px solid var(--border-color);
            padding: 0.25em;
            width: 60ch;
            word-wrap: break-word;
        }
    }

}