:root {
	--light-green: #f6efa6;
	--mid-green: #48BB78;
    --rose: #ffe3e6;
	--mid-rose: #f97583;
    --dark-rose: #e5534b;
	--grape: #7848bb;
    --dark-grey: #22272e;
    --mid-dark-grey: #373e47;
    --mid-grey: #636e7b;
    --mid-light-grey: #909dab;
    --light-grey: #cdd9e5;
    --hyperlink-color: #539bf5;
}


body {
	color: var(--mid-light-grey);
    background: var(--dark-grey);
}


a {
	color: var(--hyperlink-color);
}

mark {
	background-color: var(--light-green);
}

/* default form stylings */
input, select {
	color: var(--mid-light-grey);
	background-color: var(--mid-dark-grey);
	border-bottom: 3px var(--mid-grey) solid;
}

input:focus:not([type="submit"]), input:hover:not([type="submit"]), select:focus, select:hover {
	border-color: var(--mid-green);
}

.folder-cont {
	border-left: 2px var(--mid-green) solid;
}
.folder-cont h3 {
	color: var(--mid-light-grey);
}
.folder-cont a {
	color: var(--mid-light-grey);
}
.sidebar {
	border-right: 5px solid var(--mid-dark-grey);
}

#main-links .btn {
	color: var(--mid-light-grey);
	background-color: var(--mid-dark-grey);
	border-color: var(--mid-grey);
}

#main-links .btn:hover, .btn.hover, [open] > .btn {
	background-color: var(--mid-grey);
	transition-duration: 0.1s;
}

#current-path a {
	color: var(--hyperlink-color);
}
#files ul li {
	border-top: 1px var(--mid-grey) solid;
}

#files ul a {
	color: var(--mid-light-grey);
}
#post-btns button {
	color: var(--mid-light-grey);
	background-color: var(--mid-dark-grey);
	border-color: var(--mid-grey);
}

#post-btns .btn:hover, .btn.hover, [open] > .btn {
	background-color: var(--mid-grey);
	transition-duration: 0.1s;
}
.post-title-form-sucess {
	color: var(--mid-green);
}

.post-tags span {
    color: var(--mid-dark-grey);
	background: var(--light-green);
}

/*Partly inspired by Primer -> https://github.com/primer/css*/
.Header {
	color: var(--mid-light-grey);
    background-color: var(--mid-dark-grey) !important;
}

.Header-link {
	color: var(--light-grey);
}
.flash {
	color: var(--mid-dark-grey);
}

.flash-error {
	background-color: var(--rose);
	border-color: var(--dark-rose);
}

.flash-success {
	color: var(--mid-light-grey);
	background-color: var(--mid-dark-grey);
	border-color: var(--mid-grey);
}


.btn {
	color: var(--mid-light-grey);
	background-color: var(--mid-dark-grey);
	border-color: var(--mid-grey);
	box-shadow: 0 1px 0 var(--dark-grey),inset 0 1px 0 var(--mid-dark-grey);
}

.btn:hover, .btn.hover, [open] > .btn {
	background-color: var(--mid-grey);
}

#link-form {
	border: 1px var(--light-grey) solid;
	background-color: var(--light-grey);
}
