:root
{
	--body-background: #E3F2FD;
	--h3-background: #1565C0;
	--h3-color: white;
	--ol-font-contact-color: #d50000;
	--condition-color: #0D47A1;
	--condition-border: 4px solid #1565C0;
	--color-mode-background: #1565C0;
	--color-mode-color: white;
}

.darkmode
{
	--body-background: #1A202C;
	--h3-background: #2d3848;
	--h3-color: white;
	--ol-font-contact-color: #02dac5;
	--condition-color: #efc9a4;
	--condition-border: 4px solid #2d3848;
	--color-mode-background: #2d3848;
	--color-mode-color: #02dac5;
}

body
{
	background: var(--body-background);
}

*
{
	box-sizing: border-box;
	margin: 0;
	font-family: arial;
}

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

a:visited
{
	text-decoration: none;
}

h3
{
	background: var(--h3-background);
	color: var(--h3-color);
}

h3, p, li
{
	padding-left: 5px;
}

.alert-message
{
	text-align: center;
	color: red;
	font-size: 24px;
	padding: 10px;
}

ol, .font-contact
{
	color: var(--ol-font-contact-color);
}

.condition
{
	max-width: 850px;
	margin: 0 auto;
	padding-bottom: 10px;
	font-family: 'Oswald', serif;
	color: var(--condition-color);
	font-size: 1.1em;
	border: var(--condition-border);
	border-radius: 4px 4px 0 0;
}

.color-code
{
	background: var(--color-mode-background);
	color: var(--color-mode-color);
	padding: 10px 0;
}

.container-form
{
    width: 100%;
    height: 1350px;
    display: block;
    position: relative;
}