@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

:root {
	--theme              : #6d48e5;
	--theme-inverse      : white;
	--theme-hover        : #7c5ce7;
	--theme-hover-inverse: white;
	--theme-light        : #f6f6fd;
	--light              : #97a6b5;
	--dark               : #3a3a47;
}

html,
body {
	padding    : 0;
	margin     : 0;
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	min-height : 100vh;
	color      : var(--dark);
	font-weight: 400;
	font-size  : 12px;
}

html {
	/*background-color: var(--theme);*/
}

body::before {
	content            : "";
	position           : absolute;
	z-index            : -1;
	top                : 0;
	left               : 0;
	width              : 100%;
	height             : 100%;
	background-image   : url('/assets/img/bg01.jpg');
	background-position: center;
	background-repeat  : no-repeat;
	background-size    : cover;
	opacity            : 0.1;
}

header {
	padding   : 25px 30px;
	font-size : 30px;
	background: white;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
}

footer {
	background-color: var(--theme-light);
	padding         : 25px 30px;
	font-size       : 16px;
	box-shadow      : 0 5px 20px 0 rgba(0, 0, 0, .1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
}

strong {
	font-weight: 700;
}

h1 {
	font-size     : 28px;
	line-height   : 1.2;
	letter-spacing: 0;
}

.c-container {
	margin   : 0 auto;
	max-width: 1024px;
}

.c-inlinegrid {
	display: inline-grid;
}

.c-grid {
	display: grid;
}

.c-grid-h {
	grid-auto-flow   : column;
	grid-auto-columns: auto;
}

.c-grid-v {
	grid-auto-flow: row;
	grid-auto-rows: auto;
}

.c-grid-h-3 {
	grid-template: "left center right"/ 1fr 1fr 1fr;
}

.c-grid-v-3 {
	grid-template: "top"auto "middle"1fr "bottom"auto;
}

.top {
	grid-area: top;
}

.middle {
	grid-area: middle;
}

.bottom {
	grid-area: bottom;
}

.left {
	grid-area: left;
}

.center {
	grid-area: center;
}

.right {
	grid-area: right;
}

.u-left {
	display        : flex;
	justify-content: flex-start;
}

.u-center {
	display        : flex;
	justify-content: center;
}

.u-right {
	display        : flex;
	justify-content: flex-end;
}

.u-top {
	display    : flex;
	align-items: flex-start;
}

.u-middle {
	display    : flex;
	align-items: center;
}

.u-bottom {
	display    : flex;
	align-items: flex-end;
}

.c-grid.u-center,
.c-inlinegrid.u-center {
	justify-content: center;
}

.c-grid.u-middle,
.c-inlinegrid.u-middle {
	align-items: center;
}

.c-navlink-button {
	display        : inline-block;
	padding        : 7px 15px;
	border-radius  : 4px;
	text-decoration: none;
	font-weight    : 500;
	font-size      : 14px;
	transition     : 0.25s color, 0.25s background-color;
}

.u-bg-theme {
	background-color: var(--theme);
	color           : var(--theme-inverse);
}

.c-navlink-button.u-bg-theme:hover,
.c-navlink-button.u-bg-theme:active {
	background-color: var(--theme-hover);
	color           : var(--theme-hover-inverse);
	box-shadow      : 0 5px 20px 0 rgba(0, 0, 0, .1);
}

.u-text-theme {
	color: var(--theme);
}

.u-text-light {
	color: var(--light);
}

.u-text-small {
	font-size: 12px;
}

.u-text-large {
	font-size: 18px;
}

.u-text-center {
	text-align: center;
}

.u-fill-v {
	height: 100%;
}

.u-fill-h {
	width: 100%;
}

.u-space-top {
	margin-top: 10px;
}

.u-space-bottom {
	margin-bottom: 10px;
}

.c-name {
	color      : var(--theme);
	font-weight: 700;
}

.c-name-full {
	color      : var(--dark);
	font-weight: 300;
}

.c-splashimg {
	max-width : 800px;
	max-height: 50vh;
	width     : 100%;
}