* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: #d6dbe8;
	font-family: Verdana, Arial, sans-serif;
	color: #222;
}

#topbar {
	height: 60px;

	background: linear-gradient(
		to bottom,
		#6d95ff,
		#3d67d6
	);

	color: white;

	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 0 20px;

	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

#logo {
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 1px;
}

#accountBar {
	display: flex;
	align-items: center;
	gap: 12px;
}

#navbar {
	height: 45px;

	background: linear-gradient(
		to bottom,
		#f5f5f5,
		#d8d8d8
	);

	display: flex;
	align-items: center;

	padding: 0 10px;

	gap: 8px;

	border-bottom: 1px solid #b0b0b0;
}

#navbar button {
	height: 30px;

	padding: 0 16px;

	border: 1px solid #8f8f8f;

	background: linear-gradient(
		to bottom,
		white,
		#d9d9d9
	);

	cursor: pointer;

	font-size: 14px;

	border-radius: 4px;
}

#navbar button:hover {
	background: linear-gradient(
		to bottom,
		#ffffff,
		#ececec
	);
}

#navbar button:active {
	background: #cfcfcf;
}

#content {

	width: min(1200px, 95vw);

	min-height: 650px;

	margin: 30px auto;

	background: white;

	border-radius: 10px;

	padding: 25px;

	box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.page h1 {
	margin-bottom: 20px;
}

.page p {
	margin-bottom: 15px;
	line-height: 1.5;
}

.smallPage {
	max-width: 420px;
	margin: auto;
}

.smallPage h1,
.smallPage h2 {
	margin-bottom: 15px;
}

.smallPage input {

	width: 100%;

	padding: 10px;

	margin-bottom: 12px;

	border: 1px solid #b8b8b8;

	border-radius: 5px;

	font-size: 15px;
}

.smallPage button {

	width: 100%;

	padding: 10px;

	margin-bottom: 20px;

	border: 1px solid #777;

	border-radius: 5px;

	cursor: pointer;

	background: linear-gradient(
		to bottom,
		#ffffff,
		#d8d8d8
	);
}

.smallPage button:hover {

	background: linear-gradient(
		to bottom,
		#ffffff,
		#eeeeee
	);
}

hr {
	margin: 25px 0;
}

#message {
	margin-top: 10px;
	font-weight: bold;
}

#statusBar {

	height: 35px;

	background: #d0d0d0;

	border-top: 1px solid #a5a5a5;

	display: flex;
	align-items: center;

	padding-left: 20px;

	color: #444;
}

button {
	font-family: inherit;
}

input {
	font-family: inherit;
}

#profileHTML,
#profileCSS {

	width:100%;

	height:250px;

	font-family:monospace;

	margin-bottom:20px;

	padding:10px;

}

#logoutButton {
	padding: 6px 14px;

	border: 1px solid #888;

	border-radius: 4px;

	cursor: pointer;

	background: white;
}

#logoutButton:hover {
	background: #f2f2f2;
}

.hidden {
	display: none;
}

.friend-card,
.friend-request,
.user-card {

	background:#ece9d8;

	border:2px solid #0831d9;

	padding:10px;

	margin:10px;

	border-radius:5px;

}


.friend-card a,
.user-card a {

	font-weight:bold;

	font-size:18px;

}