:root {
	--primary: #7952b3;
	--secondary: #61428f;
	--border-color: #dee2e6;
	--max-width: 1140px;
	--border-radius: 0.25rem;
	--button-text: #fff;
	--button-focus: 0 0 0 3px rgba(121, 82, 179, 0.25);
	--link-color: #7952b3;
	--text-main: #363636;
	--text-bright: #000;
	--body-bg-color: #f9fafb;
	--footer-bg-color: #fff;
	--form-bg-color: #fff;
	--input-text-color: #000;
	--input-text-disabled: #7a7a7a;
	--input-placeholder-color: #c2c2c2;
	--input-border-color: #ccc;
	--input-background-color: #fff;
	--input-disabled: #f5f5f5;
	--input-focus: 0 0 0 3px rgba(121, 82, 179, 0.25);
	--error: #dc3545;
	--success: #198754;
	--warning: #664d03;
	--info: #0c5460;
	--alert-error-bg: #f8d7da;
	--alert-warning-bg: #fff3cd;
	--alert-success-bg: #d4edda;
	--alert-info-bg: #d1ecf1
}

*,
::after,
::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1rem;
	line-height: 1.25;
	background-color: var(--body-bg-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--text-main)
}

body>main {
	max-width: var(--max-width);
	margin: 1rem auto;
	flex: 1
}

main>p {
 text-align: center;
}

main>form {
	margin: 1rem auto;
	border: solid 1px var(--border-color);
	padding: 1rem;
	border-radius: var(--border-radius);
	background-color: var(--form-bg-color)
}

body>header>nav>a {
	display: flex;
	justify-content: center;
	align-items: center
}

nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center
}

@media (min-width:769px) {
	nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center
	}
}

nav ul {
	list-style: none;
	padding: 0
}

nav ul li {
	display: inline-block;
	margin: 0 .5rem;
	position: relative;
	text-align: left
}

nav li a {
	text-decoration: none;
	color: var(--text-main)
}

a {
	color: var(--link-color);
	text-decoration: none
}

a:hover {
	text-decoration: none
}

article img,
section img {
	max-width: 100%
}

hr {
	background-color: var(--input-border-color);
	border: none;
	height: 1px;
	margin: 1rem 0;
	width: 100%
}

ol li,
ul li {
	padding: .2rem 0;
	margin: 0 2rem
}

p {
	margin: .75rem 0;
	padding: 0
}

details {
	margin: 1.3rem 0
}

details summary {
	font-weight: 700;
	cursor: pointer
}

form {
	width: 400px
}

form h1 {
	padding: 5px 0;
	font-size: 1.4rem;
	font-weight: 400;
	text-align: center;
	color: var(--text-bright)
}

form i {
	margin-left: -30px;
	cursor: pointer
}

form p {
	margin-bottom: .5rem
}

form>section {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem
}

form>footer {
	text-align: center;
	border-top: solid 1px var(--input-border-color);
	padding: .5rem 0;
	font-size: .8rem
}

form>div {
	margin-bottom: .75rem
}

input+small,
label+small,
textarea+small {
	color: var(--error)
}

label {
	display: inline-block;
	margin-bottom: 5px;
	vertical-align: top;
	width: 100%
}

input,
select,
textarea {
	background-color: var(--input-background-color);
	color: var(--input-text-color);
	border: 1px solid var(--input-border-color);
	border-radius: var(--border-radius);
	display: inline-block;
	padding: .5rem .75rem;
	width: 100%;
	font-family: inherit;
	font-size: 1rem
}

input::placeholder {
	color: var(--input-placeholder-color)
}

input:focus,
select:focus,
textarea:focus {
	outline: 0;
	box-shadow: var(--input-focus)
}

input[disabled],
textarea[disabled] {
	background-color: var(--input-disabled);
	border: solid 1px var(--input-border-color);
	box-shadow: none;
	color: var(--input-text-disabled);
	cursor: not-allowed
}

input.error,
select.error,
textarea.error {
	border-color: var(--error)
}

input.error:focus,
select.error:focus,
textarea.error:focus {
	box-shadow: 0 0 0 .25rem rgb(220 53 69 / 25%)
}

input.success,
select.success,
textarea.success {
	border-color: var(--success)
}

input.success:focus,
textarea.success:focus {
	box-shadow: 0 0 0 .25rem rgb(25 135 84 / 25%)
}

a em,
a i,
button {
	display: inline-block;
	background: var(--primary);
	color: var(--button-text);
	border: 1px solid var(--primary);
	border-radius: var(--border-radius);
	font-size: 1em;
	font-weight: 400;
	text-align: center;
	padding: .5em .75em;
	min-width: 10ch;
	user-select: none;
	font-style: normal;
	text-decoration: none;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

a em:hover,
a i:hover,
button:hover {
	background: var(--secondary);
	border-color: var(--border-color);
	cursor: pointer
}

a em:focus,
a i:focus,
button:focus {
	outline: 0;
	color: var(--button-text);
	background-color: var(--secondary);
	border-color: var(--border-color);
	box-shadow: var(--button-focus)
}

a em,
button[type=button] {
	background-color: #fff;
	color: var(--primary);
	border-color: var(--primary)
}

a em:hover,
button[type=button]:hover {
	background: var(--secondary);
	color: var(--button-text);
	cursor: pointer
}

form>button {
	display: block;
	width: 100%
}

form>div>div>label {
	width: auto;
	cursor: pointer;
	display: inline-block;
	position: relative;
	border-radius: var(--border-radius)
}
table {
	border-spacing: 0;
	display: block;
	overflow-x: auto;
	text-align: left;
	width: 100%
}

td,
th {
	border-bottom: .1rem solid #e1e1e1;
	padding: 1.2rem 1.5rem
}

td:first-child,
th:first-child {
	padding-left: 0
}

td:last-child,
th:last-child {
	padding-right: 0
}

@media (min-width:40rem) {
	table {
		display: table;
		overflow-x: initial
	}
}

.center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}


.p {
	justify-content: center;
}