style.css

html, body {
	margin: 0;
	height: 100%;
	width: 100%;
}

body {
	font-family: "futura-pt-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: red;
}

h1 {
	margin: auto;
	font-size: 4em;
	font-weight: normal;
}

textarea:focus {
	outline: none;
}

button:hover {
	background-color: red;
	color: white;
}

#preview-add-button:hover {
	background-color: red;
	color: white;
}

#preview-edit-button:hover {
	background-color: red;
	color: white;
}

#profile-addview-button:hover {
	background-color: red;
	color: white;
}

#profile-loginout-button:hover {
	background-color: red;
	color: white;
}

button:focus {
	outline: none;
}

.header-div {
	background-color: white;
	text-align: center;
	opacity: 0.7;
	border-bottom: 3px solid red;
	color: black;
	width: 100%;
	height: auto;
	overflow: auto;
}

.header-inner-content {
	text-align: center;
	padding: 3px;
	margin: auto;
	width: 75%;
	height: 100%;
	float: left;
	border-right: 3px solid red;
	padding-bottom: 3px;
	padding-top: 3px;
}

.profile-content-display-wrapper {
	width: auto;
	height: 89px;
	overflow: hidden;
	text-align: center;
}

#profile-name-div {
	font-size: 28px;
	font-weight: bold;
	color: black;
	border-bottom: 3px solid red;
	height: 73%;
}

.profile-addedit-div {
	float: left;
	width: 50%;
	border-right: 3px solid red;
}

.profile-loginout-div {
	overflow: hidden;
}

#profile-addview-button {
	border: none;
	background-color: white;
	color: red;
	width: 100%;
}

#profile-loginout-button {
	border: none;
	background-color: white;
	color: red;
	width: 100%;
}

#blur-profile-editing-div { 
	width: 100%;
	height: 100%;
	backdrop-filter: blur(10px); 
	background-color: rgba(255, 255, 255, 0.3);
	z-index: 1;
	position: fixed;
	align-items: center;
	justify-content: center;
	display: none;
}

#profile-create-div {
	background-color: white;
	border: 5px solid red;
	width: 600px;
	height: auto;
	z-index: 2;
	align-content: center;
	justify-content: center;
	text-align: center;
	opacity: 0.7;
	display: none;
}

#profile-login-div {
	background-color: white;
	border: 5px solid red;
	width: 600px;
	height: auto;
	z-index: 2;
	align-content: center;
	justify-content: center;
	text-align: center;
	opacity: 0.7;
	display: none;
}

#content-hider {
	opacity: 0.7;
	height: 100%;
	width: 100%;
	align-content: center;
}

.content-hider-text {
	text-align: center;
	align-content: center;
	font-size: 32px;
	color: black;	
	margin: auto;
}

.main-content-wrapper {
	opacity: 0.7;
	height: 100%;
}

.main-content-wrapper:after {
	content: "";
	display: table;
	clear: both;
}

#blur-refresh-div { 
	width: 100%;
	height: 100%;
	backdrop-filter: blur(10px); 
	background-color: rgba(255, 255, 255, 0.3);
	z-index: 1;
	position: fixed;
	align-items: center;
	justify-content: center;
	display: none;
}

#please-refresh-div {
	background-color: white;
	border: 5px solid red;
	width: 600px;
	height: auto;
	z-index: 2;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-size: 3em;
	color: black;
	opacity: 0.7;
}

#blur-recipe-editing-div { 
	width: 100%;
	height: 100%;
	backdrop-filter: blur(10px); 
	background-color: rgba(255, 255, 255, 0.3);
	z-index: 1;
	position: fixed;
	align-items: center;
	justify-content: center;
	display: none;
}

#recipe-editing-div {
	background-color: white;
	border: 5px solid red;
	width: 600px;
	height: auto;
	z-index: 2;
	align-content: center;
	justify-content: center;
	text-align: center;
	opacity: 0.7;
}

#recipe-title-editing {
	display: block;
	width: 98%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	border-bottom: 3px solid red;
	resize: none;
	text-align: center;
	font-size: 3em;
	color: black;
}

#recipe-date-editing {
	display: block;
	float: left;
	padding-left: 5px;
}

.recipe-diet-editing-div {
	overflow: hidden;
	padding-left: 5px;
	padding-right: 5px;
}

#recipe-diet-editing {
	display: inline;
	border: none;
	width: 100%;
}

#recipe-ingredients-editing {
	display: block;
	width: 98%;
	height: auto;
	margin-top: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1px;
	border: 3px solid black;;
	resize: none;
	text-align: left;
	color: black;
}

#recipe-instructions-editing {
	display: block;
	width: 98%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: 3px solid black;;
	resize: none;
	text-align: left;
	color: black;
}

.editing-buttons-div {
	padding: 5px;
}

.editing-submit-div {
	display: inline;
	float: left;
	width: 50%;
	padding-right: 5px;
}

.editing-submit-button {
	border: none;
	width: 100%;
}

.editing-delete-div {
	overflow: hidden;
}

.editing-delete-button {
	border: none;
	width: 100%;
}

.recipe-previews-display-wrapper {
	display: block;
	background-color: white;
	text-align: left;
	float: left;
	width: 260px;
	height: 100%;
	border-right: 3px solid red;
}

.recipe-preview-nav-div {
	border-bottom: 3px solid;
}

.preview-edit-div {
	float: left;
	width: 48%;
}

#preview-edit-button {
	border: none;
	background-color: white;
	color: red;
	width: 100%;
}

.preview-add-div {
	overflow: hidden;
}

#preview-add-button {
	border: none;
	background-color: white;
	color: red;
	width: 100%;
}

.recipe-previews-ul-container .inner-content {
	overflow-y: auto;
}

#previewListDiv {
	height: 97%;
	overflow-y: auto;
}

.recipe-preview-content-wrapper {
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 3px solid;
	background-color: white;
}

.recipe-preview-title {
	font-size: 28px;
	font-weight: bold;
	color: black;
}

.recipe-preview-date {
	display: inline;
}

.recipe-preview-diet {
	padding-left: 3px;
	display: inline;
	color: gray;
}

.split-border {
	position: absolute;
	background-color: red;
	float: left;
	display: inline-block;
}

#recipe-full-display-wrapper {
	height: 100%;
	width: auto;
	overflow: hidden;
	padding-left: 3px;
	text-align: center;
	display: none;
}

.recipe-display-header-div {
	border-bottom: 6px solid;
}

#recipe-display-title-div {
	line-height: 1;
	font-size: 6em;
	color: black;
}

#recipe-display-date-created-div {
	display: inline;
	font-size: 2em;
	color: gray;
}

#recipe-display-diet-div {
	display: inline;
	font-size: 2em;
	color: red;
}

.recipe-display-body-container {
	overflow: hidden;
	height: 100%;
}

.recipe-display-ingredients-div {
	color: black;
	display: inline;
	float: left;
	width: 50%;
	height: 100%;
	border-right: 6px solid red;
}

#recipe-display-ingredients-textarea {
	width: 98%;
	height: 100%;
	border: none;
	resize: none;
}

.recipe-display-instructions-div {
	overflow: hidden;
	padding-left: 5px;
	color: black;
	height: 100%;
}

#recipe-display-instructions-textarea {
	width: 98%;
	height: 100%;
	border: none;
	resize: none;
}


@media only all and (max-width: 992px) {
	.DisplayEntriesDiv {
		width: 100%;
	}
	.CreateEntryDiv {
		width: 100%;
	}
}