/* toolbar */
.toolbarDivider {
	height: 20px;
	width: 0;
	border: none;
	border-left: 1px solid var(--text-color-light);
	margin: 0 10px 0 10px;
}

/* canvas */
#drawCanvas {
	border: 1px solid var(--text-color-light);
	border-radius: 20px;

	transition: border-color 0.37s;
}
#drawCanvas:hover {
	border-color: var(--text-color);
}
#drawCanvas:not(:hover) {
	transition: border-color 0.87s;
}

/* saved and online drawings */
.drawingListItem {
	transition: background-color 0.2s, scale 0.2s, opacity 0.5s;
	border: 1px solid var(--text-color-light);
	border-radius: 20px;
	position: relative;
}
.drawingListItem:hover {
	background-color: #00000012;
	scale: 1.05;
}
.drawingThumbnail {
	width: 200px;
	height: 200px;
}
.drawingDeleteButton {
	position: absolute;
	top: 2px;
	right: 2px;

	scale: 50%;
	opacity: 0%;

	transition: scale 0.1s, opacity 0.1s;
}
.drawingListItem:hover .drawingDeleteButton {
	scale: 100%;
	opacity: 100%;
}
.drawingDescription {
	position: absolute;
	bottom: 5px;
	left: 5px;
	align-items: flex-start;

	border-radius: 15px;
    backdrop-filter: blur(3px);
    padding: 5px;
    border: 1px solid var(--text-color-light);
}
.drawingArtist {
	font-size: small;
}
.drawingArtist::before {
	content: "by ";
	color: var(--text-color-light);
}

#canvasSection {
	overflow: hidden;
}

/* upload animation */
@keyframes upload {
	0% {
		scale: 1;
		translate: 0 0;
		opacity: 1;
	}
	33% {
		scale: 0.5;
		translate: 0 0;
	}
	66% {
		scale: 0.5;
		translate: 0 -100vh;
		opacity: 1;
	}
	67% {
		scale: 1;
		translate: 0 0;
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* save animation */
@keyframes save {
	0% {
		scale: 1;
		translate: 0 0;
		opacity: 1;
	}
	33% {
		scale: 0.5;
		translate: 0 0;
	}
	66% {
		scale: 0.5;
		translate: 0 100vh;
		opacity: 1;
	}
	67% {
		scale: 1;
		translate: 0 0;
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}