html {
	font-family: 'Roboto', sans-serif;
}

body {
	margin: 0;
	margin-bottom: 20px;
}

.title {
	color: red;
	width: 100%;
	text-align: center;
}

header {
	min-height: 300px;
	width: 100%;
	background-image: url('./assets/header3.jpg');
	background-size: cover;
	cursor: pointer;
}
.title > h1 {
	font-size: 72px;
	background: linear-gradient(
		20deg,
		rgb(236, 115, 1),
		rgb(200, 200, 0),
		rgb(4, 231, 16)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 5px;
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	font-weight: bold;
}

.search-field-container {
	width: 50%;
	margin: 0 auto;
	left: 50%;
}

.product-container {
	width: 60%;
	margin: 0 auto;
	left: 50%;
}

.comments-container {
	width: 60%;
	margin: 0 auto;
	left: 50%;
}

.product-info {
	display: flex;
	align-items: flex-start;
	padding-bottom: 20px;
}

.product-info > div:first-child {
	width: 30%;
}

.product-image {
	display: block;
	max-height: 400px;
	margin: 0 auto;
	left: 50%;
}

.search-field {
	position: relative;
	height: 50px;
	width: 100%;
	border-radius: 10px;
	border: double 3px transparent;
	background-image: linear-gradient(white, white),
		linear-gradient(to right, orange, yellow, rgb(0, 194, 0));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	font-size: large;
	padding-left: 20px;
	box-sizing: border-box;
}

.new-comment-name {
	width: 50%;
	height: 40px;
	font-size: larger;
	padding-left: 10px;
	border: 2px solid black;
	margin-bottom: 20px;
}

.new-comment-content {
	width: 100%;
	height: 200px;
	font-size: larger;
	padding-left: 10px;
	border: 2px solid black;
	margin-bottom: 20px;
	resize: none;
}

.comment-name {
	margin-bottom: 10px;
	width: 30%;
	font-weight: bolder;
}

.comment-container {
	display: flex;
	align-items: flex-start;
}

.comment-content {
	margin-bottom: 20px;
	width: 100%;
	min-height: 50px;
	font-weight: lighter;
}

.submit-button {
	display: inline-flex;
	align-items: center;
	background: orange;
	padding: 5px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	font-size: larger;
	border: 2px solid darkorange;
	border-radius: 5px;
}

input:focus {
	outline: 0;
}

.results {
	width: 50%;
	margin: 0 auto;
	left: 50%;
}

/*
.result-table tr:nth-child(odd) {
	background-color: #e2e1ac;
}

.result-table tr:nth-child(even) {
	background-color: #9de0a0;
}
*/

.result-table tr {
	border-bottom: thin solid rgb(184, 109, 10);
	height: 50px;
}

.result-table td {
	padding: 5px 10px 5px 10px;
	min-height: 50px;
}

.result-table th {
	min-width: 100px;
	text-align: left;
	font-weight: bold;
	font-size: large;
	padding: 5px 10px 5px 10px;
}

.result-table {
	border-collapse: separate;
	border: 2px solid transparent;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;

	background-image: linear-gradient(
		30deg,
		rgb(241, 241, 159),
		rgb(255, 217, 146),
		rgb(151, 207, 151)
	);
	background-origin: border-box;
}

/* Apply a border to the right of all but the last column */
.result-table th:not(:last-child),
.result-table td:not(:last-child) {
	border-right: 1px solid rgb(94, 94, 94);
}

/* Apply a border to the bottom of all but the last row */
.result-table > thead > th,
.result-table > thead > td,
.result-table > tbody > tr:not(:last-child) > th,
.result-table > tbody > tr:not(:last-child) > td,
.result-table > tr:not(:last-child) > td,
.result-table > tr:not(:last-child) > th,
.result-table > thead,
.result-table > tbody:not(:last-child) {
	border-bottom: 1px solid rgb(94, 94, 94);
}