:root {
	--background-0: rgba(0, 0, 0, 0);
	--background-1: #000;
	--background-2: linear-gradient(to right top, #202020, rgba(0, 0, 0, 0));
	--transition-1: 0.3s;
	--border-1: #626262;
	--border-2: #393939;
	--color-1: #fff;
	--color-2: #9A9A9A;
	--color-3: #989797;
	--gap-1: 1em;
}

@font-face {
	font-family: ibm;
	src: url("./fonts/IBMPlexMono-Regular.ttf");
}

* {
	margin: 0px; 
	padding: 0px;
	box-sizing: border-box;
	transition-duration: var(--transition-1);
}

html {
	scrollbar-color: var(--border-2) var(--background-1);
	scrollbar-width: thin;
}

body, div {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: var(--color-1);
	font-style: monospace;
	font-family: ibm;
	background: var(--background-0);
}

body {
	height: 100%;
	width: 100%;
	background: var(--background-1);
	row-gap: var(--gap-1);
}

a {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	&::after, &::before {
		transition-duration: var(--transition-1);
		display: block;
		height: 16px;
		width: 16px;
	}
	&:hover {
		color: var(--color-1);
		text-decoration: underline;
		&::after, &::before { filter: brightness(3) }
	}
}

body > div {
	height: auto;
	width: 80%;
	display: flex;
	flex-direction: column;
	row-gap: var(--gap-1);
}

body > div:nth-child(3) {
	row-gap: 0;
}

body > div:nth-child(1) {
	max-height: 80vh;
}

.text_1 { color: var(--color-1) }
.text_2 { color: var(--color-2) }
.text_3 { color: var(--color-3) }

body > div > div > a {
	height: 100%;
	width: 100%;
	&:after {
		content: url("./svgs/github.svg");
		margin-left: 4px;
	}
}

body > div > div {
	padding: calc(var(--gap-1) / 2);
	width: 100%;
}

body > div > div:nth-child(2) {
	background-image: var(--background-2);
	border: 1px solid var(--border-2);
}

body > div > div {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	column-gap: calc(var(--gap-1) / 2);
	row-gap: calc(var(--gap-1) / 2);
	flex-wrap:  wrap;
}

button {
	cursor: pointer;
	color: var(--color-2);
	background-color: var(--background-0);
	border: 1px solid var(--border-1);
	background-image: var(--background-2);
	padding: 4px calc(var(--gap-1) * 2);
	&:hover {
		color: var(--color-1);
		border-color: var(--color-1);
	}
}

body > div > div:nth-child(3) > button {
	padding: 4px 10px;
}

body > div:nth-child(3) > p {
	margin-bottom: var(--gap-1);
}

body > div > div:nth-child(4) {
	background: var(--background-0);
	display: flex;
	flex-direction: row;
}

body > div > div:nth-child(4) > div:nth-child(3) {
	border: 1px solid var(--border-1);
	background: var(--background-2);
	padding: calc(var(--gap-1) / 2);
	column-gap: calc(var(--gap-1) /2);
	display: flex;
	flex-direction: row;
	align-items: center;
}

body > div > div:nth-child(4) > div:nth-child(4) {
	display: flex;
	flex-direction: row;
	column-gap: calc(var(--gap-1));
	align-items: center;
}

textarea {
	color: var(--color-2);
	background: var(--background-1);
	border: 1px solid var(--border-2);
	width: 30%;
	font-size: 14px;
	padding: var(--gap-1);
}

body > div:nth-child(1) {
	flex-direction: row;
	column-gap: var(--gap-1);
	width: 90%;
	height: auto;
	max-height: 70%;
}

canvas {
	width: 70%;
	max-height: 70vh;
}

@media screen and (max-width: 1300px), screen and (max-height: 900px) {
	body > div:nth-child(1) {
		flex-direction: column;
		width: 100%;
	}
	canvas {
		width: 100%;
	}
	textarea {
		width: 100%;
	}
	
}