:root {
	/* Info */
	--msg-info-bg: #d9edf7;
	--msg-info-color: #31708f;
	--msg-info-border: #bce8f1;

	/* Warning */
	--msg-warn-bg: #fcf8e3;
	--msg-warn-color: #8a6d3b;
	--msg-warn-border: #faebcc;

	/* Error */
	--msg-error-bg: #f2dede;
	--msg-error-color: #a94442;
	--msg-error-border: #ebccd1;

	/* Common */
	--msg-padding: 0.75em 1em;
	--msg-radius: 4px;
	--msg-font: 16px/1.4 sans-serif;
}

body {
	margin: 0;
	font-family: sans-serif;
}

a {
	text-decoration: none;
	color: #333;
}

header {
	/*background-color: #90EE90;*/
	/*background-color: #CF9FFF;*/
	background-color: #c3e0ed;
}

header {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}



footer, footer a {
	color: #919297;
	display: flex;
	justify-content: space-between;
}

footer .copy-right {
	margin-left: 10px;
	text-align: center;
	padding-top: 10px
}

footer nav {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-top: 10px;
	padding-bottom: 20px;
	margin-right: 20px;
}


.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-left {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 40px;
}

.header-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 40px;
}

.header-user-link {
	display: flex;
	align-items: center;
}

#header-user-name {
	margin-left: 15px;
}

.menu-item {
	margin-left: 2px;
}

/* 2. Base “message” class */
.message {
	font: var(--msg-font);
	padding: var(--msg-padding);
	border: 1px solid transparent;
	border-radius: var(--msg-radius);
	margin: 0.5em 0;
    cursor: pointer;
}

/* 3. Modifiers for each type */
.message.info {
	background-color: var(--msg-info-bg);
	color: var(--msg-info-color);
	border-color: var(--msg-info-border);
}

.message.warn {
	background-color: var(--msg-warn-bg);
	color: var(--msg-warn-color);
	border-color: var(--msg-warn-border);
}

.message.error {
	background-color: var(--msg-error-bg);
	color: var(--msg-error-color);
	border-color: var(--msg-error-border);
}

button {
  align-self: end;
  padding: .8rem 1.1rem;
  border: 0;
  border-radius: 10px;
  background: #265a81;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .02s;
}

#link-to-account-page-container {
	margin-top: 30px;
	margin-left: 40px;
	margin-bottom: 30px;
}
