app.scss

/*Variables*/
$title-font: "Sue Ellen Francisco", cursive;
$primary-font: "Lato", sans-serif;

$primary-dark-color: #1D1D1D;
$secondary-dark-color: #272822;
$primary-light-color: #f0f0f0;
$primary-button-color: #457095;
$primary-button-disabled-color: #32526d;
$success-button-color: #65af65;
$anchor-color: #457095;
$anchor-hover-color: #88aac8;

$footer-height: 30px;
$footer-line-height: 28px;

@import url('https://fonts.googleapis.com/css?family=Sue+Ellen+Francisco');
@import url('https://fonts.googleapis.com/css?family=Lato');

/*Bootstrap overrides*/
.btn-primary {
	color: #fff;
	background-color: $primary-button-color;
	border-color: $primary-button-color;
	&:disabled {
		background-color: $primary-button-disabled-color;
		border-color: $primary-button-disabled-color;
	}
}

.btn-success {
	color: #fff;
	background-color: $success-button-color;
	border-color: $success-button-color;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
	position: relative;
	min-height: 100%;
}

body {
	/* Margin bottom by footer height */
	margin-bottom: $footer-height;
}

html,
body {
	background: $primary-dark-color;
}

html, body, button, input, optgroup, select, textarea {
	font-family: $primary-font;
}

p {
	color: $primary-light-color;
}

a {
	color: $anchor-color;
	&:hover {
		color: $anchor-hover-color;
	}
}

header {
	margin-top: 20px;
	h1 {
		color: $primary-light-color;
		font-family: $title-font;
		font-size: 3.5rem;
		text-align: center;
	}
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: $footer-height;
	line-height: $footer-line-height; /* Vertically center the text there */
	background-color: $secondary-dark-color;
	color: $primary-light-color;
	p {
		margin-bottom: 0;
	}
}

#darkenizer-description {
	font-size: 1.2em;
	text-align: center;
	line-height: 1.3;
}

#inputTextArea,
#resultTextArea {
	width: 100%;
	background-color: $secondary-dark-color;
	border-color: $secondary-dark-color;
	border-radius: 5px;
	margin-bottom: 10px;
	color: $primary-light-color;
	height: 400px;
}

.darkenizer-word {
	font-family: $title-font;
	font-size: 1.4em;
}

/*Transitions*/
.fade-enter-active, .fade-leave-active {
	transition: opacity .25s
}

.fade-enter, .fade-leave-active {
	opacity: 0
}