@font-face {
	font-family: testFont;
	src: url("CoveredByYourGrace-Regular.ttf");
}

.journal-form h1 {
	font-family: testFont, sans-serif;
	text-align: center;
}

.journal-form {
	font-size: 120%;
	font-family: "Century Gothic", sans-serif;
	width: 50%;
	margin: auto;
	color: #516754;
	border: 2px solid rgb(31 41 32);
	border-radius: 8px;
	background-color: #f7dfd5;
}

fieldset {
	border: none;
}

input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	background-color: #f7dfd5;
	border: none;
	border-bottom: 1px solid rgb(0 0 0);
}

input[type="text"]:focus {
	outline: none;
	border-bottom: 1px solid rgb(0 0 0);
}

.rating {
	display: flex;
	flex-flow: nowrap row-reverse;
}

.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
	display: none;
}

/* Unchecked stars */
.rating:not(:checked) > label {
	/* Make stars line up sideways and not vertically */
	float: right;

	/* Hide label text */
	width: 1em;
	overflow: hidden;
	white-space: nowrap;

	/* Star default color and size */
	font-size: 200%;
	line-height: 1.2;
	color: #b3b3cc;
}

.rating > label:active {
	position: relative;
}

.rating:not(:checked) > label::before {
	content: "★";
}

/* Checked star color */
.rating > input:checked ~ label {
	color: #ffbf00;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
	color: orangered;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
	color: orangered;
}

.tag-container {
	display: flex;
	flex-flow: nowrap row-reverse;
}

.tag {
	background-color: grey;
	border-radius: 7px;
	color: white;
	padding-right: 7px;
	padding-left: 7px;
	margin: 3px;
}

.tag::before {
	display: inline-block;
	content: "x";
	height: 15px;
	width: 15px;
	margin-right: 4px;
	text-align: center;
	color: white;
	cursor: pointer;
}

.tag:hover::before {
	color: red;
}

#tag-add-btn {
	background-color: #94da97; /* Green */
	border: round;
	color: rgb(206 83 179);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	cursor: pointer;
	border-radius: 10%;
	margin-top: 5px;
}

#tag-add-btn:hover {
	background-color: rgb(206 83 179); /* Green */
	border: round;
	color: #94da97;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	cursor: pointer;
	border-radius: 10%;
	margin-top: 5px;
}

.hidden {
	display: none;
}

.tag-container * {
	max-width: 100%;
	overflow-wrap: anywhere;
}