/* main style */

/*
color, type, layout, UI, anim
*/

/* color --------------------------------------------- */
:root {
	--color-primary: #333;
	--color-secondary-1: #333;
	--color-secondary-2: #333;
	--color-accent-1: #333;
	--color-accent-2: #333;
	--color-link: #333;

	--color-dev-1: #5fa5c8;
	--color-dev-2: #bad8f5;
	--color-dev-3: #dadada;
}

/* dev ----------------------------------------------- */
body * {
	border: 0 dotted #c902df;
}
.dev-bg-blue {
	background-color: var(--color-dev-1);
}
.dev-bg-lt-blue {
	background-color: var(--color-dev-2);
}
.dev-bg-grey {
	background-color: var(--color-dev-3);
}

/* type --------------------------------------------- */
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}

p {
}

/* layout --------------------------------------------- */
html {
	margin: 0;
	font-size: 16px;
}
body {
	box-sizing: border-box;
}

footer {
	background-color: var(--color-dev-3);
	min-height: 200px;
}
/* UI --------------------------------------------- */
a {
	color: var(--color-link);
}
table {
	border-collapse: collapse;
}
img {
	width: 100%;
	height: auto;
	display: block;
}

form input{
	border: 1px solid #333;
}

/* anim --------------------------------------------- */

/* utility --------------------------------------------- */

.my.d-none {
	display: none;
}

.my.d-flex {
	display: flex;
}

.my.d-flex-col {
	display: flex;
	flex-direction: column;
}

.my.full-w {
	width: 100%;
	padding-inline: 20px;
}

.my.full-w-boxed-inner {
	width: 100%;
	padding-inline: 0px;
}
.my.boxed {
	width: 100%;
	max-width: 1300px;
	padding-inline: 20px;
	margin: auto;
}