:root {
	/* --background: hsl(20deg 5% 13%); */
	--background-body: hsl(230deg 5% 7%);
	--background-content: hsl(25deg, 28%, 8%);
	--background-coffee: hsl(25deg, 28%, 15%);
	--background-nav: hsl(25deg 30% 25%);
	--background-search: hsl(230deg, 4%, 23%);
	--background-filters: hsl(230deg, 4%, 20%);
	--background-editor: hsl(230deg, 5%, 13%);
	--background-editor-panel: hsl(230deg, 5%, 19%);
	--background-input: hsl(213deg, 18%, 79%);
	--background-notification: hsl(25deg, 20%, 16%);
	--white: hsl(0 0% 100%);
	--white-10: hsl(0 0% 100% / 0.1);
	--white-20: hsl(0 0% 100% / 0.2);
	--white-25: hsl(0 0% 100% / 0.25);
	--white-35: hsl(0 0% 100% / 0.35);
	--white-50: hsl(0 0% 100% / 0.5);
	--white-70: hsl(0 0% 100% / 0.7);
	--black-10: hsl(0 0% 0% / 0.1);
	--black-20: hsl(0 0% 0% / 0.2);
	--black-30: hsl(0 0% 0% / 0.3);
	--black-50: hsl(0 0% 0% / 0.5);
	--black-70: hsl(0 0% 0% / 0.7);
	--grey-80: hsl(230deg 5% 80%);
	--grey-70: hsl(230deg 5% 70%);
	--grey-60: hsl(230deg 5% 60%);
	--grey-50: hsl(230deg 5% 50%);
	--grey-40: hsl(230deg 5% 40%);
	--grey-33: hsl(230deg 5% 33%);
	--grey-30: hsl(230deg 5% 30%);
	--grey-25: hsl(230deg 5% 25%);
	--grey-20: hsl(230deg 5% 20%);
	--grey-15: hsl(230deg 5% 15%);
	--grey-10: hsl(230deg 5% 10%);
  --turquoise: hsl(175deg, 75%, 43%);
  --cream: hsl(25deg, 35%, 65%);
  --cream-lt: hsl(25deg, 25%, 88%);

	--blue: hsl(213deg, 69%, 60%);
	--blue-light: hsl(213deg, 69%, 75%);
	--green: hsl(144deg, 65%, 31%);
	--button: hsl(213deg 81% 40%);
	--button-hover: hsl(213deg 75% 49%);
	--error: hsl(355deg 100% 68%);
	--error-dark: hsl(355deg 58% 41%);
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html {
	font-size: 10px;
	/* scroll-behavior: smooth; */
}

body {
	background: var(--background-content);
	color: #fff;
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 5.5rem 0 0 0;
}

input, textarea {
	font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
}

#content {
  padding: 1.4rem;
}

/** ////////////////////////////////////////////////////////////////////////////////////////// */
/** /////////////////////////////////////////////////////////////////////////  Coffee List  // */
/** ////////////////////////////////////////////////////////////////////////////////////////// */

#coffee_list {
  display: grid;
  gap: 1.6rem;
  margin: auto;
  max-width: 500px;
}

.coffee {
  border-radius: 5px;
  font-size: 1.7rem;
  background: var(--background-coffee);
  max-width: 500px;
  border-top: 1px solid hsl(from var(--cream) h 20% 25%);
  border-bottom: 1px solid #000;
}

.coffee-header {
  background: hsl(from var(--background-coffee) h s 13%);
  display: grid;
  grid-template-columns: auto max-content;
  gap: 1.5rem;
}

.coffee-edit {
  display: none;
  width: 40px;
  height: 36px;
  padding: 11px 13px;
  cursor: pointer;
}

body.logged-in .coffee-edit {
  display: block;
}

.coffee-edit svg {
  fill: var(--cream);
}

.coffee-edit:hover svg {
  fill: #fff;
}

.coffee-roaster {
	font-family: 'Roboto Slab', sans-serif;
  font-size: 1.8rem;
  line-height: 2.2rem;
  padding: 1.4rem 1.6rem 0 1.6rem;
}

.coffee-name {
  background: hsl(from var(--background-coffee) h s 13%);
  font-size: 2.6rem;
  color: var(--turquoise);
	font-family: 'Roboto Slab', sans-serif;
  line-height: 3rem;
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid hsl(from var(--turquoise) h 70% 20%);
  padding: 0.5rem 1.6rem 1.6rem 1.6rem;
}

.coffee-info-list {
  display: flex;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 1.6rem;
}

.coffee-info.block {
  width: 100%;
}

.coffee-info-label {
  font-size: 1.5rem;
  padding-bottom: 3px;
  color: var(--cream);
  letter-spacing: 0.01rem;
}

.coffee-info-value {
  text-transform: capitalize;
  letter-spacing: 0.01rem;
  color: var(--cream-lt);
}


.coffee-info-value.review {
  font-size: 1.4rem;
  line-height: 2.0rem;
}

/** ////////////////////////////////////////////////////////////////////////////////////////// */
/** /////////////////////////////////////////////////////////////////////////  Coffee Form  // */
/** ////////////////////////////////////////////////////////////////////////////////////////// */

#coffee_form {
  border-radius: 5px;
  padding: 1.6rem;
  font-size: 1.7rem;
  background: var(--background-coffee);
  max-width: 400px;
  margin: 30px auto;
  border-top: 1px solid hsl(from var(--cream) h 20% 25%);
  border-bottom: 1px solid #000;
  position: relative;
  display: none;
}

#coffee_form_close {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 7px 11px 10px;
    cursor: pointer;
}

#coffee_form_close svg {
  fill: var(--cream);
}

#coffee_form_close:hover svg {
  fill: #fff;
}

#coffee_form_title {
  font-size: 3rem;
  color: var(--turquoise);
	font-family: 'Roboto Slab', sans-serif;
  line-height: 3rem;
  font-weight: 600;
  padding-bottom: 15px;
}

#coffee_form_fields {
  display: grid;
  gap: 12px;
}

.coffee-form-field {

}

.coffee-form-field label {
  font-size: 1.6rem;
  color: var(--cream);
  letter-spacing: 0.01rem;
}

.coffee-form-field label span {
  color: hsl(from var(--cream) h s 50%);
  letter-spacing: 0.1em;
  font-size: 1.3rem;
}

.coffee-form-field input[type=text],
.coffee-form-field textarea {
  display: block;
  width: 100%;
  padding: 5px 6px;
  /* background: var(--cream-lt); */

  background: hsl(from var(--cream) h 20% 69%);
  border: 2px solid transparent;
  outline: none;
  border-radius: 2px;
  margin-top: 3px;
  transition: all .2s ease-in-out;
}

.coffee-form-field input[type=text]:focus,
.coffee-form-field textarea:focus {
  border-color: var(--turquoise);
  transition: all .2s ease-in-out;
}

.coffee-form-field input.quick-selectable {
  border-radius: 2px 2px 0 0;
}

.quick-select {
  background: hsl(from var(--background-coffee) h s 22%);
  border-radius: 0 0 3px 3px;
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.quick-select-option {
  padding: 5px 8px;
  background: hsl(from var(--background-coffee) h s 32%);
  border-radius: 2px;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all .2s ease-in-out;
  color: hsl(from var(--cream) h s 75%);
}

.quick-select-option:hover {
  background: hsl(from var(--background-coffee) h s 38%);
  transition: all .2s ease-in-out;
  color: hsl(from var(--cream) h s 90%);
}

.coffee-form-button {
  background: hsl(from var(--turquoise) h s 40%);
  color: #fff;
  font-family: 'Roboto Slab', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease-in-out;
  border-radius: 3px;
}

.coffee-form-button:hover {
  background: hsl(from var(--turquoise) h s 45%);
  transition: all .2s ease-in-out;
}


/* ///////////////////////////////////////////////////////////////////////// Modal // */
.modal {
	display: none;
	width: 300px;
	background: var(--background-editor-panel);
	font-size: 1.7rem;
	padding: 3rem;
	position: absolute;
	top: 8.5rem;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 0.5rem;
	box-shadow: 0 1rem 3rem #000;
}

.modal-cover {
	display: none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 5.5rem;
	left: 0;
	background-color: var(--black-70);
}

/** ////////////////////////////////////////////////////////////////////////////////////////// */
/** /////////////////////////////////////////////////////////////////////////////////  Nav  // */
/** ////////////////////////////////////////////////////////////////////////////////////////// */

nav {
	font-size: 1.6rem;
	align-items: center;
	background: var(--background-nav);
	box-shadow: 0 0 15px hsl(0deg 0% 0% / 50%);
  /* border-bottom: 1px solid var(--turquoise); */
	display: grid;
	grid-template-columns: auto max-content;
	height: 5.5rem;
	padding: 0 .7em;
	position: relative;
	user-select: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 4;
}

#buttons > div {
	display: inline-block;
	background: var(--black-20);
	border-radius: 30px;
	font-size: 1.6rem;
	font-family: 'Roboto', sans-serif;
	padding: .5em 1em;
	outline: none;
	border: none;
	color: #fff;
	vertical-align: middle;
	text-decoration: none;
	height: 34px;
	transition: all .2s ease-in-out;
	cursor: pointer;
	user-select: none;
}

#buttons > div svg {
	fill: #fff;
	width: 1.8rem;

}

#buttons > div:hover {
	background: var(--black-30);
	transition: all .2s ease-in-out;
}

#search_wrapper {
	display: inline-block;
	position: relative;
}

#search {
	width: 5.2em;
	transition: width .2s ease-in-out;
}

#search.active {
	width: 15em;
	padding: 0.5em 2.6em 0.5em 1em;
	transition: width .2s ease-in-out;
}

#search::placeholder {
	color: #fff;
	opacity: 1;
}

#search.active::placeholder {
	opacity: 0;
}

#search_clear {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 4rem;
	text-align: center;
	cursor: pointer;
}

#search_clear svg {
	fill: var(--white-50);
	width: 40%;
	margin-top: .4rem;
	transition: all .2s ease-in-out;
}

#search_clear:hover svg {
	fill: var(--white);
	transition: all .2s ease-in-out;
}


.nav-button {}

.nav-button svg {
	fill: var(--white-50);
	transition: all .2s ease-in-out;
}

.nav-button:hover svg {
	fill: var(--white);
	transition: all .2s ease-in-out;
}

.fab {
	position: fixed;
	bottom: 4rem;
	right: 4rem;
	width: 5.5rem;
	height: 5.5rem;
	fill: var(--green);
	background: hsl(145 100% 15% / 1);
	border-radius: 3rem;
	box-shadow: 0 10px 20px 10px hsl(0deg 0% 0% / 35%);
}


/** ////////////////////////////////////////////////////////////////////////////////////////// */
/** //////////////////////////////////////////////////////////////////////////////// Login  // */
/** ////////////////////////////////////////////////////////////////////////////////////////// */

#login h2 {
	margin-top: 0;

}

#login input {
	background: var(--background-input);
	padding: 0.8rem 1rem;
	width: 100%;
	margin: 0.5rem 0 2rem 0;
	border-radius: 0.2rem;
	border: 0;
	font-size: 1.7rem;
}

#login_error {
	color: var(--red);
	display: none;
}


/** ////////////////////////////////////////////////////////////////////////////////////////// */
/** ///////////////////////////////////////////////////////////////////////// Notification  // */
/** ////////////////////////////////////////////////////////////////////////////////////////// */

#notification {
	display: none;
	position: fixed;
	bottom: 0;
	width: 100%;
	background: var(--background-notification);
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.7rem;
	padding: 1.4rem 1.4rem 1.8rem;
	max-width: 53rem;
	box-shadow: 0 0 0 3000px var(--black-50), 0 1rem 3rem #000;
  border-top: 1px solid var(--turquoise);
  max-height: 300px;
  overflow-y: auto;
}

#notification_title {
	font-size: 2.2rem;
  letter-spacing: 0.02em;
  font-weight: 600;
	font-family: 'Roboto Slab', sans-serif;
  color: var(--turquoise);
  margin-right: 8rem;
}

#notification_text {
	margin-top: 1.5rem;
}

#notification_error {
	margin-top: 1.5rem;
  display: none;
}

#notification_close {
	width: 4rem;
	height: 4rem;
	cursor: pointer;
	padding: 1.3rem 0 0 0.5rem;
	position: absolute;
	top: 0;
	right: 0;
}

#notification_info {
	width: 4rem;
	height: 4rem;
	cursor: pointer;
	padding: 1.7rem 0 0 0.5rem;
	position: absolute;
	top: 0;
	right: 4rem;
  display: none;
}

#notification_close svg {
	width: 45%;
	fill: #fff;
}

#notification_info svg {
	width: 55%;
	fill: #fff;
}

#notification.error {
  border-top: 1px solid var(--error);
}

#notification.error #notification_title {
	color: var(--error);
}

#notification.error #notification_info {
  display: block;
}


/** ////////////////////////////////////////////////////////////////////////////////////////// */
/** ///////////////////////////////////////////////////////////////////////  Media Queries  // */
/** ////////////////////////////////////////////////////////////////////////////////////////// */

/*? // NOTE: Relative Units in media queries are always based off the initial root value (16) and ignore declared values */
/*? // NOTE: So REM units must be based on 16px instead of the 10px declared for the HTML attribute */

@media all and (max-width: 1570px) {
	#editor {
		border-radius: 0;
		margin: 0;
		max-width: unset;
		width: 100%;
		min-height: calc(100vh - 5.5rem);
		padding: 3rem 4rem;
	}
}