@import url("reset.css");

:root {
	--default-background-color: #FFFFFF;
	--default-background-color-inverse: #000000;
	--default-font-color: #eeeeee;
	--default-font-color-inverse: #CCCCCC;
	--default-rounding-radius: 3px;
	--default-border-size: 1px;
	--default-container-padding-top: 5px;
	--default-container-padding-right: 15px;
	--default-container-padding-bottom: 5px;
	--default-container-padding-left: 15px;
	--default-container-padding: var(--default-container-padding-top) var(--default-container-padding-right);
	--default-container-margin: 24px;

	--default-button-padding-top: 5px;
	--default-button-padding-right: 15px;
	--default-button-padding-bottom: 5px;
	--default-button-padding-left: 15px;
	--default-button-padding: var(--default-button-padding-top) var(--default-button-padding-right);

	--default-button-margin-top: 4px;
	--default-button-margin-right: 0px;
	--default-button-margin-bottom: 4px;
	--default-button-margin-left: 0px;
	--default-button-margin: var(--default-button-margin-top) var(--default-button-margin-right);

	--primary-button-background-color: #3498db;
	--primary-button-background-color-hover: #2980b9;
	--primary-button-font-color: #ffffff;
	--primary-button-accent-color: #2980b9;

	--secondary-button-background-color: #2ecc71;
	--secondary-button-background-color-hover: #27ae60;
	--secondary-button-font-color: #ffffff;
	--secondary-button-accent-color: #27ae60;

	--button-font-size: 16px;
	--button-font-weight: 600;
	--button-padding-top: 6px;
	--button-padding-right: 24px;
	--button-padding-bottom: 6px;
	--button-padding-left: 24px;
	--button-padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
	--button-margin-top: 8px;
	--button-margin-right: 8px;
	--button-margin-bottom: 8px;
	--button-margin-left: 8px;
	--button-margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);
	--button-border-radius: 4px;


	--mahoganyRgb: 58, 22, 8;
	--velvetyRedRgb: 85, 0, 0;
	--velvetyRedDarkRgb: 61, 0, 17;

	--mahogany: rgb(var(--mahoganyRgb));
	--velvety-red: rgb(var(--velvetyRedRgb));
	--velvety-red-dark: rgb(var(--velvetyRedDarkRgb));
}

body {
	background-color: var(--default-background-color);
	color: var(--default-font-color);
}

h1 {
	color: blue;
}

h3 {
	text-align: center;
	color: var(--default-font-color);
	padding: 8px;
}

button.btn {
	padding: var(--button-padding);
	margin: var(--button-margin);
	cursor: pointer;
	border: none;
	border-radius: var(--button-border-radius);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	transition: background-color 0.3s ease;
}

button.btn:active {
	transform: translateY(1px);
}

button.btn.primary {
	background-color: var(--primary-button-background-color);
	color: var(--primary-button-font-color);
}

button.btn.primary:hover,
button.btn.primary:focus {
	background-color: var(--primary-button-background-color-hover);
}

button.btn.secondary {
	background-color: var(--secondary-button-background-color);
	color: var(--secondary-button-font-color);
}

button.btn.secondary:hover,
button.btn.secondary:focus {
	background-color: var(--secondary-button-background-color-hover);
}

.hidden {
	opacity: 0;
}

.fade-in {
	transition: opacity 0.2s linear;
}