* {
	font-family: sans-serif;
	box-sizing: border-box;
}

:root {
	--backgroundColor: #EDEDED;
	--primaryColor: #D90429;
	--secondColor: #EAD94C;
	--containerColor: #F6FFF8;
	--containerSecondColor: #F4F4F4;
	--textPrimaryColor: #5C5C5C;
	--textSecondColor: #8C8C8C;
}

html, body {
	background-color: var(--backgroundColor);

	height: 100vh;

	display: flex;
	flex-direction: column;

	justify-content: space-evenly;
	align-items: center;
	align-content: center;
}

body {
	padding: 40px;
}

h1 {
	color: var(--primaryColor);
	text-align: center;
	font-size: 2.75em;
}
	h1 b {
		font-size: .5em;
		vertical-align: top;
		font-weight: normal;

		color: color-mix(in srgb, var(--primaryColor) 90%, black 10%);
	}


.searchContainer {
	padding: 1em 2em;

	background-color: var(--containerColor);
	border-radius: 20px;
	box-shadow: 3px 3px .7em .3em rgb(0,0,0,.15);

	width: 40vw;
	min-width: 550px;
}
	@media (max-width: 700px) {
		.searchContainer {
			width: 90vw;
			min-width: auto;
		}
	}

	.searchContainer h4 {
		color: var(--textPrimaryColor);
	}

	.textarea-wrapper {
		width: 100%;
		position: relative;
	}

		.textarea-wrapper textarea {
			padding: 1em;

			background-color: var(--containerSecondColor);
			width: 100%;

			color: var(--textSecondColor);
			font-size: .9em;
			height: 8em;

			border: none;
			border-radius: 10px;
			
			resize: none;
		}
		.textarea-wrapper .char-count {
			position: absolute;
			bottom: 5px;
			right: 5px;

			color: var(--textSecondColor);
			font-size: .75em;
		}

		.searchContainer textarea:focus {
			outline: none;
		}

.buttons {
	display:  flex;
	justify-content: space-between;
	align-items: center;
	
	padding: 1.25em 0 1em 0;
}

	.buttons button {
		cursor: pointer;
		background-color: var(--containerColor);
	}
		.buttons button:hover {
			filter:brightness(1.1);
		}

	.settingsButton {
		border: none;
		border-radius: 100%;
	}
		.settingsButton svg {
			fill: var(--textPrimaryColor);
			width: 1.75em;
			height: 1.75em;
		}

	#searchButton {
		display: flex;
		align-items: center;
		gap: .7em;

		border: 2px solid var(--primaryColor);
		border-radius: 10px;
		padding: 8px 15px;

		color: var(--primaryColor);

		font-weight: bold;
		font-size: 1em;		

		opacity: 1;
	}
		#searchButton:disabled {
			cursor: default;
			opacity: .4;
		}
		#searchButton svg {
			fill: var(--primaryColor);
			width: 1em;
			height: 1em;
		}

#settingsDialog {
	background-color: #fff;
	border: none;
	border-radius: 15px;

	padding: 2em 1em;

	color: var(--textSecondColor);
}
	#settingsDialog div {
		display: flex;
		flex-direction: column;
	}
		#settingsDialog label {
			font-weight: bolder;
			text-align: center;
			font-size: .9em;
		}

		#settingsDialog select {
			margin-bottom: 1.5em;
			font-size: 1em;
			padding: .25em 1em;

			background-color: var(--backgroundColor);

			border: none;
			border-radius: 5px;

			color: var(--textPrimaryColor)
		}