/* colors */

:root {
    --primary: #fff;
	--primaryLight: #eaeaea;
	--primaryDark: #ccc;
	
	--background: #1f1f1f;
	--text: #fff;
	--textLight: #eaeaea;
	--textDark: #24292e;
}

body {
	background-color: #1f1f1f!important;
	color: #fff!important;
}

.pageHeight {
	min-height: calc(100vh - 165px);
}

/* links */

a {
	color: #fff;
	cursor: pointer;
}

a.link:hover {
	color: #eaeaea;
}

a.link:active {
	color: #ccc;
}

a.noUnderline {
	text-decoration: none;
}

/* helpers */

.inline-seperator {
	margin: 0 6px;
}

/* navbar */

.nav {
	display: flex;
	align-items: center;
	position: fixed;
	width: 100%;
	top: 0;
	min-height: 77px;
	background-color: rgba(48, 48, 48, .97);
	box-shadow: 0 0.25em 0.25em rgba(0,0,0,.075);
	border-bottom: 1px solid rgb(50, 50, 50, .9);
}

.nav-height {
	min-height: 78px;
}

.nav-margin {
	margin-top: 78px;
}

.nav .logo h1 {
	font-size: 2.5rem!important;
	margin: auto 8px;
	text-decoration: none;
}

.nav .nav-link {
	text-decoration: none;
	cursor: pointer;
	font-size: 1.075rem;
}

.nav .item {
	display: flex;
	align-items: center;
	cursor: pointer;
	outline: none;
	font-size: 1.075rem;
	font-weight: 500;
	height: 78px;
	transition: .1s ease-in-out;
}

.nav .item > span {
	margin: auto 12px;
}

.nav .item .material-icons {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.25rem;
}

.nav .item:not(.logo):hover {
	background-color: rgba(56, 56, 56, 0.9);
}

.nav .item:not(.logo):active {
	background-color: rgba(48, 48, 48, .9);
}

.nav .item:not(.logo):focus {
	background-color: rgba(0, 0, 0, 0.1);
}

.nav .item.active {
	background-color: rgba(41, 41, 41, 0.9);
}

.nav .item.active:hover {
	background-color: rgba(56, 56, 56, 0.1);
}

.nav .item.active:active {
	background-color: rgba(7, 7, 7, 0.185);
}

.nav .nav-pfp {
	line-height: 0;
}

.nav .nav-pfp img {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin: auto 10px;
}

/* nav dropdown */
.pfp-dropdown-container {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
}

.pfp-dropdown {
	float: right;
	text-align: left;
	z-index: 10;
	box-sizing: border-box;
    background-color: rgb(50, 50, 50);
	color: rgb(240, 240, 240);
	border: 1px solid rgba(67, 67, 67, 0.92);
	border-radius: 6px;
    min-width: 10rem;
	font-size: .95rem;
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.dropdown .items {
	padding: .5rem 0 .5rem 0;
}

.dropdown-item {
	display: block;
	position:relative;
	padding: .85rem 2rem .85rem 1.25rem;
	outline: none;
	text-decoration: none;
}

a.dropdown-item {
	color: rgb(237, 237, 237);
	padding: .55rem 2rem .55rem 1.25rem;
	cursor: pointer;
}

.dropdown-item .material-icons {
	font-size: inherit;
	margin-right: 8px;
}

.dropdown-item .dp-text {
	display: flex;
	align-items: center;
}

a.dropdown-item:hover {
	background-color: rgb(54, 54, 54);
}

a.dropdown-item:active {
	background-color: rgb(41, 41, 41)
}

a.dropdown-item:focus {
background-color: rgb(40, 40, 40);
}

.divider {
	background-color: rgba(67, 67, 67, 0.92);
	overflow: hidden;
	height: 1px;
}

/* top */

.top {
	text-align: center;
	margin-bottom: 1rem;
}

.hero {
	background: rgba(95, 150, 80, 0.4) url('https://flolon.cc/assets/images/banner.jpg') center center no-repeat;
	background-size: cover;
}

/* logo */

.logo {
	display: inline-block;
}

.logo h1 {
	display: inline-block;
	font-family: 'Reenie Beanie', Roboto, -apple-system, BlinkMacSystemFont,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 3.75rem;
	margin: 1rem auto 1rem auto;
	color: #a3e05e;
}

.logo.white-text h1 {
	font-size: 5.5rem;
	margin: 4rem auto 4rem auto;
	color: #fff;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, .55);
}

/* content */

h1.title {
	font-family: 'Roboto Slab', serif;
	font-weight: 500;
	font-size: 2.55rem;
	margin-bottom: 0;
}

.meta{
	margin-bottom: 1.5rem;
}

.sub {
	display: block;
	color: rgba(255, 255, 255, 0.87);
	margin: .75rem 0 1rem 0;
}

.subBottomMargin {
	margin: .5rem 0 1.5rem 0;
}

.card .sub.inline {
	margin: .5rem 0 .5rem 0;
}

.sub.inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	line-height: 0;
}

.sub .username {
	display: flex;
	align-items: center;
}

.sub .icon {
	margin-right: 5px;
}

.sub #username {
	display: flex;
	line-height: 0;
}

.sub .spacer {
	margin: 0 .5rem;
	color: rgba(255, 255, 255, 0.6);
}

.sub .date {
	display: flex;
	align-items: center;
}

.tag {
	display: inline-block;
	background-color: rgba(39, 39, 39, .9);
	color: rgba(255, 255, 255, 0.5);
	padding: 2px 8px 3px 8px;
	font-size: .9rem;
	border-radius: 3px;
	margin: 2px 3px 2px 0;
	line-height: normal;
}

.tag.dark {
	background-color: rgba(53, 53, 53, 0.77);
	color: rgba(255, 255, 255, 0.55);
}

/* main text */

.main-text {
	max-width: 840px;
	color: rgba(255, 255, 255, .9);
}

p {
	font-family: 'Roboto', monospace;
	font-size: 1.05rem;
}

.post-card {
	display: block;
	text-decoration: none;
	margin-bottom: .5rem;
}

/* cards */

.card {
	background-color: rgba(36, 36, 36, 0.85);
	border: 1px solid rgba(48, 48, 48, .94);
	padding: 8px 16px;
	border-radius: 5px;
	text-decoration: none;
}

.card.shadow {
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}

.post-card .card {
	transition: .1s ease-in-out;
}

.post-card .card:hover {
	background-color: rgba(255, 255, 255, 0.045);
}

.post-card .card:active {
	background-color: rgba(255, 255, 255, 0.065);
}

.post-card .card:focus {
	background-color: rgba(255, 255, 255, 0.025);
}

.card .title {
	font-family: 'Roboto Slab', serif;
	font-weight: 500;
	margin: .5rem 0;
	text-decoration: none;
}

/* buttons */

.button {
	display: inline-block;
	background-color:  #fff;
	color:  #272727!important;
	padding: 8px 1rem;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	transition: .1s ease-in-out;
}

.button:hover {
	background-color:  #eaeaea!important;
}

.button:active {
	background-color:  #ccc!important;
}

.button.primary {
	background-color: rgb(161, 250, 60);
	color: rgb(10, 10, 10)!important;
}

.button.primary:hover {
	background-color: rgb(181, 255, 96)!important;
}

.button.primary:active {
	background-color: rgb(150, 216, 74)!important;
}

.button.danger {
	background-color: rgb(250, 60, 60);
	color: rgb(10, 10, 10)!important;
}

.button.danger:hover {
	background-color: rgb(255, 81, 81)!important;
}

.button.danger:active {
	background-color: rgb(216, 74, 74)!important;
}

.button.outline {
	background-color: transparent;
	color:  rgba(255, 255, 255, 0.95)!important;
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: calc(8px - 1px) 1rem;
}

.button.outline:hover {
	background-color: rgba(255, 255, 255, 0.055)!important;
	border-color: rgba(255, 255, 255, 0.67);
}

.button.outline:active {
	background-color: rgba(255, 255, 255, 0.175)!important;
}

.button.outline:focus {
	background-color: rgba(255, 255, 255, 0.035)!important;
	border: 1px solid rgba(255, 255, 255, 0.88);
}

.button.outline.danger {
	background-color: transparent;
	color: rgb(250, 60, 60)!important;
	border: 1px solid rgb(250, 60, 60);
	padding: calc(8px - 1px) 1rem;
}

.button.outline.danger:hover {
	background-color: rgba(255, 81, 81, 0.055)!important;
	border-color: rgba(255, 81, 81, .67);
}

.button.outline.danger:active {
	background-color: rgba(216, 74, 74, 0.175)!important;
}

.button.small {
	font-size: .95rem;
	padding: 6px .75rem;
}

.button.disabled {
	pointer-events: none;
}

.disabled {
	cursor: not-allowed;
	opacity: .78;
}

.button .material-icons.icon {
	font-size: 1.325rem;
	font-weight: normal;
	display: flex;
	align-items: center;
}

.icon.btn {
	padding: 2px;
	margin: 2px;
	color: rgba(255, 255, 255, 0.75);
	transition: all 0.15s;
}

.icon.btn:hover {
	color: rgba(255, 255, 255, 0.82);
}

.icon.btn:active {
	color: rgba(255, 255, 255, 0.7);
}

.icon.btn.danger {
	color: rgba(250, 60, 60, .88);
}

.icon.btn.danger:hover {
	color: rgba(254, 64, 64, .95);
}

.icon.btn.danger:active {
	color: rgba(250, 60, 60, .9);
}

.icon.btn.trash {
	color: rgba(255, 255, 255, 0.75);
}

.icon.btn.trash:hover {
	color: rgba(254, 64, 64, .95);
}

.icon.btn.trash:active {
	color: rgba(250, 60, 60, .9);
}

/* - form stuff - */

.form .link {
	color: rgba(255, 255, 255, 0.85);
}

.form .link:hover {
	color: rgba(255, 255, 255, 0.92);
}

/* inputs */

.text-input {
	border-radius: 5px;
    border: 1px solid rgba(75, 75, 75, .9);
    background-color: rgba(35, 35, 35, .85);
    color:  #fff;
    text-decoration: none;
    padding: 8px 1rem;
	font-size: 16px;
	max-width: 100%;
	box-sizing: border-box;
}

.text-input.big {
	font-size: 17px;
}

.text-input.block {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.text-input-mb {
	margin-bottom: .6rem;
}

.text-input-mt {
	margin-top: .5rem;
}

.text-input.dark {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.172);
}

.text-input:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.75);
}

.text-input.dark:focus {
	border-color: rgba(255, 255, 255, 0.86);
}

.text-input.has-error {
	border-color: rgba(196, 31, 31, 0.9);
}

.text-input.has-error:focus {
	border-color: rgba(196, 31, 31, 0.9);
}

.input-error {
	color: rgba(194, 32, 32, 0.9);
	margin-top: 4px;
	font-style: italic;
	font-size: .975rem;
}

.select {
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    outline: 0;
    border: none;
	border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.172);
    color:  #fff;
    text-decoration: none;
    padding: 8px 1.75rem 8px 1rem;
	font-size: 100%;
    box-sizing: border-box;
}

.select:focus {
	border-color: rgba(75, 75, 75, .9);
	background-color: rgba(35, 35, 35, .85);
}

/* tables */

.table.full-width {
	width: 100%;
	text-align: left;
}

/* errors */

.error {
	font-size: 1.14rem;
	font-weight: 500;
	border: none;
}

.error.light {
	color:  #eaeaea;
}

.error.red {
	background-color: rgba(189, 27, 27, 0.5);
}

.error.green {
	background-color: rgba(92, 189, 27, 0.5);
}

/* footer */

.footer {
	background-color: rgba(0, 0, 0, 0.115);
    color: rgba(255, 255, 255, 0.6);
	margin-top: 100px;
	padding: 22px 0;
}

.footer .link {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.6);
}

.footer .link:hover {
	text-decoration: underline;
	color: rgba(255, 255, 255, 0.65);
}