/* CreatePage.css */

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

body {
	background-color: #F8F3F1;

}

h1 {
	text-align: center;
}

.top-bar {
	margin-top: -8cm;
}

.top-bar > img {
	position: relative;
	top: 7.85cm;
}

.top-bar > h1 {
	position: relative;
	top: 2.2cm;
	font-size: 3cm;
	color:#516754;
    font-family: 'testFont';
}

.top-bar > form {
	position: relative;
	left: 32cm;
}

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

.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: row wrap;
}
  
.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;
}