/* login.css */

:root {
	--bck-color-brand: #8a2432;
	--bck-color-brand-rgb: 138, 36, 50;
	--bck-color-brand-2: #862633;
	--bck-color-brand-2-rgb: 134, 38, 51;
	--bck-color-brand-3-rgb: 105, 7, 21;
	--bck-color-offwhite: #eeeff0;
	--bck-btn-hover-bg: #731f2b;
	--bck-btn-active-bg: #731f2b;
	--bck-color-grey: #eeeff0;
	--bck-color-darkgrey: #1b2227;
	--bs-link-color-rgb: 134,36,50;
	--bs-link-hover-color-rgb: 0,0,255;
	--bs-dark-rgb: var(--bck-color-brand-3-rgb);
}

html, body {
	background-color: var(--bck-color-darkgrey);
	font-size: 10pt;
}

body {
	display: flex;
	flex-flow: column;
	height: 100vh;
}

header, footer, main {
	width: 100%;
	max-width: var(--page-width, auto);
	margin: 0 auto;
}

main {
	flex: 1;
	background: #fff;
}

.section {
	padding: 10px 0;
}

.container {
	padding: 0;
	margin: 0;
}

.block {
	display: flex;
	column-gap: 1em;
	row-gap: 1em;
}

.block-vert {
	flex-direction: column;
}

html, body { background-color: #eeeff0; }
header, footer { color: #000; background-color: transparent; }
main { background-color: #fff; }
img.bck-logo__img { width: 200px; }

main {
    margin-top: 15vh;
    padding: 45px 90px 45px 90px;
    border: 1px solid #ccc;
    border-radius: 7px;
}

@media (max-width: 900px) {
    main {
        margin-top: 4em;
    }
}

@media (max-width: 600px) {
    main {
        margin-top: 3em;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 30px;
    }
}