styles.css

* {
	box-sizing: border-box;
}

html {
	font-family: "Proxima Nova", sans-serif;
	font-size: 16px;
}

body {
	padding: 0 0 4rem;
}

input[disabled] {
	color: #aaa;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input:not([type="checkbox"]),
textarea {
	background: #f9f9f9;
	border: none;
	border-radius: 4px;
	outline: none;
	width: 100%;
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 13px;
	resize: none;
}

select {
	background: #f9f9f9 url("assets/icon-dropdown.svg") no-repeat;
	background-position: right 10px center;
	border: none;
	border-radius: 4px;
  appearance: none;
	outline: none;
	display: block;
	padding: 1rem;
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	-webkit-appearance: none;
	   -moz-appearance: none;
}

textarea {
	line-height: 1.4;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a.button,
button {
	background: #cacaca;
	border: none;
	border-radius: 4px;
	display: inline-block;
	padding: 0.6rem 1rem 0.5rem;
	color: #fff;
	font-size: 12px;
	vertical-align: middle;
	cursor: pointer;
	transition:
		color 200ms ease,
		border 200ms ease,
		background 200ms ease;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

a.button.primary,
button.primary {
	background: #58d18c;
	padding-right: 1.2rem;
	padding-left: 1.2rem;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

a.button.primary.disabled,
button.primary.disabled {
	color: #8ddbaf;
}

a.button.destructive,
button.destructive {
	background: transparent;
	border: 1px #ccc solid;
	color: #999;
}

a.button.destructive:hover,
button.destructive:hover {
	border-color: #f58866;
	color: #f58866;
}

.main {
	margin: 0 auto;
	max-width: 40rem;
}

/**
 * Forms
 */

.form-field input:not([type="checkbox"]),
.form-field textarea {
	padding: 1rem;
}

.project-draft-checkbox {
	cursor: pointer;
}

.project-draft-checkbox-box {
	display: inline-block;
	background: #f2f2f2;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 4px;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	cursor: pointer;
}

.project-draft-checkbox input[type="checkbox"] {
	display: none;
}

input[type="checkbox"]:checked + .project-draft-checkbox-box {
	background-image: url("assets/icon-check.svg");
}

input[type="checkbox"][disabled]:checked + .project-draft-checkbox-box {
	background-image: url("assets/icon-check-disabled.svg");
}

.form-field .project-draft-checkbox-box {
	position: relative;
	top: -1px;
	margin: 0 0.4em 0 0;
	padding: 0;
}


.form-field-note {
	font-size: 12px;
}

.field-help-text {
	margin-top: 10px;
	color: #ccc;
	font-size: 12px;
}

.field-help-text a {

}

.form-field-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.form-error-list {
	background: #f00;
	padding: 1rem;
}


.button.dangerous {
	background: none;
	align-self: stretch;
	border: 1px #ccc solid;
	border-radius: 3px;
	color: #ccc;
	cursor: pointer;
}

/**
 * Callouts
 */

.callout {
	border: 1px transparent solid;
	border-radius: 4px;
	margin-bottom: 2rem;
	padding: 0.75em 1.25em;
	font-size: 14px;
	line-height: 1.5;
}

.callout.notice {
	background: #fcf8e3;
	border-color: #faf2cc;
	color: #8a6d3b;
}

.callout.error {
	border-color: #ebccd1;
	color: #a94442;
	background-color: #f2dede;
}

.callout p {
	margin: 0;
}

/**
 * Login Page
 */

.login-form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 25rem;
	text-align: center;
}

.login-form input {
	margin-bottom: 0.5em;
	padding: 1rem;
	line-height: 1.5;
}

.login-form .login-button {
	margin-top: 0.5rem;
	padding: 1rem 0;
	width: 100%;
	height: auto;
	font-size: 14px;
	text-align: center;
}

.login-form-help {
	font-size: 12px;
}

.login-form-help a {
	color: #298e54;
}

.login-form-error {
	position: absolute;
	top: -6rem;
	left: 0;
	right: 0;
	color: #e76b2e;
	font-size: 14px;
	text-align: center;
}

/**
 * Home Page
 */

.profile-preview {
	border: 1px #f2f2f2 solid;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 3rem;
	padding: 1rem;
	font-size: 14px;
}

.profile-preview-name {
	font-weight: bold;
}

.projects-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.projects-list-title {
	font-weight: bold;
}

.project-preview {
	border: 1px #f2f2f2 solid;
	border-radius: 4px;
	display: flex;
	margin: 0 0 0.75rem;
	line-height: 1.5;
}

.project-preview-thumbnail {
	flex-basis: 90px;
	background: #f2f2f2;
	background-position: center;
	background-size: cover;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.project-preview-details {
	padding: 1.5rem 1rem 1.5rem 1.5rem;
}

.project-preview-title {
	display: block;
	font-weight: bold;
	margin-bottom: 0.125rem;
}

.project-preview-badge {
	margin-left: 0.25em;
	border: 1px currentColor solid;
	border-radius: 3px;
	padding: 0.1rem 0.2rem;
	color: #f5ae7a;
	font-size: 9px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: middle;
}

.project-preview-slug {
	opacity: 0.5;
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 11px;
}

.project-create-nux {
	border: 1px #f2f2f2 solid;
	border-radius: 4px;
	display: block;
	padding: 2rem;
	text-align: center;
}

.project-create-prompt {
	margin: 0 0 1rem;
	color: #999;
	font-size: 11px;
}

/**
 * Project Form
 */

.project-form {
	transition: opacity 200ms ease;
}

.project-form.loading {
	opacity: 0.0;
}

.project-form-header,
.project-form-footer {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.project-form-footer {
	margin: 4rem 0 0;
}

.project-form-header-context {
	vertical-align: middle;
}


.form-field {
	position: relative;
	display: block;
	margin-bottom: 3rem;
}

.form-field-row {
	margin-top: 14px;
}

.form-field-thin {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

.form-field-thin .form-field-label {
	background: #f2f2f2;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	display: flex;
	align-self: stretch;
	align-items: center;
	padding-left: 1rem;
	vertical-align: middle;
	flex: 1 0 20%;
	margin-bottom: 0;
	text-transform: none;
}
.form-field-thin .form-field-label + input {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.form-field-thin--url-error .form-field-label,
.form-field-thin--not-url-error .form-field-label {
	background: #f2dede;
}

.form-field-thin--url-error input,
.form-field-thin--not-url-error input {
	background: #f7e9e9;
}

.form-field-thin--url-error::after,
.form-field-thin--not-url-error::after {
	content: 'No URLs, just the username';
	position: absolute;
	padding: 1rem;
	right: 4px;
	color: #d76b6b;
	font-size: 12px;
}

.form-field-thin--not-url-error::after {
	content: 'Invalid URL (include the http://)';
}

.form-field-header {
	display: flex;
	justify-content: space-between;
	margin: 2.5rem 0 0.5rem;
}

.form-field-help-text {
	color: #999;
	font-size: 11px;
}

.field-help-text a {
	border-bottom: 1px currentColor solid;
}

.project-form-error {
	background: #f65c4d;
	position: absolute;
	left: 0;
	padding: 0.5rem;
	width: 200px;
	color: #fff;
	font-size: 13px;
}

.project-slug {
	margin-top: 0.5rem;
	font-size: 12px;
}

.option-project-type-list {
	display: flex;
}

.option-project-type {
	border: 1px #efefef solid;
	border-radius: 4px;
	flex: 1 0 50%;
	padding: 0.75rem 1rem;
	font-size: 13px;
	line-height: 1.35;
	cursor: pointer;
	opacity: 0.5;
	transition:
		background 100ms ease,
		opacity 100ms ease,
		border 100ms ease;
}

.option-project-type--selected {
	background: #fafafa;
	border: 1px #eaeaea solid;
	opacity: 1.0;
}

.option-project-type:first-child {
	border-right-color: transparent;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.option-project-type:last-child {
	border-left-color: transparent;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.option-project-type--selected:first-child {
	border-right: 1px #eaeaea solid;
}

.option-project-type--selected:last-child {
	border-left: 1px #eaeaea solid;
}

.option-project-type-title {
	font-weight: bold;
}

.option-project-type-note {
	color: #777;
	font-size: 11px;
}

/**
 * Profile Form
 */

.profile-side-notes-help-text {
	margin-bottom: 2rem;
}

.profile-side-notes-options {
	display: flex;
	flex-wrap: wrap;
}

.profile-side-notes-option {
	display: flex;
	flex: 1 0 100%;
	flex-direction: column;
	margin-bottom: 1rem;
}

.profile-side-notes-option--disabled {
	opacity: 0.5;
}

.profile-side-notes-option-header {
	display: flex;
	margin-bottom: 1rem;
}

.profile-side-notes-option-label {
	cursor: pointer;
	font-weight: bold;
	margin-bottom: 0.25rem;
}

.profile-side-notes-option-help {
	font-size: 12px;
	max-width: 35em;
}

.profile-side-notes-option-checkbox {
	display: inline-block;
	background: #f2f2f2;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 4px;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	cursor: pointer;
	margin: 0.15rem 1rem 0 0.25rem;
}

.profile-side-notes-option-checkbox--enabled {
	background-image: url("assets/icon-check.svg");
}

.profile-side-notes-option-editor {
	margin-left: 2.75rem;
}

/**
 * Dropzone
 */

.dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	/*background: #f9f9f9;*/
}

.dropzone-prompt {
	border: 1px #cfcfcf dashed;
	border-radius: 4px;
	position: relative;
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	margin-bottom: 2rem;
	padding: 2rem;
	width: 100%;
	font-size: 12px;
}


.dropzone--has-files .dropzone-prompt {
	border-color: #e2e2e2;
	padding: 1.5rem 2rem;
	font-size: 10px;
}

.dropzone--has-files .dropzone-help-icon {
	max-width: 36px;
}

.dropzone-help {
	position: relative;
	display: flex;
	align-items: center;
	color: #999;
	text-align: center;
	-webkit-user-select: none;
}

.dropzone-help-text {
	color: #b2b2b2;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.dropzone-help-icon {
	display: inline-block;
	padding-right: 1em;
}

.dropzone-spinner {
	display: inline-block;
	border: 3px #ccc solid;
	border-top-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	margin-right: 12px;
	-webkit-animation: rotate 600ms linear infinite;
	animation: rotate 600ms linear infinite;
}

.dropzone-over-limit {
	margin-bottom: 2rem;
	color: #7f7f7f;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

.dropzone-over-limit a {
	border-bottom: 1px currentColor solid;
}

.dropzone input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.0;
	margin: 0;
	cursor: pointer;
}

.dropzone-files {
	/*border: 1px #efefef solid;*/
	padding: 1rem 0;
	width: 100%;
	text-align: center;
}

.dropzone-file {
	cursor: move;
	display: flex;
	flex-basis: 90%;
	padding-bottom: 0.5rem;
	font-size: 12px;
	text-align: left;
}

.dropzone-file-preview {
	background: #ccc;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	overflow: hidden;
	margin-right: 1.5rem;
	width: 80px;
	height: 80px;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}

.dropzone-file-preview img {
	max-width: 100%;
	height: auto;
}

.dropzone-file-meta {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
	padding: 0.5em 0;
}

.dropzone-file-name {
	display: block;
	font-weight: bold;
}

.dropzone-file-size.medium {
	color: #dfa44c;
}
.dropzone-file-size.large {
	color: #e76b2e;
}
.dropzone-file-size.massive {
	color: #ff4b4b;
}

.dropzone-file-actions {
	display: flex;
	align-items: center;
	margin-left: auto;
	padding: 0.5em 0;
}

.dropzone-action {
	display: inline-block;
	margin: 0 0.25rem;
	font-weight: bold;
}

.dropzone-action::before {
	content: " ";
	display: inline-block;
	margin-right: 0.5rem;
	width: 10px;
	height: 10px;
}

.dropzone-action-insert {
}

.dropzone-action-delete {
}

.dropzone-action-delete:hover {
	color: #f65c4d;
}

/**
 * Editor
 */

.editor {
}

.editor textarea {
	margin: 0;
	padding: 1rem 1rem;
}

.editor:not(.editor--no-controls) textarea {
	border-top-left-radius: 0;
}

.editor--character-limit textarea {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	vertical-align: top;
}

.editor--character-limit-error .editor-limit {
	color: #ef4862;
}

.editor--character-limit-error textarea,
.editor--character-limit-error .editor-limit,
.editor--character-limit-error .editor-action {
	background: #fff5f7;
}

.editor-action-bar {
	display: flex;
	justify-content: space-between;
}

.editor-actions {
	display: flex;
}

.editor-action {
	background: #f9f9f9;
	display: flex;
	opacity: 0.25;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.25rem 0.5rem 1rem;
	font-size: 13px;
	font-weight: bold;
	vertical-align: middle;
	cursor: pointer;
}

.editor-action:first-child { border-top-left-radius: 4px; }
.editor-action:last-child { border-top-right-radius: 4px; }

.editor-action:hover { opacity: 0.5; }
.editor-action.active { opacity: 1.0; }

.editor-action::before {
	content: '';
	display: block;
	background: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	width: 14px;
	height: 14px;
	margin-right: 0.5rem;
	opacity: 0.5;
}

.editor-markdown-action::before {
	background-image: url('assets/icon-edit.svg');
	width: 11px;
	height: 11px;
}

.editor-preview-action::before {
	background-image: url('assets/icon-view.svg');
}

.editor-help-markdown {
	align-self: center;
	padding: 0.75rem 1rem;
	color: #999;
	font-size: 11px;
}

.editor-help-markdown::before {
	background: transparent url('assets/icon-markdown.svg') no-repeat;
	background-size: contain;
	content: " ";
	display: inline-block;
	margin-right: 8px;
	width: 17px;
	height: 12px;
	vertical-align: middle;

	shape-rendering: crispEdges;
}

.editor-limit {
	background: #f9f9f9;
	padding: 0 1rem 0.75rem;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	color: #999;
	font-size: 12px;
	text-align: right;
}

.editor-limit-number {
	cursor: help;
}

.editor-preview {
	background: #f9f9f9;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding: 1rem 1.5rem;
	font-size: 18px;
	line-height: 1.5;
}

.editor-preview a {
	border-bottom: 1px currentColor solid;
	color: #5ac2b4;
}

.editor-preview a.button {
	background: #444;
	border-bottom: none;
	min-width: 120px;
	color: #fff;
	text-align: center;
}

.editor-preview blockquote {
	border-left: 3px rgba(0, 0, 0, 0.1) solid;
	margin: 1em 0;
	padding: 0 0 0 0.75em;
}

.editor-preview .fluid-width-video-wrapper {
	margin: 1rem 0;
}

.editor-preview img {
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	user-drag: none;
}

/**
 * Utilities
 */

.hidden {
	display: none;
}

[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

[is-dragged-over] {
	opacity: 0.6;
}

[is-dragged] {
	opacity: 0.2;
}

@font-face {
	font-family: "Proxima Nova";
	font-weight: normal;
	font-style: normal;
	src: url("assets/fonts/ProximaNova-Regular.woff") format("woff"),
	url("assets/fonts/ProximaNova-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Proxima Nova";
	font-weight: bold;
	font-style: normal;
	src: url("assets/fonts/ProximaNova-Semibold.woff") format("woff"),
	url("assets/fonts/ProximaNova-Semibold.ttf") format("truetype");
}

@-webkit-keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}