@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@250;500;650&family=Murecho:wght@300;500;700&family=Noto+Sans+JP:wght@320;500;850&display=swap');

:root {
	font-family: 'Alexandria', 'Murecho', 'Noto Sans JP', sans-serif;
	--sample: hsl(0, 8%, 5%);
}

html {
	font-size: 1px;

	@media (max-width: 767px) {
		font-size: 0.13vw;
	}

	@media (max-width: 479px) {
		font-size: 0.208vw;
	}
}

body {
	font-size: 16rem;
	background: linear-gradient(160deg, #eee, #ccfff9);
	max-width: 1280px;
	margin-inline: auto;
}

header {
	padding: 16rem 8rem 8rem;

	h1 {
		font-size: 40rem;
	}
}

main {
	display: flex;

	section {
		padding: 0 8rem 24rem;
	}

	.config {
		display: grid;
		grid-template-columns: repeat(11, max-content);
		gap: 2rem;

		> div, > h3, > span {
			margin-top: 0;
			padding: 2rem 8rem;
			display: flex;
			align-items: center;
		}

		> span {
			justify-content: center;
		}

		input[type="number"] {
			text-align: end;
			border: none;
			width: 70rem;
		}

		.c2 {
			grid-column: span 2;
		}
		.c3 {
			grid-column: span 3;
		}
		.c4 {
			grid-column: span 4;
		}
		.c5 {
			grid-column: span 5;
		}
		.c6 {
			grid-column: span 6;
		}
		.c7 {
			grid-column: span 7;
		}
		.c8 {
			grid-column: span 8;
		}
		.r2 {
			grid-row: span 2;
		}
		.head {
			color: white;
			background: #209d88;
			padding: 4rem 8rem;
		}
		.side {
			background: #5acfbc;
			justify-content: center;
			padding-left: 8rem;
		}
		.vertical {
			writing-mode: vertical-lr;
			align-items: flex-start;
			padding: 2rem;
			padding-right: 8rem;
			line-height: 1;
		}
	}

	.addText {
		display: grid;
		grid-template-columns: 60rem 1fr 60rem 1fr 60rem 60rem;
		align-items: center;
		justify-items: center;
		width: 100%;
		margin-bottom: 24rem;

		span {
			line-height: 1;
		}

		textarea {
			width: 100%;
			height: 32rem;
			min-height: 32rem;
			grid-column: 1 / -1;
			resize: vertical;
		}

		.recommendColorsWrapper {
			display: flex;
			gap: 12rem;
			grid-column: 1 / -1;
			justify-self: start;
			padding: 2rem 4rem;

			button {
				width: 40rem;
				border: none;
				border-radius: 40rem;
			}
		}
	}

	h3 {
		margin-top: 12rem;
	}

	.sec-canvas {
		
		.canvasArea {
			position: relative;
			canvas {
				background: white;
				display: block;
				margin: auto;
				box-shadow: 0 0 5rem #0003;
			}
			.addTextOnCanvas {
				display: block;
				overflow-y: auto;
				position: absolute;
				top: 32rem;
				left: 32rem;
				right: 32rem;
				line-height: 1;
				height: 400rem;
			}
		}

		.downloadImage {
			display: block;
			margin: 5rem auto;
			padding: 4rem 12rem;
			h3 {
				margin: 0;
			}
		}
	}
}
